[JavaScript] 객체

- 객체 생성 방법

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

주로 객체리터럴 방법을 사용한다.

 

- 리터럴과 프로퍼티

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

콜론: 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 '이름'혹은 '식별자'라고 부른다. 

 

// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30

// 불린형 프로퍼티 추가
user.isAdmin = true;

// 프로퍼티 삭제
delete user.age;

- 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어준다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

* 상수 객체는 수정될 수 있다. *

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

: const는 user의 값을 고정하지만, 내용은 고정하지 않는다. 위와 같은 코드를 정상적으로 작동 하고, const user = ... 이런 식으로 전체적으로 수정 할 때 오류가 발생한다.

 

- 대괄호 표기법

: 여러 단어를 조합해 만든 프로퍼티 키는 점 표기법으로 프로퍼티 값을 읽을 수 없다.

// 문법 에러가 발생합니다.
user.likes birds = true

// 대괄호를 사용하여 프로퍼티에 접근

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

- 계산된 프로퍼티

: 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부른다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

위 예시에서 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.

사용자가 프롬프트 대화상자에 apple를 입력했다면 bag엔 {apple: 5}가 할당되었을거다.

아래 코드는 위 코드와 동일하게 동작하는데, 더 깔끔해 보인다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

아래 코드와 같이 대괄호 안에는 복잡한 표현식이 올 수도 있다.

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

 

- 단축 프로퍼티

: 실무에서는 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있다.

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ...등등
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

위 예시들은 프로퍼티 이름과 값이 변수의 이름과 동일하다. 이런 경우에는 프로퍼티 값 단축 구문을 사용하여 코드를 줄일 수 있다.

name:name 대신 name만 적어도 프로퍼티 설정이 가능하다.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    // ...
  };
}

// 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능하다.
let user = {
  name,  // name: name 과 같음
  age: 30
};

 

- 프로퍼티 이름의 제약사항

: 변수 이름(키)엔 'for' 'let' 'return'같은 예약어를 사용하면 안되지만, 객체 프로퍼티엔 이런 제약이 없다.

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환 된다.

키에 숫자 0을 넣으면 문자열"0" 으로 자동 변환된다.

let obj = {
  0: "test" // "0": "test"와 동일합니다.
};

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj["0"] ); // test
alert( obj[0] ); // test (동일한 프로퍼티)

 

- in 연산자로 프로퍼티 존재 여부 확인하기

: 자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것 입니다. 이런 특징을 응용하여 프로퍼티 존재 여부를 쉽게 확인할 수 있다.

let user = {};

alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.

이렇게 undefined와 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

문법 :

"key" in object

예시 :

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

in 왼쪽엔 프로퍼티 이름이 와야한다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다.

 

- for in 반복문

: for...in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.

문법 :

for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

아래 코드를 실행하면 객체 user의 모든 프로퍼티가 출력된다.

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

변수명은 key말고도 다른 변수명을 사용해도 된다.