[JS] 객체 접근방식 & ES6 객체 리터럴 신문법

[ 객체 접근방식 ]

 

1. 초기화 표현식

- 객체 초기화 표현식

let obj = { x:1, y:1 }

- 배열 초기화 표현식:

let arr = [1,2,3]

 

2. 객체 접근 방식

: 객체에 접근하는 방식은 2가지가 있음.

  1) obj.x

  2) obj[x]

 

두 가지의 차이점은? 

 : 프로퍼티 이름에 스페이스, 구두점이 있거나, 고정값이 아닐 때 반드시 대괄호로 접근해야 함. 

 

2-1. 조건부 프로퍼티 접근

: JS에서 프로퍼티 값으로 가질 수 없는 2가지 값 => null, undefined

해당 값으로 프로퍼티 값이 평가될 때 타입 에러 발생.

타입에러 발생하지 않게 접근하는 방식이 조건부 프로퍼티 방식

1) obj?.x

2) obj?.[x]

?를 옵션 체인이라고 한다. 어떤 원리로 동작하는 건지?

let a = {b:null}

위 코드에서  b값에 일반적으로 객체에 접근하는 방법대로 접근하면, TypeError가 발생한다. 

객체 프로퍼티가 가질 수 없는 값을 가졌기 때문. 

 

만약 a.b?.c  로 접근하면, c는 없는 값임에도 불구하고, Error가 발생하지 않고 undefined로 평가된다.?. 를 사용한 프로퍼티 접근이 '단축 평가' 되기 때문.?. 왼쪽에 있는 하위 표현식이 null이나 undefined로 평가되면, 더는 프로퍼티에 접근하려고 시도하지 않고 전체 표현식을 undefined로 평가함. 

 

[ ES6 객체 리터럴 신문법 ]

1) 단축 프로퍼티

: 상황 => 변수 x, y를 객체의 x, y에 할당하고자 함. 

let x = 1
let y = 2

//기존 문법

let o = {x:x, y:y}

//ES6
let o = {x,y}

: 객체 프로퍼티와 값이 같으면, 생략 가능

 

2) 프로퍼티 이름

: 상황 => 프로퍼티 이름이 단순 문자열이 아니거나, 변수 또는 함수의 반환 값이면? 

const name = 'p1'
function computer (){ return "p" + 22 }

// 기존
let obj = {}
o.[name] = 1
o.[computer()] = 2
// 빈 객체를 선언해준 다음, 빈객체에 값을 할당해주는 방식으로 구현됨.

let obj = {
[name]:11,
[computer()]:2
}

3) 심벌이 프로퍼티의 name이 될 수 있음.

const test = Symbol("symbol")

let o = {

[test]: { x:1 }

}

Symbol은 고유한 프로퍼티 이름을 사용할 때 유용

반환 값이 어떤 값과도 같지 않음. 

 

4) 분해 연산자

분해 연산자 (...)를 사용해 기존 객체의 프로퍼티를 새 객체에 복사할 수 있음. 

 

let position = {x:1, y:2}
let dimensions = { width:10, height:70 }
let rect = {...position, ...dimensions}

** 상속된 프로퍼티에는 적용되지 않음. 

let obj = Object.create({x:1})
let copy = {...obj}

obj.x // undefined

 

**객체 프로퍼티가 n개 있으면, 이 프로퍼티를 다른 객체로 분해하는 작업은 O(n) 작업임.

분해 연산자를 Loop, 재귀 함수에 넣어 Data를 큰 객체 하나에 누산 하면? n이 커질수록 비효율적인 방법으로 작동함. O(n²)

알고리즘 사용. 

 

5) 단축 메서드

//메서드 함수를 객체 프로퍼티값에 할당할 때 ? 

//기존
let square = {
area: function(){return this.side * this.side}
}

//ES6
let square = {
area(){return this.side * this.side}
}

//area()가 메서드임을 명확히 표현할 수 있음.

 

출처: 오렐리 js 완벽 가이드 4장, 6장 객체