자바스크립트 기초(객체)

1. 객체(Object)란?

- JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.

 

- 객체는 중괄호 {…}를 이용해 만들 수 있다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키에는 문자형, 값에는 모든 자료형이 허용된다.

 

- 서랍장을 생각하면 객체를 이해하기 쉽다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어있는 이름표는 객체의 키라고 생각하면 된다. 복잡한 서랍장 안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에서는 키를 이용해 프로퍼티를 쉽게 찾을 수 있다. 추가나 삭제도 마찬가지이다.

 

 

2. 객체 구문

var user = new Object(); // "object constructor" syntax (객체 생성자 방식)
var user = {};  	// "object literal" syntax (객체 리터럴 방식)

ex)

• 이름 : Surim Son
• 나이 : 22

Key : '이름', '나이'
Value : 'Surim son', 22

 

3. 계산된 프로퍼티(Computed Property)

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

 

ex)

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

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

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

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

사용자가 프롬프트 대화상자에 apple을 입력했다면 bag엔 {apple: 5}가 할당될 것이다.

 

4. 단축된 프로퍼티(Property Value Shorthand)

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

 

ex)

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

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

위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일한 것을 볼 수 있다. 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔한데, 프로퍼티 값 단축 구문(property value shorthand)을 사용하면 코드를 간결하게 할 수 있다.

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

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

 

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

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

 

기본 문법

"key" in object

 

ex)

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

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

 

for ~ in 반복문

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

 

ex)

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
}