[모던 자바스크립트 Deep Dive] 10장. 객체 리터럴

2024. 3. 27. 10:28·웹 프로그래밍/JavaScript | TypeScript
반응형

10.1. 객체란?

  • js를 구성하는 거의 모든 것
  • 원시 값(=단 하나의 값만 나타냄, 변경 불가능한 값)을 제외한 나머지 값
  • 함수, 배열, 정규 표현식 등
  • 객체 타입: 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조
  • 변경 가능한 값
  • 0개 이상의 프로퍼티로 구성된 집합. (프로퍼티: key-value로 구성됨)
  • 프로퍼티 값이 함수인 경우 메서드라고 부른다.
var person = {
  name: "A", //프로퍼티
  age: 20, //프로퍼티

  //메서드
  getName: function () {
    console.log(this.name);
  },
};
//프로퍼티 키: name, age
//프로퍼티 값: "A", 20

 

  • 프로퍼티: 객체의 상태를 나타내는 값(data)
  • 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

👉 객체는 프로퍼티와 메서드를 모두 포함할 수 있으므로, 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

👉 객체지향 프로그래밍: 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임

 

 

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

객체 리터럴

  • 객체를 생성하기 위한 표기법
  • 중괄호{} 내에 0개 이상의 프로퍼티를 정의한다.
  • 변수에 할당되는 시점에 js엔진은 객체 리터럴을 해석해 객체를 생성한다.

 

10.3. 프로퍼티

  • 객체는 프로퍼티의 집합
  • 프로퍼티는 키(key), 값(value)으로 구성된다.

 

키(key)

  • 프로퍼티 값에 접근할 수 있는 이름. 식별자 역할을 한다.
  • 이미 존재하는 프로퍼티 키를 중복 선언 시, 나중에 선언한 프로퍼티로 기존 값이 덮어씌워진다. (프로퍼티 값 갱신)
  • 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
var person = {
  name: "A", //식별자 네이밍 규칙을 준수는 프로퍼티 키
  "age-value": 20, //식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};

 

 

10.5. 프로퍼티 접근

객체 프로퍼티 접근법

  • key가 식별자 네이밍 규칙을 따르는 경우: 마침표 프로퍼티 접근 연산자(.) 사용
  • key가 식별자 네이밍 규칙을 따르지 않는 경우: 대괄호 프로퍼티 접근 연산자([...]) 사용
var person = {
  name: "A", //식별자 네이밍 규칙을 준수는 프로퍼티 키
  "age-value": 20, //식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};

console.log(person.name); //A, 마침표 사용
console.log(person["age-value"]); //20, 대괄호 표기법 사용

 

🚫 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. (참조 에러 발생하지 않음)

 

10.7. 프로퍼티 동적 생성

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

var person = {
  name: "A",
};

person.age = 20;
console.log(person); //{name: 'A', age: 20}

 

10.8. 프로퍼티 삭제

delete 키워드 사용

var person = {
  name: "A",
};

person.age = 20; //프로퍼티 동적 생성
delete person.age; //프로퍼티 삭제
delete person.address; //존재하지 않는 프로퍼티 삭제는 무시(에러발생x)

console.log(person); //{name: 'A'}

 

 

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

10.9.1. 프로퍼티 축약 표현

//ES5
var x = 1,
  y = 2;

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

console.log(obj);

 

기존과 달리, ES6에서는 프로퍼티 값으로 변수를 사용할 경우 (변수이름=프로퍼티 키 이름) 일 때 프로퍼티 키를 생략 가능하다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

//ES6
let x = 1,
  y = 2;

const obj = { x, y }; //프로퍼티 축약 표현

console.log(obj);

 

 

10.9.2. 계산된 프로퍼티 이름

//ES5
var prefix = "prop";
var i = 0;

var obj = {};

//계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + "-" + ++i] = i;
obj[prefix + "-" + ++i] = i;
obj[prefix + "-" + ++i] = i;

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

 ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

//ES6
var prefix = "prop";
var i = 0;

//객체 리터럴 내부에서 프로퍼티 키 동적 생성
const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
};

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

 

 

10.9.3. 메서드 축약 표현

//ES5
var person = {
  name: "A",
  age: 20,
  getName: function () {
    console.log(this.name);
  },
};

person.getName(); //A

ES6에서는 function 키워드를 생략한 축약 표현을 사용할 수 있다.

//ES6
var person = {
  name: "A",
  age: 20,
  getName() {
    console.log(this.name);
  },
};

person.getName(); //A

ES6의 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다른 동작을 한다. (관련 내용은 26장 2절 "메서드"에서)

 

 


출처: 모던 자바스크립트 Deep Dive (이웅모 저, 위키북스)

 
 
반응형
저작자표시 비영리 변경금지 (새창열림)

'웹 프로그래밍 > JavaScript | TypeScript' 카테고리의 다른 글

[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 1(0. 타입스크립트 소개, 1. JS 단점/TS 장점)  (1) 2024.04.02
[모던 자바스크립트 Deep Dive] 12장. 함수1 (12.1. 함수란? ~ 12.4. 함수 정의)  (1) 2024.03.29
[모던 자바스크립트 Deep Dive] 11장. 원시 값과 객체의 비교  (0) 2024.03.27
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가)  (0) 2024.03.25
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환)  (1) 2024.03.22
[모던 자바스크립트 Deep Dive] 8장. 제어문  (1) 2024.03.22
'웹 프로그래밍/JavaScript | TypeScript' 카테고리의 다른 글
  • [모던 자바스크립트 Deep Dive] 12장. 함수1 (12.1. 함수란? ~ 12.4. 함수 정의)
  • [모던 자바스크립트 Deep Dive] 11장. 원시 값과 객체의 비교
  • [모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가)
  • [모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환)
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
    반응형
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 프로그래밍 N
        • Programming
        • C | C++
        • Java N
        • Python
      • 웹 프로그래밍
        • HTML | CSS
        • JavaScript | TypeScript
        • React
        • Vue.js
        • Next.js
        • Spring & Spring Boot
        • JSP & Servlet
        • DB
      • 웹 프로젝트
        • 웹 프로젝트
        • 🥨스낵몰
        • 👨‍👨‍👧‍👧소셜 가계부
        • 🌜꿈 일기장
        • 🔮포트폴리오 사이트
        • 🏃‍♂️팀 프로젝트: 일정관리 프로그램
        • 📈팀 프로젝트: AI기반 주식 분석 플랫폼
        • 😺Just Meow It: 고양이의 조언
      • 앱 프로그래밍
        • Flutter
        • Kotlin
      • Problem Solving
        • 백준
        • 프로그래머스
        • SWEA
      • Computer Science
        • 알고리즘
        • 컴퓨터 네트워크
        • 이산수학
      • Developer
        • 후기
        • 자료정리
        • 취업 | 취준
        • 웹개발 교육 프로그램
        • TIL
  • 블로그 메뉴

    • 홈
    • Github
  • 공지사항

    • 프로그래밍 공부 중😊
  • 인기 글

  • 태그

    프로그래머스
    백준
    포트폴리오
    AWS
    Jiraynor Programming
    ZeroCho
    알고리즘
    구현
    강의내용정리
    spring boot
    플러터
    bfs
    SWEA
    d3
    React
    웹사이트
    클론 프로젝트
    컴퓨터네트워크
    자바
    리액트
    타입스크립트
    프로젝트
    블로그 제작
    Next.js
    자바스크립트
    공식문서
    mysql
    파이썬
    뉴렉처
    Til
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
[모던 자바스크립트 Deep Dive] 10장. 객체 리터럴
상단으로

티스토리툴바