자바스크립트: 객체의 기본

 

객체의 기본

 

- 자바스크립트의 8가지 자료형은 '객체형' (객체)와 '원시형primitive type' (나머지 7)로 구분할 수 있다. 원시형은 한 가지 데이터 타입만, 객체형은 다양한 데이터 타입을 저장할 수 있다.

 

- 객체 문법: { 키Key: 값Value, 키2: 값2 } // 여기서 키: 값의 한 쌍이 프로퍼티Property. 키 (또는 프로퍼티 이름이나 식별자)에는 문자형만 허용되지만 값에는 제한 없음.

 

- 객체 생성법: 1) '객체 생성자' 문법  2) '객체 리터럴' 문법

 

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

- 프로퍼티 접근: 점 표기법(dot notation)을 사용하여 프로퍼티 값만 호출 또는 특정 프로퍼티를 삭제할 수 있다 => 객체이름.프로퍼티 이름 (ex. alert ( user.name );

 

- const 는 객체는 고정하지만 그 내부 프로퍼티는 고정하지 않는다. 

 

 

표기법

 

- 키에 두 가지 이상의 단어가 들어갈 경우 " " 로 묶어줘야 한다.

 

- 마지막 프로퍼티도 다른 프로퍼티 처럼 쉼표(trailing comma, hanging comma)로 끝낼 수 있어서 순서에 유의하지 않아도 된다.

 

- 프로퍼티 키에 복수의 단어가 있을 경우, 점 표기법을 사용해 접근할 수 없으므로 대괄호 표기법 Square bracket notation을 사용한다.

 

이 때, $와 _를 제외한 특수문자가 없어야 하며 문자열을 따옴표로 묶는다. 

let user = {};

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

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

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

let key = "likes birds";

// user["likes birds"] = true; 와 같습니다.
user[key] = true;

//변수를 동적으로 구성하는 경우
let user = {
	name: "John",
};

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
alert ( user[key] ); // 프롬프트 창에 어떤 이름을 치냐에 따라 달라진다.

변수 안에 할당하여 호출할 수도 있다. 이 때의 변수는 런타임에 평가되어 동적으로 값이 구성된다. (점 표기법은 불가능!)

 

• 계산된 프로퍼티

- 대괄호로 둘러싸인 프로퍼티 키를 계산된 프로퍼티 Computed property라고 부르며, 동적으로 구성될 수 있다.

 

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

이런 식으로 동적으로 구성되며, 동적인 파트 + 정적인 문자열을 추가할 수도 있다!

 

 

 

• 프로퍼티 값 단축 구문 Property Value Shorthand

프로퍼티의 키와 값이 동일할 경우, ES6에서는 프로퍼티 값 단축 구문을 통하여 축약할 수 있다.

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

 

• 프로퍼티 이름

프로퍼티 이름엔 특별한 제약이 없다. (for, let, return과 같은 키워드도 사용 가능하며 숫자를 넣어도 문자열로 자동변환된다.)

__proto__라는 예외가 있긴 하지만 나중에 알아보자!

 

 

• in 연산자

존재하지 않는 프로퍼티를 호출해도 에러 대신 undefined가 반환된다. 그러나 애초에 특정 프로퍼티의 값이 undefined인 경우가 있으므로, 프로퍼티의 존재 여부를 확실하게 확인하고 싶을 때는 in 연산자를 확인한다.

 

"키 이름" in 객체이름 형식으로 특정 프로퍼티 존재 여부를 확인할 수 있다. (true 아니면 false가 출력된다.) 

"키 이름"을 특정 변수에 할당하여 변수 in 객체이름 형식으로 확인할 수도 있다.

 

 

• for in 반복문

for (key in object) { } 형태로, 객체의 모든 키를 순회하여 호출할 수 있다.

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

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // values for the keys
  alert( user[key] ); // John, 30, true
}

상기와 같이 반복변수(looping variable)를 선언하여 객체의 모든 키를 순회하여 대입할 수 있다. (스코프를 for문 안으로 한정짓기 위하여 let 사용을 권장한다.)

값을 호출하고 싶을 경우 대괄호 표기법을 사용한다. 

 

이 때, 정수 프로퍼티는 자동으로 오름차순으로 정렬되며 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다. (모든 프로퍼티를 추가한 순으로 정렬하고 싶으면 정수 앞에 +을 붙이도록 한다.)