[모던 자바스크립트 딥다이브]_객체 리터럴 어디까지 보고 오셨어요?

객체란?

원시타입의 값, 즉 원시 타입값은 변경 불가능한 값입니다.

하지만 객체타입의 값은 변경 가능한 값입니다.

var foo = {
    //프로퍼티 입니다.
    name : 'jin',
    gender : 'male'
    //메소드 입니다.
    sum : function () {
    this.name + this.gender;
    }
}

 

객체리터럴에 의한 생성

객체 리터럴은 중괄호 내에 0개 이상의 프로퍼티를 정의합니다.

변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성합니다.

const bar = {}

 

프로퍼티

객체는 프로퍼티의 집합이고, 프로퍼티는 키와 값으로 구성됩니다.

이전에 사용했던 예제를 다시 사용해보겠습니다.

var foo = {
    //프로퍼티 입니다.
    name : 'jin',
    gender : 'male'
    //메소드 입니다.
    sum : function () {
    this.name + this.gender;
    }
}

name과 gender 는 키입니다.

jin과 male은 값입니다.

 

메서드

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부릅니다.

var foo = {
    //프로퍼티 입니다.
    name : 'jin',
    gender : 'male'
    //메소드 입니다.
    sum : function () {
    this.name + this.gender;
    }
}

sum이라는 키 값으로 메서드에 접근할 수 있습니다.

 

프로퍼티 접근

이 객체의 프로퍼티에 접근하는 방법은 두가지가 있습니다.

var foo = {
    //프로퍼티 입니다.
    name : 'jin',
    gender : 'male'
    //메소드 입니다.
    sum : function () {
    this.name + this.gender;
    }
}

console.log(foo.name); // jin
console.log(foo.['gender']); // male

 마침표 프로퍼티 접근 연산자를 사용할 수 있고,

대괄호 프로퍼티 접근 연산자를 사용할 수 있습니다.

 

프로퍼티 값 갱신

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

var foo = {
    //프로퍼티 입니다.
    name : 'jin',
    gender : 'male'
    //메소드 입니다.
    sum : function () {
    this.name + this.gender;
    }
}

console.log(foo.name); // jin

foo.name = 'park';
console.log(foo.name); // park

 

프로퍼티 동적 생성

프로퍼티가 존재하지 않는 빈객체에 키와 값을 할당하면 동적으로 생성되어 추가됩니다.

var barr = {};

barr.name = 'kim';
consol.log(barr.name); //kim

 

프로퍼티 삭제

프로퍼티를 삭제하기 위해서는 delete 예약어를 사용하면 됩니다.

var barr = {};

barr.name = 'kim';

delete barr.name;
console.log(barr); // {}

 

객체=box