JavaScript_객체 - 네이밍 및 프로퍼티 접근

1. 객체 '키(key)' 네이밍

let difficult = {
  33: '숫자 형식도 되네',
  'my name': '스페이스 포함 가능',
  color: 'silver', //특수문자(스페이스도) 없으면 따옴표 없어도 된다
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군',
  'hey-yo': '이런 것도 따옴표 필요?' //필요!
};

변수 네이밍과의 차이점
- 변수 이름은 숫자로 시작할 수 없으며, 기호는 $와 _만 들어갈 수 있다.

2. 객체 프로퍼티 접근

• 마침표( . )
• 대괄호 큰따옴표 ( [" "] )
  대괄호로 작성하면 좋은 경우 - 대괄호 안에는 변수를 쓸 수 있다

응용 예제 (⭐⭐중첩된 객체로의 접근)

• "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"]) 

1. 프로퍼티 value값 중 배열에 접근할 때 주의하기
2. ⭐ 스페이스 포함된 key 및 변수로 접근할 때에는 대괄호로만 접근 가능!

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

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

3. 프로퍼티 할당

새로운 프로퍼티 할당

• 할당할 때에도 접근하는 것과 같이 마침표(.)와 대괄호([])가 쓰인다가 쓰인다.
• 단, 이미 존재하는 key값일 경우 다시 할당하면 값이 교체된다.

difficult[name] = '값 바꾼다';
difficult.color = '색깔';

const로 선언된 변수에 객체를 재할당하는 것은 불가하지만 프로퍼티에 접근해서 value값을 수정하거나 프로퍼티를 추가하는 것은 에러가 나지 않는다

• 오류 예시 (객체 재할당)

const mutableObj = {
  name: '객체'
};


mutableObj = {
   name: '수정'
}

• 정상 작동(프로퍼티 접근하여 value값 수정, 프로퍼티 추가)

mutableObj.name = '수정';
mutableObj.type = 'Object 타입';

4. 객체의 메서드

메서드 정의

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

5.객체는 reference로 저장된다

• 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니라 객체가 담긴 어느 메모리으 reference를 저장한다

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};

console.log(hiObj === helloObj);  //⭐false
console.log(hiObj.name === helloObj.name); //⭐true

💡 예제 중 헷갈렸던 부분

• 문제 : 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;
   
}

'my favorite' key의 내부 값에 접근할 때,
'my favorite': { } 중괄호 내부 값도 객체이므로 똑같이 마침표 또는 대괄호로 접근해주기