자바스크립트 딥다이브 - 10장

객체란?

원시 값과의 차이

원시 타입

• 단 하나의 값 만 나타낸다.
• 변경 불가능한 값 Immutable 이다.

객체 타입

• 원시 타입을 제외한 나머지 값 (함수, 배열, 정규표현식 등)은 모두 객체다.
• 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료 구조 이다.
• 다른 값을 참조하기 때문에 변경 가능한 값 Mutable 이다.
• 프로퍼티 란 객체의 상태 를 나타내는 값이며, 메서드 란 프로퍼티 를 참조하고 조작 할 수 있는 동작 을 처리한다.

팁

함수 는 객체를 생성하기도 하고, 함수 자체가 객체 이기도 한다.

객체 리터럴에 의한 객체 생성

클래스 기반 객체지향 언어 는 클래스를 사전에 정의하고 필요한 시점에 new 연산자 와 함께 생성자(constructor)를 호출하여 인스턴스 를 생성하는 방식으로 객체를 생성한다.

인스턴스

인스턴스란 클래스 에 의해 생성되어 메모리에 저장된 실체 를 의미한다.
클래스는 인스턴스를 생성하기 위한 템플릿 역할을 한다.

자바스크립트의 객체 생성 방법

객체 리터럴

let person = {
    name: "민수",
    sayHello: function () {
    console.log(`Hello My Name is ${name}.`)
    }
}

Object 생성자 함수

let person = new Object(name: "민수", sayHello())

생성자 함수

function createPerson (name) {
    return {
        name: name,
        sayHello: function () {
        console.log(`Hello My Name is ${name}.`)
        }
    }
}
let person = createPerson("민수")

Object.create method

let person = Object.create(Object.protoType, {
    name: "민수",
    sayHello()
})

클래스(ES6)

class Person {
    name: string

    constructor(name) {
        this.name = name
    }

function sayHello(){
    console.log(`Hello My Name is ${name}.`)

}

let person = new Person("민수")

프로퍼티(property)

객체 는 프로퍼티 의 집합 이며, 프로퍼티는 키 와 값 으로 구성된다.
프로퍼티는 key : value 의 구조를 가진다.
식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표 를 사용해야 한다.

let foo = {
    name: "민수",
    'last-name': '강'
    ['mid-name']: '준'
}

문자열 이나 심볼값 외의 값을 사용하면 문자열로 암묵적 타입 변환 한다.

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



console.log(foo); // {"0": 1, "1": 2, "2": 3}

이미 존재하는 프로퍼티 키를 중복 선언 하면 나중에 선언한 프로퍼티 가 먼저 선언한 프로퍼티를 덮어쓴다.

const foo = {
    a: 1,
    a: 2
}



console.log(foo); // {a: 2}

메서드(Method)

함수 는 value로 취급할 수 있기 때문에 프로퍼티 값 으로 사용할 수 있다.
프로퍼티 값 이 함수 일 경우 일반 함수와 구분하기 위해서 메서드 라 부른다.
객체 에 바인딩 된 함수를 메서드라 한다.

프로퍼티 접근

프로퍼티에 접근할 수 있는 방법은 2가지가 있다.

1. 마침표 표기법(dot notation)
2. 대괄호 표기법(bracket notation)

프로퍼티 키가 식별자 네이밍 규칙 을 준수 하면 마침표 표기법과 대괄호 표기법을 모두 사용 할 수 있다.

let person = {
    name : 'lee'
}

console.log(person.name);
console.log(person['name']);
console.log(person[name]); // error

console.log(person.age); // undefined

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키 는 반드시 따옴표로 감싼 문자열 이어야 한다.
객체에 존재하지 않는 프로퍼티 에 접근 하면 undefined 를 반환한다.

프로퍼티 갱신

이미 존재하는 프로퍼티 에 값을 할당 하면 프로퍼티 값이 갱신 된다.

let person = {
    name: 'alren'
}

person.name = 'kim'



console.log(person.name); // "kim"

프로퍼티 동적 생성

존재하지 않는 프로퍼티 에 값을 할당 하면 프로퍼티가 동적으로 생성 되어 추가되고 값이 할당 된다.

let person = {
     name: 'kim'
}

person.age = 12



console.log(person); // { name: "kim", age: 12 }

프로퍼티 삭제

delete 연산자 를 이용 객체안의 프로퍼티를 삭제 할 수 있다.

존재하지 않는 프로퍼티는 에러 없이 무시 한다.

let person = {
    name: 'kim'
}


delete person.name;
delete person.age;



console.log(person); // {}

ES6 에서 추가 된 객체 리터럴의 확장 기능

프로퍼티 축약 표현

변수명 과 프로퍼티 키 가 동일 이름이면 프로퍼티 키를 생략 가능 하다.

let x = 1, y = 2;

let obj = { x, y };

계산된 프로퍼티 이름

객체 리터럴 내부에서 계산된 프로퍼티 이름 으로 프로퍼티 키를 동적 생성 할 수 있다.

const prefix = 'prop';
let i = 0;

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
}

메서드 축약 표현

const obj = {
    name: 'kim',
    sayHi() {
        console.log(`hi, ${name}`);
    }
}