TIL -24. JavaScript : object(2)

객체는 다른 데이터 타입(텍스트, 숫자, 배열 등)처럼 변수에 저장할 수 있습니다.

특징

• {}만 사용하면 된다. 이렇게 {}으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 부른다.

let 변수명 = {};//빈 객체를 할당

• 객체는 순서가 없는 데이터의 모음, 반대로 순서가 있는 데이터는 배열

let 변수명 = ['데이터1', '데이터2', '데이터3', '데이터4'....];

• 변수명의 요소가 차례대로 추가된 것이고 index는 0부터 시작한다.
• 객체는 키(key)-값(value)쌍으로 된 데이터의 모음으로써 순서가 바꿔도 상관없다.
• 객체는 키(key)로 접근, 배열은 index로 접근
• 키(key)는 특정 값을 갖고 있는 변수같은 역할을 한다.
• 해당 키로 프로퍼티에 어떤 값이 저장되어 있는지 알수 있다.
• 키의 값에는 텍스트, 숫자, 함수, 객체를 넣을 수 있다.

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

• 객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.
  변수는 불가능하다
• 위의 코드에서 color인 키를 보면 값에 ;를 붙지 않고 끝낸 것을 볼 수 있다. 이렇게 키에 특수문자가 없으면 따음표를 생략하고 쓸 수 있다.

1. 프로퍼티 접근

• 방법 : 접근은 dot(.)으로 접근 or []대괄호로 접근하는 법
• 키(key)만 알고 있다면 dot(.)으로 접근하는 것이 제일 편하다.
  dot(.)은 키로 바로 접근할 떄 사용하는 것이고, 따음표 없이 키를 바로 써줘야 한다.
• 대괄호([])로 접근하려면 키 이름을 따음표로 감싸서 작성해야한다.

console.log(difficult.my name); // 오류
console.log(difficult['my name']);//실행가능

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

let name = '키';
console.log(difficult[name]);

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

3. 프로퍼티 할당

프로퍼티[키] = '값 할당';

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

4. Method(메서드)

• 객체에 저장된 값이 함수일 때, 메서드라고 부른다.
• consol도 객체이며, 자바스크립트 어디에나 접근이 가능했으니 global 객체이다.
• console다음에 dot('.')으로 프로퍼티를 접근했고, log라는 키의 값은 함수
• log는 console이라는 객체의 메서드

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

호출:

methodObj.do();

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

6. 객체는 reference로 저장된다.

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

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

BUT!

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

아래의 객체는 생긴 모양이 같지만, false라고 출력된다.
그이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니기 때문!이다. 객체가 담긴 어느 메모리의 reference를 저장하기 때문

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