[TIL] 240510 캠프 26일차 : 증식하는 공부거리

오늘의 한 마디: A를 이해하려면 B라는 개념을 이해해야하고, B를 이해하려면 C, D, E라는 단어의 뜻을 알아야하고, C, D, E를 이해하려면 어쩌구저쩌구....

오늘 배운 내용                                     

1. Object 타입의 속성 순서

객체(Object)에 존재하는 속성은 키가 어떤 이름을 가졌느냐에 따라 그 순서가 바뀔 수 있다.  아래 코드의 출력 결과가 d, b, a, e순으로 나오는 이유는 속성의 순서를 정할 때 정수 > 문자열 > 심볼순으로 우선순위가 높기 때문이다.

let obj = {
  str2 : "a",
  3 : "b",
  [Symbol("sumbol")]: "c",
  1 : "d",
  str1 : "e"
};

// Output:
// d
// b
// a
// e

 

자세한 내용은 글로 따로 정리해두었다. 아래 링크가 정리해놓은 글이다.

https://pledge24.tistory.com/202

[JavaScript] 정리 3. Object 타입의 속성 순서

2. 특이한 자바스크립트에서의 Array 2탄

자바스크립트에서 Array는 Object 타입 중 하나이기 때문에, 많은 부분에서 Object와 닮아있다. 오늘 알아낸 내용은 배열의 index를 임의로 지정이 가능하고, 모든 index는 문자열로 저장이 된다는 것이다.

 

배열의 index를 임의로 지정이 가능하다

let arr = [1, 2, 3];
arr[10] = 999;      // 배열의 기존 크기를 무시하고 임의의 index에 할당.

for(let value of arr){
  console.log(value);
}

// Output
// 1
// 2
// 3
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// 999

 

모든 index는 문자열로 저장이 된다

 

let arr = [1, 2, 3];

arr[3] = 4;			// idx = 3에 4저장
arr["3"] = 4;			// idx = "3"에 4저장

for(let idx in arr){
  console.log("idx:", arr[idx], "type is", typeof idx);
}

// Output
// idx: 1 type is string
// idx: 2 type is string
// idx: 3 type is string
// idx: 4 type is string

for in? for of? 2탄

 

for...in 반복문을 배열(Array)타입에서 사용했을 때 배열의 원소가 저장된 속성이 아닌 속성까지 순회한다는 문제점이 있다. 이런 문제점을 해결하기 위해 Object.hasOwn()을 사용하여 어느정도 해결할 수는 있지만 for...of 반복문이 훨씬 간편하고 성능도 좋기 때문에 배열의 원소를 순회하고자 할 때는 for...of 반복문이 권장된다.

오늘의 Trouble Shooting                  

- 오늘은 해결한 Trouble이 없어요!

오늘 하루는?                                       

• 처음에는 for...in 반복문과 for...of 반복문의 작동방식의 차이점만 알아가려했다. 그런데... 작동방식을 알려면 반복가능한 객체와 열거가능한 속성을 알아야했고, 반복가능한 객체를 알려면 iterator와 Symbol에 대해서 알아야 했으며, Symbol.iterator를 알려면 이터러블 프로토콜을 알아야했으며, 이터러블 프로토콜을 이해하려면 iterator메소드가 어떤 식으로 작동하는 지 알아야했으며, 곁가지로 generator라는 것도 알고 있으면 좋았으며, 이 모든걸 영어로된 문서를 번역하며 하나하나 퍼즐조각 맞추듯 해석하는 일을 하루종일 했다. 이 짓거리를 하루동안 했지만 끝끝내 정리하지 못해 글을 올리지 못했다.
• ...... 오늘 나는 뭘 한거지?