JS. 객체 간단소개와 궁금했는데 못 찾았던 것들!

객체

객체는 중괄호{...}를 이용해 만들 수 있습니다. 중괄호 안에는 'key' : 'value' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데, 키엔 문자형, 벨류엔 모든 자료형이 허용됩니다.

예시로 서랍장을 설명하는데 복잡한 서랍장안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가 삭제도 마찬가지.

중괄호 {..}를 이용해 객체를 선언하는 것을 '객체 리터럴' 이라고 부릅니다. 객체 선언할 때는 주로 이 방법을 많이 사용하죠

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

 

매달리는 쉼표 (trailing, hanging)

 

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

알고리즘과 강의를 들으면서 왜 끝에 쉼표를 붙이지 했는데 이유가 여기 나와있었다.. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가,삭제,이동하는게 쉬워지기 때문!,.  쓰는게 컴퓨터상 좋다.

 

 

단축  프로퍼티

리덕스 함수에서도 볼 수 있었던 건데 같은 키,벨류가 같다면 그 같은 값을 한 번만 쓰면 된다.

 

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

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let user = {
  name,  // name: name 과 같음
  age: 30
};

 

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

여기서 undefined랑 비교해도 충분한데 왜 in 연산자가 있는거지? 라는 의문이 들 수 있는데

대부분의 경우, 일치 연산자를 사용해서 프로퍼티 존재 여부를 알아내는 방법(" === undefined" ) 은 꽤 잘 동작합니다. 그런데 가끔은 이 방법이 실패하고 이럴 때 in을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있습니다.

 

let obj = {
  test: undefined
};

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

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

 

객체 정렬 방식

 

근데 객체를 보면 프로퍼티엔 순서가 있을까?? 생각하지만 당연히 있다면 순서는 들어간 값 순서 아닐까? 그리고 매번 알고리즘을 할때는 항상 정렬을 해줘야 그런지 자동 정렬은 전혀 없다고 생각했다.

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

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

 

근데 아니었다. 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다. 

 

정수프로퍼티는??

// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환합니다.
alert( String(Math.trunc(Number("49"))) ); // '49'가 출력됩니다. 기존에 입력한 값과 같으므로 정수 프로퍼티입니다.
alert( String(Math.trunc(Number("+49"))) ); // '49'가 출력됩니다. 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티가 아닙니다.
alert( String(Math.trunc(Number("1.2"))) ); // '1'이 출력됩니다. 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티가 아닙니다.

 

 

여기서 더 충격적인 + 기능

 

 

나라 번호가 정수로 취급되지 않도록 속임수를 쓸 수 있는데, 각 나라 번호 앞에 "+"를 붙여준다.

그러면 원하는대로 독일 나라 번호가 가장 먼저 출력되는 것을 확인할 수 있습니다.

추가된 순서대로 나온다!! 정수 자동정렬 안시킬려면 이걸로 딱!

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

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

 

 

proto??

이와같이 객체 프로퍼티 키에 쓸 수 있는 문자열엔 제약이 없지만,

역사적인 이유 때문에 특별 대우를 받는 이름이 하나 있습니다. 바로, __proto__입니다.

let obj = {};
obj.__proto__ = 5; // 숫자를 할당합니다.
alert(obj.__proto__); // [object Object] - 숫자를 할당했지만 값은 객체가 되었습니다. 의도한대로 동작하지 않네요.

 

원시값 5를 할당했는데 무시된 것을 확인할 수 있습니다.

__proto__의 본질은 프로토타입 상속에서, 이 문제를 어떻게 해결할 수 있을지에 대해선 프로토타입 메서드와 __proto__가 없는 객체에서 자세히 다룰 예정입니다.

 

 

 

 

https://ko.javascript.info/object

객체