[공부 필기] JavaScript 문법 공부 19일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/object

객체

 

✅ 프로퍼티 이름의 제약사항

- 객체 프로퍼티 키(프로퍼티 이름)은 제약사항이 없다.

"use strict";

let obj = {
  true: "a",
  0: "b",
};

console.log(obj["true"]); // a
console.log(obj[true]); // a

console.log(obj["0"]); // b
console.log(obj[0]); // b (숫자 0은 문자열 0으로 자동변환된다

※ 특별한 이름 : __proto__

    - 프로퍼티 키에 쓸 수 있는 특별한 이름이다.

    - 이를 이해하려면 프로토타입 상속, 프로토타입 메서드를 이해해야 한다고 함..

    - __proto__는 숫자를 할당해도 숫자가 무시되고, 객체가 된다.

"use strict";

let user = {
  __proto__: 3,
};

console.log(user["__proto__"]);
console.log(user.__proto__);

결과

 

✅ 'in' 연산자

- 존재하지 않는 프로퍼티에 접근하려고 하면...? 에러 발생 X , undefined 반환 O

- 이 특징을 이용해서 프로퍼티 존재 여부를 확인할 수 있다.

   » 방법1 : 

"use strict";

let user = {
  name: "soySauce",
};

console.log(user.age); // undefined

- 이 외에도 in 연산자를 이용할 수 있다.

   » 방법2 : in 연산자

"use strict";

let user = {
  name: "soySauce",
};

console.log("name" in user); // true
console.log("age" in user); // false

- 위의 코드에서 in 연산자를 사용할 때 프로퍼티 이름을 따옴표로 감싸지 않으면

   엉뚱한 변수(!)가 조사 대상이 된다.

 

- 일반적으로 [방법1]로 프로퍼티 존재 여부를 확인해도 잘 작동하지만,

   가끔은 실패하는 순간도 있다고 한다. (프로퍼티 값 자체에 undefined이 들어갈 때 등)

   그래서 in 연산자가 필요한 것이다.

   » 다만 프로퍼티 값이 undefined인 경우는 흔치 않다고 한다.

 

 

✅ for...in 반복문

- 모든 프로퍼티 키를 순회할 수 있다.

"use strict";

let owner = {
  name: "soySauce",
  age: 1,
  city: "Seoul",
  gender: "unknown",
};

// (key) in (object) : object의 해당 key가 있는지 확인
console.log("name" in owner); 

// for (key in object) : object의 각 key를 순회하며 중괄호의 내용 실행 
for (let key in owner) {
  console.log(key + " : " + owner[key]);
}

- 반복 변수명은 반드시 key여야 할 필요는 없다.

 

✅ 프로퍼티엔 순서가 있을까?

- 있다

- 보통 객체는 특별한 방식으로 정렬된다.

   » 정수 프로퍼티 키(프로퍼티 이름)은 자동으로 정렬되고

   » 그 외 프로퍼티 키는 추가한 순서 그대로 정렬된다.

"use strict";

let owner = {
  "10": "soySauce",
  2: 1,
  "interest": true,
  "7": "Seoul",
  "aaa": 10,
  4: "unknown",
  
};

for (let key in owner) {
  console.log(key + " : " + owner[key]);
}

/* 실행결과
2 : 1
4 : unknown
7 : Seoul
10 : soySauce
interest : true
aaa : 10
*/

 

✅ 정수 프로퍼티

- 정수 프로퍼티? 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미한다.

- 문자열 "49"가 있다고 가정하자

   » 이 값을 Number("49");로 정수로 변환해도 49이다.

   » 그 변환된 정수를 다시 문자열로 변환해도 "49"이다.

   » 이런 문자열을 [정수 프로퍼티]라고 한다.

- 하지만, "+49"나 "1.2"는 정수 프로퍼티가 아니라고 한다.

   » 문자열 "+49"를 정수로 변환하면 49가 되고

   » 문자열 "1.2"를 정수로 변환하면 1이 되기 때문에

   » 기존의 문자열과 달라서 정수 프로퍼티가 아니라고 한다.

 

- 따라서, "+1" 등은 정수 프로퍼티처럼 정렬되지 않는다.

"use strict";

let owner = {
  "10": "soySauce",
  2: 1,
  4: "unknown",
  "+1": "aaa",
  "0.5": true,
  
};

for (let key in owner) {
  console.log(key + " : " + owner[key]);
}

/* 실행결과
2 : 1
4 : unknown
10 : soySauce
+1 : aaa
0.5 : true
*/

- 만약 자동 정렬이 되지 않게 하고 싶다면, 정수로 취급되지 않도록 속임수를 쓰면 된다.

   » "+" 부호 붙이기 등

 

※ 참고자료1. Array, Data 등은 객체형에 속한다.

 

 

※ noSuchProperty

모던 자바스크립트 글을 읽다보면 noSuchProperty라는 것을 코드에서 보게 된다.

let user = {};

alert( user.noSuchProperty === undefined );

// 출처 : 모던 자바스크립트(https://ko.javascript.info/object)

이게 도대체 뭔가 싶어서 찾아봤다.

그런데 찾아도 나오지를 않는다..

 

이건 아마 자바스크립트가 갖고 있는 기본적인 속성이 아니라

그냥 "No such property(그런 프로퍼티 없음)"을 얘기하고 싶었던 것이 아닐까 싶다.

 

즉, 이런 상황인 것 같다.

let user = {};

console.log(user.age === undefined);

여기에서 user.age === undefined 라는 코드는 user라는 객체에 age라는 프로퍼티 키가 없기 때문에 true를 출력하게 될 것이다.

(정확하게는 user라는 객체에 age라는 프로퍼티 키의 프로퍼티 값이 없기 때문에)

 

user라는 객체에 age 라는 프로퍼티 키가 있는지를 확인하는 것처럼

위의 코드도 user라는 객체에 "noSuchProperty"라는 프로퍼티 키가 있는지 확인하는 코드였던 것 같다.