객체의 프로퍼티 값을 가져올 때 마침표와 대괄호의 차이

객체 : object
프로퍼티(속성) : 이름(key)과 값(value)의 연결로 이루어짐

프로퍼티 값을 가져오거나 생성하기 위해서는 마침표(.)를 사용하거나 대괄호([])를 사용한다.

객체의 property명에 접근할 때는 무조건 .key or ["key"]

• 차이

1. 마침표(.)를 사용하는 경우
   -프로퍼티 키가 정적일 때, 즉 정해져 있을 때 사용한다. 단, 프로퍼티 키가 정적이더라도 식별자 네이밍 규칙을 준수하지 않는다면 대괄호 표기법을 사용해야 한다.

2. 대괄호([])를 사용하는 경우
   -프로퍼티 키가 동적일 때 사용한다. 예를 들어 서버에서 데이터를 받아온 후 그 데이터에 따라 프로퍼티 키가 정해지는 경우 등이 있다.
   -스페이스가 포함된 key 및 변수로 접근할 때에는 대괄호로만 접근 가능하다.

console.log(difficult.my name);  //오류
console.log(difficult['my name']); //프로퍼티 정상 접근

• 식별자 네이밍 규칙이란?
  식별자(identifier)란 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 일컫는다.
  식별자는 다음과 같은 네이밍 규칙을 준수해야 한다.
  1)식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(), 달러기호($)를 포함할 수 있다.
  2)단, 식별자는 특수문자를 제외한 문자, 언더스코어(), 달러기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용되지 않는다.
  3)예약어는 식별자로 사용할 수 없다.

• 예약어(reserved word)는 프로그래밍 언어에서 사용되거 있거나 사용될 예정인 단어로, 자바스크립트의 예약어에는 await, break, case,catch, ..., while, with, yield 등이 있다.
  전체 예약어는 MDN 문서에서 확인 가능하다.

• "HTML Guide"데이터에 접근하기

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

방법
1. console.log(objData.books.info[1].name)
2. console.log(objData["books"]["info"][1]["name"])

• 문제 : getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력

let myProfile = {
  name: '김개발',
  address: {
    email: 'geabal@gmail.com',
    home: '위워크'
  },
  'my favorite': {
    food: [{
      name: '샐러드',
      price: 3500
    }, {
      name: '삼겹살',
      price: 15000
    }],
    hobby: ['축구']
  }
}

정답

function getAnswer(){
	let salad = myProfile['my favorite'].food[0].name;
    return salad;
}

function getAnswer(){
	let salad = myProfile['my favorite']['food'][0]['name'];
    return salad;
}