const myProfile = {
name: '김개발',
address: {
email: 'geabal@gmail.com',
home: '위워크'
},
'my favorite': {
food: [{
name: '샐러드',
price: 3500
}, {
name: '삼겹살',
price: 15000
}],
hobby: ['축구']
}
}
위와 같이, 객체는 다른 데이터 타입(텍스트, 숫자, 배열 등..)과 동일하게 변수에 저장할 수 있습니다. 이처럼 {}으로 직접 객체를 생성하는 방식을 object literal(객체 리터럴)이라고 부릅니다.객체는 순서가 없는 데이터의 모음입니다. 그렇기때문에 배열처럼 순서대로 index 로 접근하는게 아니라 키로 접근합니다.
키는 마치 특정 값을 갖고 있는 변수와 같은 역할을 합니다. 해당 키로 프로퍼티에 어떤 값이 저장되어 있는지 알 수 있습니다. 키의 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.
접근은 dot(.)으로 접근하는 방법과, 대괄호([])로 접근하는 법이 있었습니다.
const difficult = {
33: '숫자 형식도 되네',
'my name': '스페이스 포함 가능',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군',
'!키': '느낌표가 있는 키는 따옴표가 필요하군',
$special: '$는 따옴표가 없어도 되는군'
};
console.log(difficult.color); // silver
사실 키만 알고 있으면 dot(.)으로 접근하는 것이 제일 편합니다. dot(.)은 키로 바로 접근할 때 사용합니다. dot으로 접근할 때는 따옴표 없이 키를 바로 써줘야 합니다.
다른 방법으로는 대괄호([])로 접근할 수도 있습니다.
console.log(difficult['color']); // 대괄호로 접근시 변수명['키네임'] 으로 접근
다음과 같이 key내용에 white space, 숫자가 있으면 에러를 발생시킵니다. 이런경우 대괄호로 접근해야 합니다.
console.log(difficult.my name); // 에러
console.log(difficult['my name']); // '스페이스 포함 가능'
console.log(difficult.33); // 에러
console.log(difficult['33']); // '숫자 형식도 되네'
변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.
const name = '키'; // 변수명에 key name 할당
console.log(difficult[name]);
// 대괄호로 변수명을 감싸서 접근이 가능하다.
객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됩니다. 이전에 없던 키로 접근해 값을 부여하면, 새로운 프로퍼티가 추가됩니다.
difficult[name] = '값 바꾼다';
// 키값(value) 수정, 변수로 프로퍼티를 접근하기때문에 [ ](대괄호) 이용
console.log(difficult[name]);
difficult.color = '색깔';
// 키값(value) 수정, 프로퍼티로 바로접근 할 수 있기 때문에 .으로 접근
console.log(difficult.color);
console.log('생성전: ' + difficult.new); // new라는 key가 없기 때문에 undefined
difficult.new = '새로 추가된 프로퍼티'; // 프로퍼티 추가
console.log('생성후: ' + difficult.new); // 새로 추가된 프로퍼티 출력
객체에 저장된 값이 함수일 때, 메서드라고 부릅니다. 객체에 메서드를 정의하려면 아래와 같이 할 수 있습니다.
const methodObj = {
do: function() {
console.log('메서드 정의는 이렇게');
}
}
methodObj.do(); // 호출
프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있습니다.
아래 코드에서 'simple' 을 출력하려면 어떻게 해야할까요? 자바스크립트는 코드가 작성된 순서대로 왼쪽에서 오른쪽으로 해석한다는 것을 명심해주세요.
const nestedObj = {
type: {
year: '2019',
'comment-type': [{
name: 'simple'
}]
}
}
console.log(nestedObj.type['comment-type'][0].name); // simple
// .으로 type에 접근 -> 'comment-type'특수문자가 포함되어 있기때문에 []로 접근 ->
프로퍼티 값이 배열로 묶여져 있기 때문에 index로 접근 -> 그 후 해당 프로퍼티 키 입력
객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference(메모리주소)가 저장됩니다. 그렇기 때문에 아래의 객체는 동일한 형태를 가지고 있음에도 false 라고 출력됩니다.
const hiObj = {
name: '안녕'
};
const helloObj = {
name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);
// false -> 객체 자체를 그대로 저장하는 것이 아니라 객체가 담긴 어느 메모리의 reference 를 저장하기 때문이다.
console.log('객체값비교 =>', hiObj.name === helloObj.name);
// true -> 객체 내부의 프로퍼티 값이 텍스트일 경우는, 텍스트를 비교하게 되어 서로 같음 / 다름 여부를 판단할 수 있습니다.
const 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
}
console.log(getAnswer()); // 샐러드