[240216] 10장 객체 리터럴

10장 객체리터럴 학습

객체란?

• 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다.

• 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체

• 원시 타입은 단 하나의 값만 나타내지만, 객체 타입은 다양한 타입의 값을 하나 단위로 구성한 복합적인 자료구조다.

• 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. (추후 11장에서 볼 예정)

• 객체는 0개 이상의 프로퍼티로 구성된 집합

• 프로퍼티는 key value 구성

• JS에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
• JS의 함수는 일급 객체이므로 값으로 취급 가능
• 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 “메서드” 라고 부른다.

var counter = {
num: 0, // 프로퍼티
increase: function () { this.num++ } // 메서드

프로퍼티 : 객체의 상태를 나타내는 값 (data)

메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

• JS에서는 함수로 객체를 생성하기도하고, 함수가 객체이기도 하다. 분리해서 생각할 수 없는 개념임

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

• C++ 자바 같은 클래스 객체지향언어는 클래스를 통해 인스턴스 생성
• 자바스크립트는 프로토타입 기반 객체지향 언어, 다양한 객체 생성 방법 지원함
  • 객체 리터럴
    • {}
    • 코드블록 의미하지 않는다. (세미콜론 O )
  • Object 생성자 함수
  • 생성자 함수
  • Object.crate 메서드
  • 클래스 (ES6)

프로퍼티

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

• 식별자 네이밍 규칙을 준수하지 않으면 ‘ ‘ , “” 로 묶어야한다.

• 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능

var obj = {}
var key = "hello"

// ES5 : 프로퍼티 키 동적 생성
obj[key] = "world"

// ES6 : 개선된 프로퍼티 이름
// var obj = { [key] : 'world' };

console.log(obj)

• 빈 문자열 사용해도 에러 안남, 키로서의 의미가 없어서 권장X
• 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. (숫자 → 문자)
• 이미 존재하는 키를 선언하면 덮어쓴다.

메서드

• 함수는 객체(일급 객체)다. 함수는 값 취급을 할 수 있으므로 프로퍼티 값으로 사용할 수 있다.
• 메서드는 객체에 묶여 있는 함수 의미

프로퍼티 접근

• 마침표 표기법
• 대괄호 표기법
• 식별자 네이밍 규칙을 준수하는 이름이면 둘 다 사용 가능
  • 아니면 대괄호 표기법 써야함
• 대괄호로 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야한다.
  • 따옴표로 감싸지 않으면 프로퍼티 식별자로 해석함
  • 프로퍼티가 숫자로 이뤄진 문자열은 따옴표 생략 가능

var person = {
  name: "Lee",
}

console.log(perosn[name]) // ReferenceError : name is not defined
// name 을 찾지 못했기때문

person.'last-name'; // SyntaxError
person.last-name;
// 브라우저 환경 : NaN
// Node.js 환경 : ReferenceError : name is not defined

프로퍼티 값 갱신

var person = {
  name: "Lee",
}

person.name = "Kim"

프로퍼티 동적 생성

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

프로퍼티 삭제

• delete 연산자
• delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야함, 존재하지 않으면 에러 없이 무시됨

delete person.age
delete person.address

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

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

let x = 1,
  y = 2

const obj = { x, y }

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

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

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

• 메서드 축약 표현 , function 키워드를 생략한 축약 표현을 사용할 수 있다.

const obj = {
  name: "Lee",
  sayHi() {
    console.log("Hi!" + this.name)
  },
}

obj.sayHi()