26-3. 변수로 프로퍼티 접근하기
let name = '키'; console.log(difficult[name]);
변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.
이때 dot(.) 다음에 변수명을 넣어서 프로퍼티에 접근이 가능 할까요?
console.log(difficult.name);
직접 실행 해봅시다. 뭐라고 나오나요? undefined 입니다.
⭐dot(.)으로 접근한다는 뜻은 실제 키이름을 쓸 때입니다.⭐
'name' 이라는 키가 있었으면 그에 해당하는 프로퍼티에 접근할 수 있었겠지만, 존재하지 않기 때문에 undefined 가 나온것입니다. ⭐변수로 접근할 때는 항상 대괄호로 접근해야 합니다.(따옴표 필수)⭐
26-4. 프로퍼티 할당
difficult[name] = '값 바꾼다'; console.log(difficult[name]); difficult.color = '색깔'; console.log(difficult.color); console.log('생성전: ' + difficult.new); difficult.new = '새로 추가된 프로퍼티'; console.log('생성후: ' + difficult.new);
객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됩니다.
이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가 됩니다.
아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되어있지만, 값이 없습니다
console.log(difficult.newProperty);
어떤 값이 나오나요? 네, undefined 입니다.
아직 difficult 라는 객체에 newProperty 프로퍼티가 없기 때문에 undefined 입니다. 아래는 없었던 키에 값을 바로 입력해서 프로퍼티를 추가하는 방법입니다.
difficult.realNewProperty = '추가 됐다';
📌객체의 특별한 점을 알려드리겠습니다.
객체를 const 로 선언했을 때 알쏭달쏭한 현상이 일어납니다.
const a = 1; a = 2;
const 로 선언된 변수는 값을 절대 수정할 수 없었습니다. a = 2; 를 시도하면 자바스크립트 오류가 납니다.
그런데 const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다.
const mutableObj = { name: '객체' }; mutableObj = { name: '수정' }
⚠️변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능 합니다.⚠️
실행해보면 자바스크립트 오류가 납니다.
mutableObj.name = '수정'; mutableObj.type = 'Object 타입';
그렇지만 프로퍼티에 접근해서 내용을 수정하거나, 프로퍼티를 추가하는 것은 에러가 나지 않습니다.
const mutableObj = { name: '객체' }; // mutableObj = { // name: '수정' // } 값 수정 시도. 오류남 mutableObj.name = '수정'; // 객체를 추가해서 수정하는 건 안됨!! 프로퍼티 추가는 됨 mutableObj.type = 'Object 타입'; console.log(mutableObj["name"]); //'수정' 'Object 타입' '수정'
26-7. 중첩된 객체 (Nested Object)
let nestedObj = { type: { year: '2019', 'comment-type': [{ name: 'simple' }] } }
📌위에서 'simple' 을 출력하려면 어떻게 해야할까요?
console.log(nestedObj.type['comment-type'][0].name);
컴퓨터는 왼쪽에서 오른쪽으로 해석한 다는 것을 명심하고 이해해주세요.
항상 왼쪽에 직접 코드를 써야 한다는 것을 잊지 말아주세요!!
• nestedObj.type 는 year, comment-type이 있는 객체입니다
• nestedObj.type['comment-type'] 는 요소 1개인 배열입니다.
• nestedObj.type['comment-type'][0] 첫 번째 요소인 객체를 가져옵니다.
• nestedObj.type['comment-type'][0].name 드디어 'simple'에 접근!
26-7. reference로 저장된다.
객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference가 저장됩니다.
반대로, 텍스트는 변수에 저장하면 텍스트 자체가 저장됩니다. 그래서 서로 같은 텍스트를 비교연산 하면 서로 값이 같으므로 true 입니다.
const a = '안녕'; const b = '안녕'; console.log(a === b);
그런데 아래의 객체는 생긴 모양이 아예 똑같은데 false 라고 출력됩니다.
const hiObj = { name: '안녕' }; const helloObj = { name: '안녕' }; console.log('객체비교 =>', hiObj === helloObj);
그 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니기 때문입니다. 객체가 담긴 어느 메모리의 reference 를 저장하기 때문입니다.
hiObj 가 갖고 있는 진짜 값은 메모리 주소인 reference입니다. 하지만 hiObj 를 불러올 때 메모리 주소를 반환하는 것이 아니라, 해당 메모리에 저장된 데이터를 반환해 줍니다.
그래서 눈에 보이는 데이터는 똑같지만, hiObj 와 helloObj 가 갖고 있는 진짜 값은 다른 것입니다.
const hiObj = { name: '안녕' }; const helloObj = { name: '안녕' }; console.log('객체비교 =>', hiObj === helloObj); // false console.log('객체비교 =>', hiObj === helloObj); // false console.log('객체값비교 =>', hiObj.name === helloObj.name); // true
✍️Assignment
getAnswer 함수를 구현해 주세요.
• getAnswer함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.
let myProfile = { name: '김개발', address: { email: 'geabal@gmail.com', home: '위워크' }, 'my favorite': { food: [{ name: '샐러드', price: 3500 }, { name: '삼겹살', price: 15000 }], hobby: ['축구'] } }
function getAnswer() { return myProfile['my favorite'].food[0].name }
