[JS] 10장 객체 리터럴 | 모던자바스크립트 Deep Dive

객체란? (Object)

자바스크립트는 객체 기반 언어이다. 자바스크립트의 원시값 (함수, 배열, 정규표현식 등)을 제외한 '모든 것'이 객체이다.

var person = {
name : 'Lee',
age: '20'
};

name, age 를 프로퍼티 키, 'Lee','20'을 프로퍼티 값이라 부른다.
프로퍼티 값에는 모든 값이 들어갈 수 있다. 이 프로퍼티에 함수 또한 들어갈 수 있는데 이것을 메서드 라 부른다

- 용어

프로퍼티 : 객체의 상태를 나타내는 값 (data)
메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior)

var counter = {
	num : 0, //프로퍼티
    increase: function () { //메서드
    this.num++;
    }
 };

객체 생성 방법

c++ 나 Java인 객체지향 언어는 객체를 사전 정의 하고 new 연산자와 함께 생성자를 호출한다.
반면, 자바스크립트는 다양한 객체생성 방법을 지원한다.

1. 객체리터럴 -> {} 중괄호 이용! 선언 방법과 유사
2. object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스 (ES6)

---

프로퍼티 규칙

• 식별자 네이밍 규칙을 서로 준수해야한다.

var person = {
 firstName : 'Sehan',
 lastName : 'Kim'
 }

• 프로퍼티 키를 동적으로 생성 할 수 있음.

var obj = { };
var key = 'hello';

obj[key] = 'world';
// var obj = {[key] : 'world'}
console.log(obj); //{ hello : 'world'}

• 빈 문자열도 프로퍼티 키, 값으로 적용 가능하다.

var foo = {
 ' ':' '
 }

• 키에 문자열 외 값을 사용하면 암묵적 타입변환을 통해 문자열이 된다.

var foo = {
    0:1,
    1:2,
    2:3
    }

• 프로퍼티 키를 중복 선언시 나중에 선언한 프로퍼티가 먼저 선언한것을 덮어쓴다. 에러 아님!

var foo = {
   name: 'Lee';
   name: 'Kim';
} // foo {name : 'Kim'}

---

프로퍼티 접근

• 마침표 표기법 : person.name;
• 대괄호 표기법 : person['name'];
  -> 대괄호 표기법의 경우 대괄호 내부 프로퍼티키는 반드시 따온표로 감싼 문자열이여야함!
  

객체에 존재하지 않는 프로퍼티에 접근한 경우
ReferenceError가 발생하지 않고 Undefined를 반환한다!

프로퍼티 호출 주의사항

var person = {
	'last-name' : 'Lee'
    }
person.'last-name'; //SyntaxError
person.last-name; // 브라우저환경: NaN, Node.js : ReferenceError 
person[last-name]; //ReferenceError
person['last-name']; //Lee

맨 마지막 코드를 제외하고는 개발환경에 따라 오류가 날 수 있다.
last-name에서 last까지만 프로퍼티로 해석하기 때문에 referenceError 발생

---

객체 프로퍼티 조작 (갱신, 생성, 삭제)

1. 갱신

var person = {
	name : 'Lee'
    }

person.name = 'Kim'; //내부 name 프로퍼티 키값을 갱신함

console.log(person); {name : 'Kim'}

2. 생성

var person = {
	name : 'Lee'
    };

person.age(20); //age 프로퍼티 생성

console.log(person); //{name: 'Lee', age: '20'}

3. 삭제

var person = {
	name : 'Lee'
    age : 20 
    };
    
delete person.age; //delete 연산자로 프로퍼티 제거

console.log(person); // {name: 'Lee'}