객체 리터럴

김민수·2023년 10월 12일
0
post-thumbnail

1. 객체란?

객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복잡적인 자료구조다.
객체는 0개 이상의 프로퍼티로 구성된 집합이다.
프로퍼티는 으로 구성된다.

var counter = {
  num: 0,                // 프로퍼티
  inclrease: function(){ // 메서드 (일반 함수와 구분하기 위함)
  	this.num++;
  }
}

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

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


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

객체 생성 방법

  • 객체 리터럴 : 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식!
var Person = {
	name: 'kim'
}
  • Object 생성자 함수
var Person = new Object();
Person.name = "kim";
  • 생성자 함수
function Person(name) {
  this.name = name;
}
const test = new Person("kim");
  • Object.create 메서드
var Person = {
  name: 'kim'
};

var person = Object.create(Person);
person.name = 'Cat';
  • 클래스(ES6)
class Person {
  constructor(name) {
    this.name = name;
  }
}

var person = new Person('kim');

3. 프로퍼티

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

  • 식별자 네이밍 규칙을 준수하여 사용하는 것을 권장한다.
  • 동적 생성
var obj = {};
var key = 'hello';

obj[key] = 'world'          // ES5
var obj = {[key] : 'world'} // ES6
  • 중복선언시, 나중에 선언한 프로퍼티가 덮어쓴다. (에러 발생하지 않음)

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


4. 메서드

메서드 : 객체에 묶여 있는 함수

자바스크립트의 함수는 객체(일급 객체)다.
함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다.

일급객체(First Class Object)

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.


5. 프로퍼티 접근, 갱신, 동적 생성, 삭제

var person = {
	name : 'kim'
}

console.log(person.name)    // 1. 마침표 표기법에 의한 프로퍼티 접근!
console.log(person['name']) // 2. 대괄호 표기법에 의한 프로퍼티 접근!

person.name = 'Lee'         // 프로퍼티 값 갱신
person.age = 20;            // 프로퍼티 동적 생성
delete person.age;          // 프로퍼티 값 삭제

객체에 존재하지 않는 프로퍼티에 접근하면 undefined 반환한다.
ReferenceError가 발생하지 않는다.


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

프로퍼티 키 생략하기!

let x = 1, y = 2;
const obj = {x, y};

계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하기!

const text = 'prop'
let i = 0;

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

// {prop-1: 1, prop-2: 2, prop-3: 3, }

0개의 댓글