[JS] 객체 리터럴 문법

강버섯·2022년 2월 3일
0

React Overview

목록 보기
6/8
post-custom-banner

👉 자바스크립트의 객체

자바스크립트의 객체는 이름-값 쌍 또는 프로퍼티(property)의 집합이다.

{
	name: 'Jhon Doe', //property
    age: 20
}

위와 같은 종류의 객체는 공개 데이터만 포함 가능하며, 캡슐화가 불가능하고 동작을 포함할 수 없다.

👉 객체 리터럴 문법

✏️ 쉼표 추가

객체 리터럴은 코드 끝에 쉼표를 사용할 수 있어 코드 수정 필요 시 프로퍼티를 쉽게 추가할 수 있다.

let jhon = {
  name: 'Jhon Doe',
  age: 20,
}

✏️ 변수 이름 중복 작성 안함

객체 리터럴 선언 시 프로퍼티와 동일한 이름의 변수로 값을 설정하고는 하는데, 이럴 때에는 프로퍼티와 변수명을 중복으로 작성하지 않아도 된다.

다음과 같이 age라는 변수로 age의 값을 선언하고 싶을 경우,

const age = 20

let jhon = {
  name: 'Jhon Doe',
  age: age
}

이렇게👇 작성하는 것만으로도 동일한 결과를 얻을 수 있다.

const age = 20

let jhon = {
  name: 'Jhon Doe',
  age
}

✏️ 연산 결과를 사용하기

연산 결과를 객체 리터럴에 사용하고 싶을 때에는 대괄호를 사용한다.

let jhon = {
  name: 'Jhon Doe',
  [field.toLowerCase()]: 20
}

✏️ 식별자 규칙에 맞지 않는 프로퍼티 이름 사용하기

프로퍼티의 이름은 항상 문자열이다.
만일 이 프로퍼티의 이름이 식별자 규칙에 맞지 않는 경우에는 따옴표를 사용하여 작성한다.

let jhon = {
  name: 'Jhon Doe',
  'born at': USA
}

위와 같이 작성할 경우에는 점 표기법으로 접근이 불가하기 때문에 대괄호를 사용하여 접근하도록한다.

console.log(jhon['born at'])
profile
무럭무럭 버섯농장
post-custom-banner

0개의 댓글