[JS문법]객체(Object)란?

JavaScript는 객체 기반의 프로그래밍 언어이며, JavaScript를 구성하는 거의 "모든 것"이 객체다.

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

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다.

 

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

 

 

JavaScript에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.

JavaScript의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 사용할 수 있다.

프로퍼티 값이 함수일 경우를 메서드(method)라 부른다.

 

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

메서드: 프로퍼티(state data)를 참조하고 조작할 수 있는 동작

 

위처럼 객체는 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있어 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

 

JavaScript에서 객체를 생성하는 방법

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

가장 일반적이고 간단한 방법은 객체 리터럴({...})방식이다.

객체 리터럴은 값으로 평가되는 표현식이기에 중괄호 뒤에 세미콜론을 붙여준다.

 

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

프로퍼티 값: JS에서 사용할 수 있는 모든 값

 

key는 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.

하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다. 단, 네이밍 규칙을 준수하는 프로퍼티 키와 그렇지 않은 프로퍼티 키는 미묘한 차이가 있다.

네이밍 규칙을 따르는 경우 따옴표를 생략할 수 있고 그렇지 않으면 반드시 따옴표를 사용해야한다.

let person = {
  firstName: 'Jeong-Min', // 식별자 네이밍 규칙을 준수한 키
  'last-name': 'Kim' // 식별자 네이밍 규칙을 준수하지 않은 키
};

last-name의 -를 연산자가 있는 표현식으로 해석하기에 따옴표로 감싸준다. 그렇지 않으면 에러가 발생한다.

 

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

이 경우에 프로퍼티 키로 사용한 표현식을 대괄호로 묶어야 한다.

let obj = {};
let key = 'hello';

// 프로퍼티 키 동적 생성
obj[key] = 'world';

console.log(obj); // {hello: "world"}

빈 문자열을 프로퍼티 키로 사용해도 에러를 발생시키진 않지만 키로서 의미를 가지지 못하기에 권장하지 않는다.

 

프로퍼티 키를 중복선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 에러는 발생하지 않는다.

let foo = {
  name: 'Min',
  name: 'Kim'
};

console.log(foo); {name: 'Kim'}

 

메서드(method)

내용이 함수면 메소드라 부르고, 데이터면 속성(property)이라고 부른다.

let circle = {
  radius: 5, // property
  
  // 원의 지름
  getDiameter: function() { // <- 메서드
    return 2 * this.radius;
  }
};

console.log(circle.getDiameter()); // 10

메서드 내부에서 사용한 this 키워드는 객체 자신(위 circle 객체)을 가리키는 참조변수다.

👉 메서드 심화

 

 

프로퍼티 접근법

• 마침표 프로퍼티 접근 연산자(.)를사용하는 마침표 표기법(dot notation)
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법(bracket notation)

프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름, 즉 JavaScript에서 유효한 이름이면 두 방법 모두 사용가능 하다.

let person = {
  name: 'Lee'
};

console.log(person.name); // Lee

console.log(person['name']) // Lee

대괄호 프로퍼티 접근 연산자 내부에 지정하는 키는 반드시 따옴표로 감싼 문자열이어야 한다.

그렇지 않으면 JS 엔진은 식별자로 해석한다. 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

키 값이 숫자로 이뤄진 경우 따옴표를 생략할 수 있다.

 

console.log(`name: ${"name" in person}`); // name: true

위 처럼 객체의 키 존재 여부를 탐색할 수 있다.

 

프로퍼티 동적 생성

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

let person = {
  name: "jeongmin"
};

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

 

프로퍼티 삭제

let person = {
  name: "jeongmin"
};
// 동적 생성
person.age = 20;

// 삭제
delete person.age;

// 존재하지 않기에 삭제할 수 없다. 에러는 발생하지 않음.
delete person.address;

console.log(person); // {name: "jeongmin"}

delete를 사용한 프로퍼티 삭제는 값에 대한 메모리 주소를 여전히 가지고 있다.

person.age = null 과 같은 방법으로 값을 삭제해주는 것이 메모리를 절약할  수 있다.

 

객체 리터럴 확장 기능(ES6)

프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성되는데 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수 있다.

let x = 1;
let y = 2;

const obj = { x, y };

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

프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때

키를 생략(property shorthand)할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

 

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다.

단, 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다.

이를 계산된 프로퍼티 이름(computed property name)이라 한다.

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

const 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}

 

메서드 축약 표현

메서드를 정의할 때 function 키워드를 생략할 수 있다.

// ES6
const obj = {
 name: "jeong",
 sayHi() {
   console.log(`Hi. ${this.name}`);
   }
};

obj.sayHi(); // Hi. jeong

ES6의 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.