자바스크립트 객체

const user = {
  name: "John"
};

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

alert(user.name); // Pete​

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

객체

자바스크립트에는 여덟가지 자료형이 있다. 이주 일곱개는 오직 하나의 데이터(문자열,숫자 등)만 담을수 있어

'원시형' 이라고 부른다.

 

객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합니다 복잡한 개체를 저장할 수 있다.

 

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

 

 

리터럴과 프로퍼티

중괄호{...} 안에는 '키:값' 쌍으로 구성된 프로퍼티가 들어감

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

 '콜론(:)' 을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치합니다.

 

프로퍼티 값에는 모든 자료형이 올수 있다.

 

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

 

 

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

const로 선언된 객체는 수정이 가능하다.

const user = {
  name: "John"
};

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

alert(user.name); // Pete

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 = '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

 

 

프로퍼티 이름의 제약사항

변수 이름에는 'for','let','return'같은 예약으를 사용하면 안되지만 

객체 프로퍼티에는 이런 제약이 없다.

 

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

자바스크립트 객체의 중요한 특징 중 하나는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고

'undefuned'를 반환한다.

 

연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

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

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

 

 

for...in 반복문

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

 

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


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

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

 

 

 

객체 정렬 방식

 

객체는 특별한 방식으로 정렬된다. 정수 프로퍼티는 자동으로 정렬되고

그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.

 

정수 프로퍼티

문자열 "49"는 정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없기 때문에 정수 프로퍼티입니다. 하지만 '+49’와 '1.2’는 정수 프로퍼티가 아니다.

 

 

 

 

출처 : ko.javascript.info/object