[DeepDive] 10장 객체 리터럴

FE 개발자 신상오·2022년 8월 1일
0

모던JS 딥다이브

목록 보기
4/5
post-thumbnail

📚 객체

JS는 객체 기반의 프로그래밍 언어로 JS를 구성하는 거의 모든 것이 객체
원시 값을 제외한 나머지(함수, 배열, 정규 표현식 등) 모두 객체이다

// 객체는 프로퍼티의 집합
let person = {
	name : 'soshin', // 프로퍼티 키 : 프로퍼티 값
	age : 27,
}

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

📗 프로퍼티

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

  • 식별자 네이밍 규칙
    식별자 네이밍 규칙을 따르는 프로퍼티 키의 이름에는 반드시 따옴표를 사용
let person = {
	firstName : 'so', // 식별자 네이밍 규칙 준수하는 프로퍼티 키
	'last-name' : 'shin' // 식별자 네이밍 규칙 준수하지 않는 프로퍼티 키
  // 'last-name' 에서 '...'를 생략한다면 last -(마이너스) name으로 해석한다.
};
  • 프로퍼티 키 동적 생성
    동적으로 프로퍼티 키를 생성하려면 키로 사용할 표현식을 [...](대괄호)로 묶는다
let obj = {};
let key = 'hello';

obj[key] = 'world';

console.log(obj) // {'hello' : 'world'}
  • Number 타입의 프로퍼티 키
    Number 타입의 프로퍼티 키는 따옴표는 안 붙지만 문자열로 변환된다
let foo = {
  0: 1,
  1: 2,
  2: 3,
};
  • 프로퍼티의 중복 선언
    나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다

📗 프로퍼티 접근

let person = {
	name: 'so',
};

// 1. 마침표 표기법 접근
console.log(person.name); // 'so'

// 2. 대괄호 표기법 접근
console.log(person['name']); // 'so'

📗 프로퍼티 동적 생성

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

let person = {
	name : 'so'
};

person.age = 27;

console.log(person); // {name : "so", age : 27}

📗 프로퍼티 삭제

delete 연산자로 프로퍼티를 삭제한다

// person 객체에서 age 프로퍼티 삭제
delete  person.age;

//존재하지 않는 프로퍼티를 삭제하려해도 에러 발생 x

📗 ES6 객체 리터럴 확장 기능

프로퍼티 축약 표현

변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키 생략 가능

let x = 1, y = 2;

const obj = {x, y};

console.log(obj); // {x : 1, y : 2}

계산된 프로퍼티 이름

객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성 가능

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

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

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

메서드 정의 function 키워드 생략 가능

const obj = {
	name ='so',
	Hi() {
    console.log('Hi' + this.name);
    }
};

obj.Hi(); // Hi! so
profile
주간 회고용 블로그입니다 (개발일지와 정보글은 티스토리에 작성합니다.)

0개의 댓글