객체

{} 중괄호를 통해서 객체를 생성하는것을 객체 리터럴 (Object literal) 이라고 한다.

다른 언어와의 차이라고하면 class 를통해서 객체를 생성하는 것이아니라, 리터럴로 쓸 수있다는게 편했던 경험이 있다.

 

프로퍼티를 읽는데는 두가지 방법이있다.

1. 점 표기법 (dot notation)

2. 대괄호 표기법 (square bracket notation)

 

점 표기법은 유효한 변수 식별자일 때만 가능하다.

유효한 변수라는 것은 숫자로시작하지않고, $, _ 를 제외한 특수문자가없는 문자열을 의미한다(변수명명 조건)

대괄호 표기법으로만 접근해야하는 경우는 프로퍼티 명에 공백이 있을경우 이다.

참고로 객체의 키는 string 과 symbol 만 가능하다.

symbol은 간단히말하면 고유한 식별자로써 사용할 수 있다.

let user = {};

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

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

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

또 대괄호 표기법에 변수를 넣으면 런타임에 동적으로 반영 할 수도 있다.

 

반면 점표기법은 불가능하다.

const major = prompt("message");

console.log(user.major);

이미 user.major라는 key를 가르키고 있기 때문이다.

Computed property

객체의 프로퍼티를 [] 로 감싸서 변수로 지정하면, 프로퍼티 키를 동적으로 생성할 수 있다. (잘쓰이진 않는다)

const major = prompt("message");
let user = {
  [major]: "kong",
};

console.log(user); // {nannana: 'kong'}

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

const obj = {
  name: "kong",
  age: 25,
};

console.log("name" in obj); // true
console.log(obj.major); // undefined

객체의 프로퍼티가 존재하는지 여부는 in 연산자로 불린형으로 확인할 수 있고,

자바스크립트의 객체의 중요한 특징 중 하나는 없는 프로퍼티를 접근해도 에러가 아닌 undefined를 반환한다.

 

그러면 그냥 객체.key === undefined 인지 확인하면 되지 않을까? 라고생각했지만

목적이 정말 key의 존재여부를 판단하는 것이라면 아래와같은 경우가 있을 수 있다.

let obj = {
  test: undefined
};

alert( obj.test ); // 값이 `undefined`

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

test라는 값은 undefined인데, 의도와는다르게 test키 자체가 없다는 반환값과 같기 때문에, 정확하게 프로퍼티의 유무를 판별 할 수 없다.

 

for.. in

객체는 interable 하지 않기때문에 반복문을 돌릴 수 없다.

하지만 for.. in 반복문을 사용하면 객체의 key 를 순회할 수 있다.

const obj = {
  name: "kong",
  age: 25,
};

for (let key in obj) {
  console.log(key);
}

이외에도 객체의 프로퍼티, 혹은 value를 iterable 한 객체로 만들어주는 메서드를 사용해서 순회하는 방법이 있다.

for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

for (let key of Object.values(obj)) {
  console.log(key);
}


for (let key of Object.keys(obj)) {
  console.log(key);
}

객체를 프로퍼티 정렬방식

정수프로퍼티는 자동으로 오름차순으로 정렬되고 나머지는, 프로퍼티가 추가된 순으로 정렬된다.

정수 프로퍼티란 문자열 과 숫자간 형변환을 해도 그대로인 값을 말한다.

예를들어 "23"은 정수 프로퍼티이고, "23.2"는 아니다. "23.2" 는 Number("23.2")의 결과가 23 으로 변하기 때문이다.

 

자바스크립트에는 다양한 종류의 객체가있다.

Array, Date, Error 등 typeof 의 결과는 모두 object이다.

독립적인 자료형이 아니라, 객체에 다양한 기능을 넣은 확장된 객체이다.

 

프로그래밍에 마법은 없다고 한말을 들은적이있다.

가끔씩 기괴한 구조의 코드를 보면 이해가 안되지만, 다시금 살펴보니 정말 마법은 없었다.

모르고 사용했던것들이 많았음을 깨닫고, 더 재밌어지고 있는거같다