1. Object

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

위와 같이, 객체는 다른 데이터 타입(텍스트, 숫자, 배열 등..)과 동일하게 변수에 저장할 수 있습니다. 이처럼 {}으로 직접 객체를 생성하는 방식을 object literal(객체 리터럴)이라고 부릅니다.객체는 순서가 없는 데이터의 모음입니다. 그렇기때문에 배열처럼 순서대로 index 로 접근하는게 아니라 키로 접근합니다.

키는 마치 특정 값을 갖고 있는 변수와 같은 역할을 합니다. 해당 키로 프로퍼티에 어떤 값이 저장되어 있는지 알 수 있습니다. 키의 값에는 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있습니다.

2. 프로퍼티 접근

접근은 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']); // '숫자 형식도 되네'

3. 변수로 프로퍼티 접근하기

변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.

const name = '키'; // 변수명에 key name 할당

console.log(difficult[name]);
// 대괄호로 변수명을 감싸서 접근이 가능하다.

4. 프로퍼티 할당

객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(수정)됩니다. 이전에 없던 키로 접근해 값을 부여하면, 새로운 프로퍼티가 추가됩니다.

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); // 새로 추가된 프로퍼티 출력

5. Method (메서드)

객체에 저장된 값이 함수일 때, 메서드라고 부릅니다. 객체에 메서드를 정의하려면 아래와 같이 할 수 있습니다.

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

methodObj.do(); // 호출

6. 중첩된 객체 (Nested Object)

프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있습니다.

아래 코드에서 'simple' 을 출력하려면 어떻게 해야할까요? 자바스크립트는 코드가 작성된 순서대로 왼쪽에서 오른쪽으로 해석한다는 것을 명심해주세요.

const nestedObj = {
	type: {
		year: '2019',
		'comment-type': [{
			name: 'simple'
		}]
	}
}

console.log(nestedObj.type['comment-type'][0].name); // simple

// .으로 type에 접근 -> 'comment-type'특수문자가 포함되어 있기때문에 []로 접근 -> 
프로퍼티 값이 배열로 묶여져 있기 때문에 index로 접근 -> 그 후 해당 프로퍼티 키 입력

7. 객체는 reference(메모리주소)로 저장된다.

객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니라 reference(메모리주소)가 저장됩니다. 그렇기 때문에 아래의 객체는 동일한 형태를 가지고 있음에도 false 라고 출력됩니다.

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj); 
// false ->  객체 자체를 그대로 저장하는 것이 아니라 객체가 담긴 어느 메모리의 reference 를 저장하기 때문이다.

console.log('객체값비교 =>', hiObj.name === helloObj.name);
// true -> 객체 내부의 프로퍼티 값이 텍스트일 경우는, 텍스트를 비교하게 되어 서로 같음 / 다름 여부를 판단할 수 있습니다.

Assignment

getAnswer 함수를 구현해 주세요.

• getAnswer 함수는 아래의 객체에서 '샐러드' 라는 값을 출력합니다.

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()); // 샐러드