post-custom-banner

키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장
객체는 중괄호 {…}를 이용해 만듦
괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용

객체 생성방법

let user = new Object(); // '객체 생성자' 문법
let user = {      // '객체 리터럴' 문법
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};
중괄호 {...}를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라 부름

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.

delete user.age;

상수 객체는 수정될 수 있습니다.

대괄호 표기법
let user = {};

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

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

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

계산된 프로퍼티

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

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

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

alert( bag.apple ); // fruit에 "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 와 같음
    // ...
  };
}

자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다는 것입니다.

let user = {};

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

in 연산자 사용

let user = { age: 30 };

let key = "age";
alert( key in user );
// true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다.

in 연산자 사용 이유

let obj = {
  test: undefined
};

alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.

alert( "test" in obj ); // `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).

for in 으로 객체의 모든 프로퍼티 조사

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

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

객체의 정렬방식

정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

정수 프로퍼티

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

문자열 프로퍼티

let codes = {
  "+49": "독일",
  "+41": "스위스",
  "+44": "영국",
  // ..,
  "+1": "미국"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}

https://ko.javascript.info/object

profile
개발!
post-custom-banner

0개의 댓글