[ JS ] 객체 조회 방법 Dot notation vs Square-Bracket notation

객체에선 key를 이용해 프로퍼티를 쉽게 찾을 수 있는데, 두 가지 방법이 있다.

Dot notation ( 점 표기법 )과 Square-Bracket notation( 대괄호 표기법 )

점 표기법

    const user = {
      name : '빌라갱',
      gender: '🚺',
      'favorite food' : '🍕' //복수의 단어는 따옴표로 묶어줘야 함 
    } 
    
    alert(user.name) // 빌라갱

위와 같이 점 표기법을 이용해서 name이라는 key로 해당 프로퍼티를 읽어왔다. 하지만 'favorite food'와 같이 여러 단어를 조합해 프로퍼티 key를 만든 경우 점 표기법으로 프로퍼티를 읽을 수 없다.
user.favorite food = '🍗' //❎
자바스크립트는 위와 같은 코드를 이해하지 못한다. user.favorite 까지 이해하지만 food를 만나면 문법 에러가 발생한다.
점 표기법은 '유효한 변수 식별자'의 경우에만 사용할 수 있다.
유효한 변수 식별자 -> 공백이 없어야 함, 숫자로 시작하면 안됨, $와 _ 를 제외한 특수문자 안됨
key가 유효한 변수 식별자가 아닌 경우 '대괄호 표기법'을 사용할 수 있다. 이 표기법은 key에 어떤 문자열이 있던지 상관없이 동작한다.

 

대괄호 표기법

대괄호 표기법을 사용하면 변수를 키로 사용한 것과 같이 문자열뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

    const user = {
      name : '빌라갱',
      gender: '🚺',
      'favorite food' : '🍕' 
    } 

    let food = 'favorite food'
    user[food] = '🍗'

    alert(user[food]) // 🍗

변수 food는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다. 어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 key로 사용된다. 이 부분을 응용한다면 코드를 좀 더 유연하게 사용할 수 있다.

    const user = {
        name : '빌라갱',
          gender: '🚺',
      'favorite food' : '🍕' 
    }
    let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "gender");

    alert(user[key]) -> 출력결과 이미지 확인
    alert(user.key) -> undefined

개발자 모드 console 창에서 출력해보았다!

하지만 점 표기법으로는 위와 같은 방식이 불가능하다. 

 

eslint 공식 문서를 살펴보면 가독성과 같은 측면에서 점 표기법을 권장한다. 하지만 프로퍼티 이름이 변수인 경우 대괄호 표기법이 필요함

https://eslint.org/docs/rules/dot-notation

dot-notation

계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 계산된 프로퍼티라고 부른다.

let food = prompt("먹고싶은 음식은?", "오리주물럭")

let menu = {
	[food] : 12000 //변수 food 에서 프로퍼티 이름을 동적으로 받아옴.
}

alert(menu.오리주물럭) //food에 오리주물럭이 할당되어 12000이 출력된다.

위 예시에서는 [food] 는 프로퍼티 이름을 변수 food에서 가져오겠다는 것을 의미한다. 

아래와 같이 사용할 수도 있다. 

let food = prompt("먹고싶은 음식은?", "오리주물럭")
let menu = {}

menu[food] = 12000

또는 

let food = '오리주물럭'
let menu = {
	['spicy' + food] : 12000 //menu.spicy오리주물럭 = 12000
}

위와 같이 프로퍼티 이름에 변수와 문자열을 함께 사용할 수 도 있다. 대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 이런 점에서 훨씬 강력하지만 작성하기도 번거롭고 읽기에도 복잡한 단점이 있다. 

 

단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와 사용하는 경우를 예로 들어보자. 

function makeUser(name, age){
	return{
    	name : name, 
        age : age
    }
}

let user = makeUser('빌라갱', '26')
alert(user.name) //빌라갱

위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일하다. 이와 같은 경우 '프로퍼티 값 단축 구문'을 사용하면 코드를 짧게 줄일 수 있다. `name : name` 대신 `name`만 적어주어도 프로퍼티를 설정할 수 있는 것! 

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    address : '서울특별시 무슨구 무슨동' // 일반 프로퍼티와 단축 프로퍼티를 함께 사용할 수도 있다.
  };
}