학습(구)/JavaScript(구)

자바스크립트 - 객체

잉아당 2021. 11. 2. 09:54
728x90

객체는 { } 안에 키 : 값의 형태로 이루어져 있습니다.

 

객체 생성 방법 

let obj = new Object(); //객체 생성자

let obj = { }; //객체 리터럴

 

객체 사용 방법

 

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

const를 사용할 때 user 전체의 내용은 변경할 수 없지만 내용은 변경이 가능합니다.

 

두 단어 이상의 단어로 구성된 키를 부를 경우 . 연산자를 사용해 부를 수 없고 []를 이용해 접근할 수 있습니다.

 

user["likes birds"] = true;

변수를 이용해 유동적으로 접근할 경우 []를 사용해야하며 . 연산자는 사용할 수 없습니다.

 

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

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

 

함수를 이용해 객체를 생성할 경우 다음과 같이 생략하여 간단하게 표현이 가능합니다.

 

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

자바스크립트에서는 모든 예약어를 객체의 프로퍼티 키로 사용할 수 있으며 예외적으로 __proto__는 프로퍼티 키로 사용할 경우 값이 무시되며 객체로 됩니다.

 

객체는 프로퍼티가 존재하지 않을 때 undeifined를 반환하며 이를 통해 프로퍼티의 존재 여부를 쉽게 확인할 수 있습니다. 또한 in 연산자를 통해서도 확인할 수 있습니다. 

in 연산자 왼쪽에 프로퍼티 이름을 ""로 감싸서 사용해야 하며 undefined를 저장하더라도 존재 여부를 정확하게 파악할 수 있습니다.

 

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

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

 

for ... in ... 을 사용하게 되면 객체의 프로퍼티들을 모두 순환하여 접근할 수 있습니다.

 

객체의 프로퍼티 순서는 정수 프로퍼티의 경우 자동정렬이 되며 정수 프로퍼티가 아닐 경우 작성된 순서대로 프로퍼티가 사용되게 됩니다.