TIL03 | JavaScrpit 객체

모던 자바스크립트(저자 이웅모) 내용을 참고하였습니다.

 

객체

객체(object)는 자바스크립트 데이터 타입 중의 하나이다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 Key와 Value로 구성된다.

var user = {
    name : 'jin',
};

 

객체 생성

객체 리터럴 : 중괄호 {...} 내에 0개 이상의 프로퍼티를 정의

var user = {
    id : 1,
    name: 'jin',
    sayHello: function(){
        console.log(`Hello! My name is ${this.name}`);
    }
};

 

Property

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 Key와 Value로 구성된다.

var user = {
    // 프로퍼티 키는 name,프로퍼티 값은 'jin'
    name : 'jin',
};

Property - key

빈 문자열을 포함하는 모든 문자열 또는 심벌 값.

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

예를 들어 숫자 리터럴을 사용하면 내부적으로 문자열로 변환된다.

var foo = { 
    1: 100,
    2: 200,
};
console.log(foo); // {1:100, 2:200}

 

프로퍼티 키는 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다. 단 , 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var user = {
    'first-name' : 'jin', // 네이밍 규칙을 따르지 않는 프로퍼티 키
};

console.log(user['first-name']);

Property - value

자바스크립트에서 사용할 수 있는 모든 값.

 

Property 접근 방법

마침표 표기법 (dot notation)

마침표 프로퍼티 접근 연산자(.)를 사용하는 표기법이다.

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

var user = {
    'name' : 'jin'
};
console.log(user.name); // 마침표 표기법에 의한 접근

대괄호 표기법 (bracket notation)

대괄호 프로퍼티 접근 연산자([...])를 사용하는 표기법이다.

[...] 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 하며, 따옴표로 감싸지 않으면 자바스크립트 엔진은 식별자로 해석한다.

대괄호 표기법을 반드시 사용해야 하는 경우

• 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름 일 때 (단, 숫자로 이루어진 문자열은 따옴표를 생략할 수 있다.)
• 변수로 접근할 때

var user = {
    name : 'jin',
    'user id' : 'user001'
};
console.log(user[name]); // ReferenceError: name is not defined

// 대괄호 표기법
console.log(user['name']); // jin

// 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름
console.log(user['user id']); // user001

// 변수로 접근할 때
const player = 'user id';
console.log(user[player]); // user001

 

Property 추가, 갱신, 삭제

추가 (동적 생성)

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

갱신

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

삭제

delete 연산자로 객체의 프로퍼티를 삭제한다.

만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

var user = {
    name : 'jin'
};

// 추가
user.age = 20;
console.log(user); // {name: 'jin', age: 20};

// 갱신
user.age = 27;
console.log(user); // {name: 'jin', age: 27};

// 삭제
delete user.age;
console.log(user); // {name: 'jin'};

 

객체를 사용하는 이유

배열로 처리하려면 배열요소가 가진 의미와 Index를 기억하고 있어야하는데,

배열요소가 많아지면 일일히 기억할 수도 없을 뿐더러, 배열의 수가 많아지면 처리하기가 힘들다.

객체는 key와 value로 이루어져 있어 순서가 없기 때문에 index를 기억하지 않아도 되고, 원하는 정보의 key값만 알면 value에 접근할 수 있다.