[JS] deepDive | 객체 (Object)

객체 (Object)

• 원시값(primitive value)을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체
• 원시 타입은 하나의 값만 나타내지만 객체 타입(object / reference type)은 다양한 값을 하나의 단위로 구성
• 원시 값은 변경 불가(immutable)한 값이지만, 객체는 변경 가능(mutable)한 값
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키 (key) : 값 (value)로 구성
• 자바스크립트에서 함수도 프로퍼티의 값으로 설정 가능 [함수는 일급객체]

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

 

자바스크립트는 프로토타입 기반 객체 지향 언어

• 자바와 같은 클래스 기반 객체 지향 언어와는 달리 다양한 객체 생성 방법을 지원

1. 객체 리터럴
2. object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스 (ES6)

---

객체 리터럴을 사용한 객체 생성

• 중괄호 { ... } 내에 0개 이상의 프로퍼티를 정의
• 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성

const person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    },
};

console.log(person);	// { name: 'Alice', age: 30, greet: [Function: greet] }
person.greet();		// Hello, my name is Alice

 

클래스 (ES6)를 사용한 객체 생성

• ES6에서 도입된 문법으로, 객체 지향 프로그래밍의 클래스를 정의하고 인스턴스를 생성하는 방법

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const person3 = new Person('Diana', 28);

console.log(person3);   // Person { name: 'Diana', age: 28 }
person3.greet();        // Hello, my name is Diana

---

프로퍼티

객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성된 속성

• 프로퍼티 키(key) : 빈 문자열 ( ' ' )을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값(value) : 자바스크립트에서 사용할 수 있는 모든 

var person = {
  name: "WI", // 프로퍼티 키는 name, 프로퍼티 값은 "WI"
  age: 100, // 프로퍼티 키는 age, 프로퍼티 값은 100
};

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 식별자

• 하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다.
• 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.
• 반대로 말하면 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var person = {
	firstName: 'Young-min',  // 식별자 네이밍 규칙을 준수한 프로퍼티 키
	'last-name': 'WI',       // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용해 문자열 형태 유지 )
 	 last-name: 'WI'         // SyntaxError: Unexpected token ( 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키 ( 따옴표를 사용하지 않을 경우 - 표현식으로 해석 ) )
};

• 프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.

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

console.log(foo); // { '0': 1, '1': 2, '2': 3 } << 키값이 문자열 형태로 암묵적 타입 변환

• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 선언한 프로퍼티를 덮어쓴다.(에러 발생 X)

var foo = {
  name: "WIEEEE",
  name: "WI",
};

console.log(foo); // { name: 'WI' }

---

프로퍼티 접근 방법

• 마침표(.) 표기법
• 대괄호 ([...]) 표기법

const people = {
    name: 'Dong',
    age: 29,
};

console.log(people.name);	// Dong
console.log(people['age']);	// 29

// 대괄호 프로퍼티 접근 연산자 내에 문자열 형태가 아닌 프로퍼티 키로 사용하면 자바스크립트 엔진은 "식별자"로 해석
console.log(people[age])	// ReferenceError: age is not defined

// 객체에 존재하지 않는 프로퍼티에 접근시
console.log(people.address)	// undefined

 

프로퍼티 동적 생성 & 삭제

const people = {
    name: 'Dong',
    age: 29,
};

people.address = 'Uljin';
console.log(people);	// { name: 'Dong', age: 29, address: 'Uljin' }

delete people.age;
delete people.job;		// job이라는 프로퍼티 키는 없음 -> 그럼에도 delete 연산시 에러 발생 X
console.log(people);	// { name: 'Dong', address: 'Uljin' }