모던 JavaScript 튜토리얼 파트 1 :: 5장 "자료구조와 자료형" 정리

모던 JavaScript 튜토리얼 5장을 읽으면서 정리하는 글입니다. 

5장 자료구조와 자료형

1. 원시값의 메서드

 

원시값의 메서드

 

ko.javascript.info

원시값과 객체는 다릅니다.

원시값은 Property가 없습니다. 하지만 편하게 객체처럼 속성을 호출할 수 있습니다.

속성이 필요한 경우 원시값이 Wrapper를 통해 일시적으로 객체로 변하기 때문입니다.
잠시 메서드를 제공하기 위해 만들어진 원시 래퍼 객체(object wrapper)는 일시적입니다. 

이를 Auto Boxing이라고 부릅니다.

객체는 여러 속성을 정의할 수 있습니다.

자바스크립트에서는 함수도 객체입니다.

// 원시 객체를 직접 만드는 법
if (new Number(0)) { // 객체이므로, true
  console.log("zero!")
}
 
// new가 없으면 원시값으로 반환된다
if (Number("0")) { // 원시형인 숫자 0
  console.log("zero!")
}

null/undefined는 메서드가 없으므로 원시 객체도 없습니다.

2. 숫자형

 

숫자형

 

ko.javascript.info

모던 자바스크립트는 두 가지 숫자형을 지원합니다.

1. 일반적인 숫자
   • 배정밀도 부동소수점 숫자(double precision floating point number)
   • 64비트 형식의 IEEE-754
2. BigInt
   • json은 bigint를 지원하지 않으니 주의해야 합니다.

Base는 toString함수를 이용해서 편하게 바꿔서 볼 수 있습니다.

let num = 3;
console.log(num.toString(2)); // 11

Math.floor, Math.ceil, Math.trunc, Math.round, num.toFixed(precision) 함수로 어림 소수를 구할 수 있습니다.

숫자만 추출하기 위해 나온 방법 parseInt, parseFloat

console.log(+" 100  "); // 100
console.log(+"100px"); // NaN
console.log(parseInt('100px')); // 100
console.log(parseInt('a100')); // NaN

보통 뒤에 부호가 많이 붙는데 이 함수를 이용하면 편하게 약한 형변환을 할 수 있습니다.

3. 문자열

 

문자열

 

ko.javascript.info

문자열도 순회 가능!

부분 문자열을 얻으려면 slice나 substring을 사용합니다. (substring은 start가 end보다 커도 됩니다)

사용 빈도가 낮은 기호는 surrogate pair(2바이트 글자들의 쌍)을 사용해 인코딩합니다.

4. 배열

 

배열

 

ko.javascript.info

익숙한 내용이라서 skip

다만 이 책에서는 new Array는 지양하라고 합니다.

new Array(number)을 호출하면 길이가 number인 배열이 만들어지는데 알고리즘 문제를 풀 때 사용하면 편합니다!

5. 배열과 메서드

 

배열과 메서드

 

ko.javascript.info

이 부분도 파이썬을 쓰며 익숙한 부분이라서 대부분 skip합니다.

고차함수에 this를 넘겨줄 수 있습니다. 

const ageHelper = {
  isEven(n) {
  	return n%2 == 0;
  },
  isEvenAge(user) {
    return this.isEven(user.age);
  }
};
 
const users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];
 
const evenList = users.filter(ageHelper.isEvenAge, ageHelper);
console.log(evenList);

6. iterable 객체

 

iterable 객체

 

ko.javascript.info

반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체입니다. 

어떤 객체를 이터러블로 만드려면 객체에 Symbol.iterator(특수 내장 심볼)라는 메서드를 추가해서 인터페이스를 만족시켜야 합니다.

for ... of가 제일 처음 시작될 때 Symbol.iterator를 호출하게 됩니다. 이때 Symbol.iterator는 반드시 이터레이터(iterator, 메서드 next가 있는 객체) 를 반환해야 합니다.

그리고 반환된 객체(이터레이터)만을 대상으로 순회합니다.

다음 값이 필요하면, for..of는 이터레이터의 next()메서드를 호출합니다.

next()의 반환 값은 {done: Boolean, value: any}와 같은 형태여야 하는데 done=true면 반복을 종료하고 done=false면 value에 다음 값이 저장됩니다.

책에서는 이런 이터레이터 패턴을 쓰는 것을 관심사의 분리(Separation of concern, SoC) 때문이라고 합니다. 

그리고 하스켈처럼 무한개의 이터레이터를 만들 수도 있습니다.
https://www.futurelearn.com/info/courses/functional-programming-haskell/0/steps/27237

7. 맵과 셋

 

맵과 셋

 

ko.javascript.info

어떤 분류에 따른 session id를 만들 때 써보았습니다.

8. 위크맵과 위크셋

 

위크맵과 위크셋

 

ko.javascript.info

skip

9. Object.keys, values, entries

 

Object.keys, values, entries

 

ko.javascript.info

skip

10. 구조 분해 할당

 

구조 분해 할당

 

ko.javascript.info

skip

11. Date 객체와 날짜

 

Date 객체와 날짜

 

ko.javascript.info

문자열로 뽑아낼 때의 형식

YYYY-MM-DDTHH:mm:ss.sssZ

12. JSON과 메서드

 

JSON과 메서드

 

ko.javascript.info

순환참조를 조심해야 합니다.

출처

• https://www.flaticon.com/free-icons/coding