모던 자바스크립 10장 객체 리터럴

9장  객체리터럴

객체란?

자바스크립트를 구성하는 거의 모든 것

객체는 변경 가능한 값

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티 키와 값으로 구성된다

var person = {
    name : 'Lee',  //키 name , 값 'Lee'
    age: 20
}

프로퍼티와 메서드의 역할

프로퍼티 : 객체의 상태를 나타내는 값

메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작

 

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

다양한 객체 생성 방법을 지원

-객체 리터럴

-Object 생성자 함수

-생성자 함수

-Object.create 메서드

-클래스(ES6)

var person = {
    name : 'Lee'
    sayHello: function() {
        console.log(`My name is ${this.name});
    }
};

프로퍼티

프로퍼티 키 : 문자열을 포함하는 모든 문자열 또는 심벌 값

프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다(숫자 등등)

그러나 가급적 ' ' 를 사용해서 생성

var person = {
    firstName =  'Ung-mo'
    'last-name':'Lee' //'-'이 존재하므로 ' ' 꼭붙여줘야한다
};

console.log(person)

//문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성
var obj ={};
var key = 'hello';

obj[key] = 'world';

console.log(obj)

//빈 문자열도 프로퍼티를 생성할 수 있다
var foo = {
    '':''
}

//숫자를 쓰면 암묵적 타입 변환
var foo = {
    0:1,
    1:2
}

//프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 나온다

메서드

함수와 메서드는 다름

메서드는 객체에 묶여 있는 함수를 의미

var person = {
    name : 'Lee'
    sayHello: function() {  //메서드
        console.log(`My name is ${this.name});
    }
};

프로퍼티 접근

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

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

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로

감싼 문자열이여야 한다

프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

var person = {
    'last-name' : 'Lee'
    1:10
};

//Error
person[last-name];
person.last-name;

//숫자
person[1];
person['1'];

  프로퍼티 값 갱신, 동적 생성, 프로퍼티 삭제

//값 할당
var person = {
    name : 'Lee'
};

person.name ='Kim'

//동적 생성
person.age = 20;

//삭제
delte person.age

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

1)프로퍼티 축약 표현

var x = 1, y = 2;

var obj = {
    x : x,
    y: y
};
//--------------------
let x = 1, y = 2;

const obj = {x, y};

2)계산된 프로퍼티 이름

var abc = 'abc';
var i = 0;

var obj = {};

obj[abc + '-' + ++i] = i

//---------------------------------
var abc = 'abc';
var i = 0;

const obj = {
    [`${abc}-${++i}`] : i
};

2)메서드 축약 표현

const obj = {
    name: 'w'
    say : function() {
        console.log(this.name);
    }
};
//아래로 축약
const obj = {
    name: 'w'
    say() {
        console.log(this.name);
    }
};