TIL_29_with Wecode 019 JavaScript about Object

👧 Object (2)
객체는 다른 데이터 타입(텍스트, 숫자, 배열 등..)처럼 변수에 저장할 수 있습니다. {} 만 사용하면 되는데요, 이렇게 {} 으로 생긴 모양의 객체를 object literal(객체 리터럴) 이라고 부릅니다.
hello라는 변수에 빈 객체를 할당하였습니다.

let hello = {}; // {} 객체 리터럴

순서가 있는 데이터는 배열입니다.

let arr = ['고양이', '귀여워', '멍멍이', '좋아'];

arr[0]은 '고양이' 이고, arr[1]은 '귀여워' 입니다.
객체는 키(key)-값(value) 쌍으로된 데이터의 모음으로써 순서가 뒤바껴도 아무 상관이 없습니다. 배열처럼 순서대로 index로 접근하는게 아니라 키로 접근하기 때문입니다.
key는 property name이라고도 하며, value는 property value라고도 말합니다.

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

let difficult = {
  'my name': 'boong',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있습니다. 변수(variable) 선언할 때는 할 수 없었던 표현입니다. color와 같이 키에 특수문자가 없으면 따옴표를 생략하고 쓸 수 있습니다.

🤲 프로퍼티 접근
접근은 dot(.)으로 접근하는 방법과, [] 대괄호로 접근하는 법이 있었습니다.

  let difficult = {
  33: '숫자 형식도 되네',
  'my name': '스페이스 포함 가능',
  color: 'silver',
  키: '한글인 키는 따옴표가 없어도 되는군!!',
  '!키': '느낌표 있는 키는 따옴표가 필요하군',
  $special: '$는 없어도 되는군'
};

console.log(difficult.color);

사실 키만 알고 있으면 dot(.)으로 접근하는 것이 제일 편합니다. dot(.)은 키로 바로 접근할 때 사용하는 것입니다. dot으로 접근할 때는 따옴표 없이 키를 바로 써줘야 합니다. 그런데 [] 대괄호로 접근할 수도 있었죠!

console.log(difficult['color']); 

대괄호로 접근하려면 키 이름을 따옴표로 감싸서 작성해줘야 합니다.

console.log(difficult.my name);

위의 예시처럼 스페이스가 포함된 키는 대괄호로 접근하면 됩니다.

console.log(difficult['my name']); // 이렇게.

console.log(difficult.33);

위의 예시처럼 숫자로 된 키 또한 대괄호로 접근해야 합니다.

console.log(difficult['33']); // 이렇게.

외울 필요는 음슴~
오류 뜨면 그 때 오류 메시지를 확인하고 수정하면 됩니다! 이렇게 다양한 형태로 키 이름을 지을 수 있다는 것만 알아주세요.

🤲 변수로 프로퍼티 접근하기

let name = '키'; 
//여기서 name 은 key 가 아니라, 변수로 선언을 해줬을뿐!
console.log(difficult[name]);

변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.
이때 dot(.) 다음에 변수명을 넣어서 프로퍼티에 접근 가능할까요?
'name'이라는 키가 있었으면 그에 해당하는 프로퍼티에 접근할 수 있었겠지만 존재하지 않기 때문에 undefined가 나옵니다. 변수로 접근할 때는 항상 대괄호로 접근해야 합니다.

🤲 프로퍼티 할당

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);

아직 difficult 라는 객체에 newProperty 프로퍼티가 없기 때문에 undefined입니다.

difficult.realNewProperty = '추가 됐다';

위의 예시는 없었던 키에 값을 바로 입력해서 프로퍼티를 추가하는 방법입니다.

const a = 1;
a = 2;

const로 선언된 변수는 값을 절대 수정할 수 없었습니다. a = 2;를 시도하면 자바스크립트 오류가 납니다.
그런데 const로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능합니다.

const mutableObj = {
  name: '객체'
};
mutableObj = {
   name: '수정' 
  //'겍체' 라는 프로퍼티가 '수정' 이라는 프로퍼티로 변경됨.
}

변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능 합니다. 실행해보면 자바스크립트 오류가 납니다.

mutableObj.name = '수정'; //오류발생.
mutableObj.type = 'Object 타입'; //오류발생.

🤲 Method(메서드)
객체에 저장된 값이 함수일 때, 메서드라고 부릅니다.

console.log(); //콘솔도 객체이다!!

자바스크립트 어디에나 접근이 가능했으니 global 객체입니다. console다음에 dot('.')으로 프로퍼티를 접근했고, log라는 키의 값은 함수인 것 같습니다. log는 console이라는 객체의 메서드입니다.

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

methodObj.do(); //호출하기.

🤲 중첩된 객체 (Nested Object)
실무에서 사용되는 객체는 거의 중첩되어 있습니다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있습니다.

let nestedObj = { //객체 안에
	type: {
		year: '2019',
		'comment-type': [{ //프로퍼티 값인 배열의 요소가 객체
			name: 'simple'
		}]
	}
}

위에서 'simple'을 출력하고 싶다면?

console.log(nestedObj.type['comment-type'][0].name);
/* ```nestedObj```변수에 접근 -> 
객체 ```type```에 접근 -> 
객체```['comment-type']```에 접근 
(중괄호인 이유: 객체 이름에 '' 따옴표가 사용됐기 때문에)
그리고 객체 ```'comment-type'```의 값이 배열로 이루어졌고 
그 배열의 요소 또한 객체이기 때문에 
[0] 번째의 객체인 ```name```에 접근하여 
simple을 출력할 수 있다!!*/

컴퓨터는 왼쪽에서 오른쪽으로 해석한 다는 것을 명심하고 이해해주세요.
항상 왼쪽에 직접 코드를 써야 한다는 것을 잊지 말아주세요!!

• nestedObj.type는 year, comment-type이 있는 객체입니다
• nestedObj.type['comment-type']는 요소 1개인 배열입니다.
• nestedObj.type['comment-type'][0] 첫 번째 요소인 객체를 가져옵니다.
• nestedObj.type['comment-type'][0].name 드디어 'simple'에 접근!

🤲 객체는 reference로 저장된다.
객체를 변수에 저장하면 객체 리터럴 자체가 저장되는 것이 아니라 reference가 저장됩니다. 텍스트는 변수에 저장하면 텍스트 자체가 저장됩니다. 그래서 같은 텍스트면 서로 값이 같으므로 true입니다.

const a = '안녕';
const b = '안녕';
console.log(a === b); //true

그런데 아래의 객체는 생긴 모양이 아예 똑같은데 false라고 출력됩니다.

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj); //false

그 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니기 때문입니다. 객체가 담긴 어느 메모리의 reference 를 저장하기 때문입니다.

hiObj가 갖고 있는 진짜 값은 메모리 주소인 reference입니다. 하지만 hiObj를 불러올 때 메모리 주소를 반환하는 것이 아니라, 해당 메모리에 저장된 데이터를 반환해 줍니다.
그래서 눈에 보이는 데이터는 똑같지만, hiObj와 helloObj가 갖고 있는 진짜 값은 다른 것입니다.

console.log('객체비교 =>', hiObj === helloObj);
//false 객체는 다르고
console.log('객체값비교 =>', hiObj.name === helloObj.name); 
//true 객체값은 같다

그래서 객체를 담은 변수를 비교하면 서로 같지 않다고 나옵니다. 그러나 객체 내부의 프로퍼티 값이 텍스트일 경우는, 텍스트를 비교하게 되어 서로 같음/다름 여부를 판단할 수 있습니다.

const mutableObj = {
  name: '객체'
};
mutableObj = {
   name: '수정'
}
mutableObj.name = '수정 됩니다!';

const로 선언된 변수는 절대 값이 바뀌면 안됩니다. 그래서 mutableObj에 새로운 객체를 할당하면 오류가 납니다. 왜냐면 새로운 메모리 주소(reference)로 수정을 시도하기 때문이죠.
하지만 mutableObj.name 로 프로퍼티를 접근해서 수정할 수 있습니다. mutableObj가 저장된 reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이라 수정이 되는 것 입니다!

🤲 Assignment
아래의 객체에서 '샐러드'라는 값이 출력 될 수 있도록 getAnswer함수에서 return 해 주세요.

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;
}

객체 myProfile 에 접근 -> 객체 'my favorite' 에 접근 (홀따옴표와 공백이 있기 때문에 [] 로 감싸준다.) -> 객체 food[0]에 접근 (배열 요소이기 때문에 샐러드가 있는 인덱스를 지정해준다.) -> name객체에 접근! 샐러드 출력.