[10장] 객체 리터럴

📂10장 객체 리터럴

객체란?

• 자바스크립트를 구성하는 거의 "모든 것"은 객체
• 원시 값(변경 불가능)을 제외한 나머지 값은 객체
• 객체 값은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이며
• 변경 가능한 값임

const 객체 = { 프로퍼티 키 : 프로퍼티 값}

• 프로퍼티는 키와 값으로 구성
• 자바스크립트에선 사용할 수 있는 모든 값은 프로퍼티 값임.
• 프로퍼티엔 함수도 포함 => 자세한 설명은 11장
• 프로퍼티 값이 함수인 경우 이를 메서드 라고 불림

  const counter = {
    num : 0,
    increase : function() {
      this.num++;
    }
  }

• 객체는 프로퍼티와 메서드로 구성된 집단체
• 프로퍼티 : 객체의 상태를 나타내는 값
  • num : 0
• 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
  • increase : function() {
    this.num++;
    }
• 객체 생성 방법 :
  1. 객체 리터럴
  2. Object 생성자 함수
  3. 생성자 함수
  4. Object.create 메서드
  5. 클래스(ES6)

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

const person = {
  name : 'lee',
  sayHello : function () {
    console.log(`Hello! ${name}`);
  }
};
console.log(typeof person) // object
console.log(person) // {name : 'lee', sayHello : f}

• 객체 리터럴은 중괄호({...code})내에 0개 이상의 프로퍼티를 정의함.
• 변수에 할당되는 시점에 자바스크립트엔진은 객체 리터럴을 해석해 객체 생성함.

프로퍼티

const person = {
  프로퍼티 키 : 프로퍼티 값
  name : "Lee", 
  age : 20
}

• 프로퍼티는 쉼표(,)로 구분함. 마지막 쉼표는 사용하지 않으나 해도 무방
• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

case 1 - 식별자 네이밍을 지키지 않으면?

const person = {
  firstName : "menduck", // 식별자 네이밍 규칙을 지킨 경우
  'last-name' : "kim" // 규칙을 지키지 않아 번거롭게 문자열로 바꾼 경우
};

• 문자열로 변경하지 않고 last-name으로 한다면 -연산자로 인식하여
• SyntaxError 발생함.

case 2 - 프로퍼티 키를 동적으로 생성

let obj = {};
const key = 'hello'; // ES5 프로퍼티 키 동적 생성
obj[key] = 'world'; // let obj = {[key] : 'world'}

console.log(obj) // hello : "world"

• 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성
• [ 프로퍼티 키로 사용할 표현식 ] 처럼 대괄호로 묶어서 사용

case 3 - 빈 문자열로 프로퍼티 키가 되나?

const blank = {
  '':''
};
console.log(blank) // {'' : ''}

• 에러는 발생하지 않지만 키로서의 의미가 없으므로 권장하지 않음.

case 4 - 프로퍼티 키에 숫자 리터럴을 사용하면?

const number = {
  0 : 1,
  1 : 2,
}
console.log(number) // { 0 : 1, 1 : 2}

• 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 됨.
• 따옴표는 붙지 않지만 내부적으로 문자열로 변환해서 사용함!

case 5 - 예약어로 프로퍼티 키를 사용하면?

const umm = {
  const : '',
  let : ''
};
console.log(umm) // {const : '', let : ''}

• 에러는 발생하지 않지만 예상치 못한 에러 발생할 가능성이 있으므로 권장하지 않음.

case 6 - 프로퍼티 키 중복 선언하면?

const person ={
  age : 25,
  age : 20
}
console.log(person) // { age : 20}

• 중복 선언 시 나중에 선언한 프로퍼티 키가 나옴.
• 에러 발생하지 않음.

---

메서드

const circle = {
  radius : 5,

  getDiameter : function () {
    return 2 * this.radius; // this는 circle을 가리킴
  }
};
console.log(circle.getDiameter()) // 10

=> 12장 함수 22장 this 학습 후 추가 정리 예정

프로퍼티 접근

• 접근 방법
  1. 마침표 표기법
  2. 대괄호 표기법

const person = {
  name : "Lee"
}
// 마침표 표기법
console.log(person.name) // Lee
// 대괄호 표기법
console.log(person['name']) // Lee

• 대괄호 표기법을 사용시 주의
  • 프로퍼티 키를 따옴표 연산자 로 감싼 문자열 이어야함.
  • 문자열로 바꾸지 않으면 식별자로 인식하기 때문에 ReferenceError 발생함.

case 1 - 존재하지 않은 프로퍼티에 접근하면 무엇을 반환할까?

const person = {
  name : 'lee'
}
console.log(person.age) // undefined

• 에러가 발생하지 않고 undefined가 반환됨.

case 2 - 식별자 네이밍 규칙을 지키지 않은 프로퍼티 호출하려면?

const person = {
  'last-name' : 'kim',
  1 : 5
};

person.'last-name' // SyntaxError : Unexpected string
person.last-name // 브라우저 환경 : NaN, Node.js 환경 : ReferenceError

person.[last-name] // ReferenceError
person.['last-name'] // lee

person.1 ; // SyntaxError : Unexpected number
person.'1' // SyntaxError : Unexpected string
person[1] // 5 
person['1'] // 5

person.last-name

• 브라우저 환경 : NaN
  • person.last 먼저 평가 => lase라는 프로퍼티 없음 => undefined
    undefined-name 평가 => name 식별자 찾음 =>
    name 전역 변수(전역 객체 window의 프로퍼티)가 암묵적으로 존재하고 기본값이 빈 문자열임 => undefined-'' => NaN
• Node.js 환경 : ReferenceError
  • person.last 먼저 평가 => lase라는 프로퍼티 없음 => undefined => undefined-name 평가 => name 식별자 없음 => ReferenceError

---

프로퍼티 값 갱신

const 과자 = {
  name : '새우깡'
};

과자.name = "빼빼로" // 프로퍼티 값 갱신
console.log(과자) // {name : "빼뺴로"}

• 과자 객체에 name 프로퍼티(새우깡)가 존재하므로 다른 값(빼빼로)을 할당하면 값이 갱신됨.

프로퍼티 동적 생성

//(과자 객체엔 price 프로퍼티 없음)
const 과자 = {
  name : '새우깡'
};

과자.price = 2000 // 프로퍼티 생성 
cosnole.log(과자) // {name : "새우깡", price : 2000}

• 존재하지 않은 프로퍼티에 값을 할당하면
• 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당됨.

프로퍼티 삭제

const 과자 = {
  name : "새우깡"
}
// 프로퍼티 값 생성
과자.price = 2000
console.log(과자) // {name : "새우깡", price : 2000}

delete 과자.price; // 프로퍼티 삭제
console.log(과자) // {name : "새우깡"}

delete 과자.flavor; // 프로퍼티 삭제
console.log(과자) // {name : "새우깡"}

• delete 연산자로 프로퍼티 삭제
• 존재하지 않는 프로퍼티 삭제하면 에러없이 무시함.

---

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

프로퍼티 축약 표현

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

• ES6부터 변수 이름과 프로퍼티 키가 동일하면 생략 가능
• 프로퍼티 키가 변수 이름으로 자동 생성

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

  계산된 프로퍼티 이름
• 프로퍼티 키를 동적으로 생성하기 위해서
• ES5에선 객체 리터럴 외부에 대괄호 표기하여 사용함 => 계산된 프로퍼티 이름

  const prefix  = 'prop';
  let i = 0;
  let obj = {};
  
  obj[prefix + '-' + ++i] = i
  obj[prefix + '-' + ++i] = i
  obj[prefix + '-' + ++i] = i
  
  console.log(obj) // {prop-1: 1, prop-1: 2, prop-3: 3}

 

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

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

let obj = {
obj[prefix + '-' + ++i] = i
obj[prefix + '-' + ++i] = i
obj[prefix + '-' + ++i] = i
}
console.log(obj) // {prop-1: 1, prop-1: 2, prop-3: 3}

메서드 축약표현

// ES5
const person = {
  name : 'lee',
  sayHello : function () { // 프로퍼티 값으로 함수를 할당함
    console.log(`Hello! ${name}`);
  }
};

//ES6
const person = {
  name : 'lee',
  sayHello () { // 생략 표현
    console.log(`Hello! ${name}`);
  }
};

---

[모던 자바스크립트 Deep Dive, ⌜이웅모 ⌟, 위키북스, 20210103]를 읽고 정리한 글입니다.