FE/리뷰

[모던 자바스크립트 딥다이브] 10장 객체 리터럴

따봉치치 2024. 3. 16. 15:47
728x90

객체
  • 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
  • 변경 가능한 값
  • 0개 이상의 프로퍼티로 구성된 집합
  • 함수도 일급 객체이므로 값으로 취급될 수 있고, 프로퍼티 값이 함수라면 메서드라고 칭함
  • 상태와 동작을 하나의 단위로 구조화 할 수 있음
  • 프로퍼티 : 객체의 상태를 나타내는 값
  • 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

 

인스턴스
  • 클래스에 의해 생성되어 메모리에 저장된 실체

 

 

객체 생성 방법
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스(ES6)

 

객체 리터럴
  • 중괄호 내에 0개 이상의 프로퍼티 정의
  • 변수가 할당되는 시점(런타임)에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성함
  • 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됨
  • 객체 리터럴의 중괄호 문은 표현식이기 때문에 세미클론 붙임
  • 객체 리터럴을 사용하여 객체를 생성하는 방식은 자바스크립트의 유연함과 강력함을 대표하는 방식

 

 

프로퍼티
  • 프로퍼티는 키와 값으로 구성됨
  • 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
  • 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값
  • 프로퍼티 키는 식별자 네이밍 규칙을 따르지 않으면 반드시 따옴표를 사용해야 함
  • 프로퍼티 키를 대괄호로 동작 생성 가능
  • 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨
  • var, function 같은 예약어도 키로 사용 가능. 하지만 예상치 못한 에러 발생 가능
  • 이미 존재하는 키 값을 중복으로 사용 가능. 하지만 먼저 선언한 프로퍼티 덮어 쓰고, 에러가 발생하지 않음

 

메서드
  • 객체에 묶여 있는 함수

 

프로퍼티 접근
  • 마침표 표기법
  • 대괄호 표기법 => 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감산 문자열이여야 함(단, 숫자로 이뤄진 문자열인 경우 따옴표 생략 가능 ^^)
  • 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름일 경우 대괄호 표기법을 사용해야 함!
  • 그렇지 않으면 자바스크립트 엔진은 식별자로 해석해 찾으려고 함 => ReferenceError 발생
  • 객체에 존재하지 않은 프로퍼티에 접근 시 undefined 반환
var person = {
	name : 'Lee'
}

//마침표 표기법
console.log(person.name);

//중괄호 표기법
console.log(person['name']);
var person = {
	'last-name' : 'Lee',
    1 : 10
};

person.'last-name'; // SyntaxError
paerson.last-name; // 브라우저 : NaN, Node.js : ReferenceError

person[last-name]; //ReferenceError
person['last-name'] // Lee

person.1 // SyntaxError
person.'1' // SyntaxError
person[1]; // 10
person['1']; // 10

브라우저 상에서 name은 window 객체(전역)로 존재하기 때문에 undefined가 나올 수 있음..!

 

 

프로퍼티 갱신, 동적 생성, 삭제
  • 갱신 : 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨
  • 동적 생성 : 존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨
  • 삭제 : delete 연산자를 사용해 삭제
var person = {
	name : 'Lee'
};

//갱신
person.name = 'Kim';

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

//삭제
delete person.age;

 

 

ES6에 추가된 기능
  • 프로퍼티 축약 표현 : 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키 생략 가능
//ES5

var x = 1, y = 2;

var obj = {
    x : x,
    y : y
};

//ES6

var obj = {x,y};

 

  • 계산된 프로퍼티 이름 : 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능. 단, 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 함
//ES5
var preifx = 'prop';
var i = 0;

var obj = {};

obj[prefix + '-' + ++i] = i;
obj[prefix + '-' + ++i] = i;

console.log(obj); //{prop-1 : 1, prop-2 : 2}

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

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

console.log(obj); //{prop-1 : 1, prop-2 : 2}

 

  • 메서드 축약 표현 : function 키워드를 생략한 축약 표현 사용 가능
//ES5

var obj = {
	name : 'lee',
    sayHi : function() {
    	console.log('hi' + this.name);
    }
};


//ES6

const obj = {
	name : 'lee',
    sayHi() {
    	console.log('hi' + this.name);
    }
}
728x90