ko.javascript.info - 자료구조와 자료형

1. 원시값의 메서드

원시 값에 대해 프로퍼티 혹은 메서드에 접근하려하면 원시 래퍼 객체가 만들어지며 이를 통해 원시 값 관련 메서드나 프로퍼티를 사용할 수 있다. 이후 원시 값은 남지만 원시 래퍼 객체는 사라진다. 이를 통해 원시 값은 가볍게 유지하되, 원시 값 관련 메서드 혹은 프로퍼티엔 접근할 수 있게 되어 코드가 간결해질 수 있다.

*원시 래퍼 객체 생성자로 값을 생성하진 말자.

*형변환을 할땐 원시 래퍼 객체를 사용하자.

 

2. 숫자형

숫자 관련 유용한 메서드: Math.floor, Math.round, Math.ceil, Math.toFixed, Math.max, Math.min, Math.random, Math.pow, isNaN

알게된 사실:

1. toFixed는 문자열을 반환한다.(단항 +연산자를 앞에 붙이면 숫자형이 된다)

2. NaN === NaN은 false이다.(isNaN을 활용하는 이유)

3. Number, + 연산자는 형변환 시에 엄격하다. 예를들어 123a를 매개변수로 넘기면 NaN이 된다. 그러나 parseInt를 활용하면 123이 된다.

3. 문자열

백틱 활용: 템플릿 리터럴, 개행 문자

문자열 특정 위치에 접근하는 법: 인덱스 접근

문자열 특정 위치를 인덱스로 접근 후 할당 연산자를 하면 그 부분만 바꿀 수 있을까? => No, 그럴 수 없다.

래퍼 객체 메서드: startsWith, endsWith, includes, slice, toLowerCase, toUpperCase

문자열을 순회하는 법: for ... of

특수 문자: \와의 조합(예: \n은 개행을 의미한다.)

문자열 비교: 문자는 유니코드로 변환 시 숫자가 되며 이를 기준으로 문자열끼리의 비교가 가능하다.

 

4. 배열

순서가 있는 컬렉션이 필요한 경우 적합한 자료형(관련 메서드도 지원)

배열도 객체와 마찬가지로 값 복사 시 참조에 의한 복사를 하게 된다.

어떤 자료형도 배열에 포함될 수 있다(함수 포함): 함수 안에서 this를 활용하게 해놓고 배열 메서드 방식으로 호출한다면 this는 배열을 참조하게 된다.

 

관련 메서드:

1. push: 배열의 끝에 요소 추가, 배열의 length를 반환

2. pop: 배열의 끝에 있는 요소를 제거, 제거된 요소를 반환

3. shift: 배열의 맨 앞 요소를 제거, 제거된 요소를 반환(비싼 연산, 앞쪽으로 나머지 요소들을 옮겨야함)

4. unshift: 배열의 맨 앞에 요소를 추가, 배열의 length를 반환(비싼 연산, 추가된 요소 뒤쪽 요소들을 뒤로 옮겨야함)

5. toString: 배열에는 toString이 내부적으로 구현되어있다.

 

배열 순회 방법:

1. for 문: 고전 방식, index로 요소에 접근해야함

2. for of: 값을 순회하는 방식

3. for in: 되도록 사용하지 말것(predefined 배열에 사용할 경우 인덱스 이외의 프로퍼티까지 순회될 수 있다)

 

length 수동 조작으로 배열 구성 요소를 지울 수 있다.(예: [1,2,3].length = 1; 수행 시 [1]이 됨)

 

*배열 요소들은 인접한 메모리 공간에 저장되며 이를 통해 연산 속도는 높아진다. 하지만 배열을 순서가 있는 컬렉션처럼 다루지 않고 임의의 프로퍼티를 저장하는 식으로 다루게 된다면 배열에 적용되어있는 최적화 기법들이 제대로 동작하지 않을 수 있고 이렇게 되면 배열을 사용하는 이점이 줄어든다. 임의의 프로퍼티를 다뤄야하는 상황이 생긴다면 높은 확률로 배열보단 객체를 사용해야하는 경우이다.

 

5. 배열과 메서드

push: 배열의 끝에 요소 추가, 길이 반환(원본 변경)

pop: 배열의 끝에서 요소 반환(원본 변경)

shift: 배열의 맨앞 요소 반환(원본 변경)

unshift: 배열의 맨앞에 요소 추가, 길이 반환(원본 변경)

splice: 배열의 내용 변경(add, delete, edit 가능)(원본 변경), 삭제된 요소들 반환(없으면 빈배열 반환)

slice: 배열에서 특정 범위 복사 후 반환

concat: 배열 끝에 요소 추가 후 복사 후 반환

filter: 배열을 특정 함수로 filtering 후 복사해서 반환

map: 배열의 각 아이템을 특정 함수로 변경한 후 복사해서 반환

forEach: 배열의 각 아이템 순회하며 함수 호출

reverse: 배열의 순서 뒤집어서 반환(원본 변경)

sort: 배열을 정렬하고 반환(원본 변경)

reduce: 배열에서 한 가지 값 도출할 때 사용(초기값은 명시적으로 설정해주는게 좋다)

reduceRight: 배열에서 한 가지 값 도출할 때 사용, 순회는 뒤에서부터

every: 배열 내 모든 요소가 특정 함수를 모두 만족하면 true

some: 배열 내 하나의 요소라도 특정 함수를 만족하면 true

join: 배열의 모든 요소를 엮어 문자열로 반환(아무것도 전달하지 않으면 ','가 구분자)

split: 문자열을 구분자를 기준으로 배열화

fill: 배열의 모든 요소를 매개변수로 변경해서 반환(원본 변경)

find: 객체로 이뤄진 배열에서 특정 조건을 만족하는 요소를 찾을 때 유용하며 조건 만족하는 요소 반환. 조건 만족하는 요소 없으면 undefined 반환

findIndex: 배열에서 찾고자 하는 요소의 인덱스 반환. 없으면 -1 반환

includes: 배열에 찾고자 하는 요소가 있는지 확인. boolean 반환

indexOf: 배열에서 특정 요소의 위치를 찾을 때 활용, 없으면 -1 반환

lastIndexOf: 배열에서 특정 요소의 위치를 찾을 때 활용, 뒤에서부터 조회, 없으면 -1 반환

Array.isArray: typeof array는 object이다. 조건문 등에서 배열인지를 체크하고자한다면 Array.isArray를 활용하자.

 

6. iterable 객체

이터러블 객체란 for ... of를 적용할 수 있는 객체를 의미한다.

배열과 문자열은 대표적인 내장 이터러블 객체이다.

컬렉션 성격을 가진 데이터를 담은 객체를 순회하고자 할 때 객체를 이터러블로 만든다면 유용할 것이다.

이터러블 객체의 조건:

1. 이터레이터를 반환하는 Symbol.iterator 메서드가 구현되어있다.

2. 이터레이터는 next 메서드가 포함된 객체이다.(next 메서드는 { done: boolean, value: any } 객체를 반환해야한다.)

for ... of에선 대상 객체의 Symbol.iterator 메서드를 호출하여 이터레이터를 얻어내고 해당 이터레이터를 토대로 반복을 진행한다.

 

즉, 객체는 '반복'이라는 성질을 이터레이터를 통해 주입받는 것이다.(반복과 관련된 로직도 이터레이터에서 담당)

객체는 Symbol.iterator 메서드를 여러번 호출해서 여러 개의 이터레이터를 만들어낼 수 있다.

각 이터레이터는 고유한 반복자를 간직한다.

 

이터러블 객체, 유사 배열 객체(인덱스, length 프로퍼티 존재)를 Array.from으로 배열로 만들 수 있다.(배열 내장 메서드 사용 가능)

 

7. 맵과 셋

맵(Map)

설명:

키로 값을 조회하는 컬렉션 자료형

 

생성자:

new Map()으로 생성(초기값은 [키, 값]의 배열)

대표 메서드:

set: 키와 값을 입력. 자기 자신을 반환

get: 키를 입력해서 키에 대응하는 값을 반환

delete: 키를 입력해서 키, 값 쌍 삭제. 성공 여부에 따라 true/false 반환

has: 키를 입력해서 값 존재하는지 파악. 성공 여부에 따라 true/false 반환

clear: map을 비우는 메서드. undefined 반환

size: map 요소 갯수를 반환하는 프로퍼티(메서드 아님)

 

객체와의 차별점:

1. 키 자료형에 제약이 없다(객체, NaN 등도 가능) => 객체는 문자형으로 자동 변환되는 것에 비해

2. size 같은 편의 메서드가 존재한다.

3. 이터러블이므로 순회가능하다.(for of, forEach 등으로)

4. 값을 넣는 순서대로 순회한다.

 

순회:

1. forEach

2. for of

3. map.keys는 키 목록에 대한 이터러블을 반환하는 메서드

4. map.values는 값 목록에 대한 이터러블을 반환하는 메서드

5. map.entries는 [키, 값] 목록에 대한 이터러블을 반환하는 메서드

 

객체와의 호환성:

1. Object.entries를 통해 객체를 [key, value]의 배열 형태로 변환 가능 => map 생성자의 초기값으로 활용 가능

2. Object.fromEntries를 통해 map을 객체로 변환 가능

 

셋(Set)

생성자:

new Set([]) => 인자로 이터러블 객체를 전달받음(대개 배열을 전달받는다).

 

메서드:

add: set에 값 추가, set 자신을 반환(이미 존재하는 값 추가 시도하면 아무 일도 발생하지 않음)

delete: 삭제할 value를 입력. true false 반환

has: 존재여부 파악할 value 입력, true/false 반환

clear: set을 비운다. undefined 반환

size: set내 아이템 갯수(메서드 아님)

 

배열과의 차이점:

중복 요소를 허용하지 않는다.

 

순회:

1. forEach

2. for of

3. keys

4. values

5. entries

 

기억해야할 것: Array.from은 이터러블을 전달받아 배열로 만든다. Map, Set은 이터러블이다. (Map, Set의 keys, values, entries 메서드 또한 이터러블을 반환한다)

 

9. Object.keys, values, entries

Object.keys: 객체를 인자로 전달하면 객체의 키를 요소로 하는 배열을 반환

Object.values: 객체를 인자로 전달하면 객체의 값을 요소로 하는 배열을 반환

Object.entries: 객체를 인자로 전달하면 객체의 키-값 쌍을 요소로 하는 배열을 반환(객체를 토대로 순회하고자 할 때 편하다)

Object.fromEntries: 키-값 쌍의 배열을 인자로 전달하면 객체를 반환

 

10. 구조 분해 할당

배열 구조 분해할당

1. 할당 연산자 우측엔 모든 이터러블 객체가 올 수 있다.(map, set 등)

2. 할당 연산자 좌측엔 모든 할당 가능한 값이 올 수 있다.(객체의 프로퍼티 등)

3. 구조 분해할당의 기본 값을 설정할 수 있으며 평가식, 함수도 기본 값이 될 수 있다.(평가, 호출 시점은 기본 값이 할당 되어야하는 순간)

4. 나머지 연산자를 통해 부분 배열로 빼낼 수 있다.(ex: const [a, b, ...rest] = arr; 에서 rest에는 arr의 부분 집합이 담긴다)

 

객체 구조 분해할당

1. 프로퍼티 별로 기본 값 지정이 가능하며 평가식, 함수도 기본 값으로 활용할 수 있다.(평가, 호출 시점은 기본 값이 할당 되어야는 순간)

2. 나머지 연산자를 통해 부분적으로 객체를 가져올 수 있다.(ex: const {name, age, ...rest} = obj;에서 rest에는 obj의 나머지 부분들이 담긴다.)

3. 함수 parameter 갯수가 많고 다양한 자료형, 기본 값 지정이 필요한 경우엔 하나의 객체를 인자로 받아서 구조 분해할당을 취하면 호출 시점에 함수 호출이 편해진다.

 

11. Date 객체와 날짜

생성자(로컬 타임을 기준으로 Date 객체가 생성됨)

1. new Date()

2. new Date(milliseconds)

3. new Date('2024-01-30T00:00:00.000Z'); <= Z를 붙이면 UTC+0을 기준으로 date 값 결정(Z 안붙이면 현지시간 기준으로 결정)

4. new Date(year, month, date, hours, minutes, seconds, ms)

 

getter(UTC가 안붙으면 전부 현지 시간 기준으로 값 반환)

1. getTime()

2. getFullYear()

3. getMonth()

4. getDate()

5. getHours()

6. getMinutes()

7. getSeconds()

8. getMilliSeconds();

9. getDay();

10. getUTCFullYear()

11. getUTCMonth()

12. getUTCDate()

13. getUTCHours()

14. getUTCMinutes()

15. getUTCSeconds()

16. getTimezoneOffset(): 현지 시간과 표준 시간의 차이를 반환(분 단위)

 

setter

1. setFullYear(year, [month], [date])

2. setMonth(month, [date])

3. setDate()

4. setHours(hours, [minutes], [seconds], [ms])

5. setMinutes(minutes, [seconds], [ms])

6. setSeconds(seconds, [ms])

7. setTime()

8. setUTCFullYear()

9. setUTCMonth()

10. setUTCDate()

11. setUTCHours()

12. setUTCMinutes()

13. setUTCSeconds()

 

메서드

1. Date.now();

2. Date.parse();

 

그외

1. timestamp: 1970년 1월 1일 00시 00분 00초로 부터 흐른 milliseconds를 의미한다.

2. 형변환: Date 객체 간의 +, - 연산을 수행할 시 숫자형으로 형변환된다. Date 객체는 내장 형변환으로 인해 timestamp가 된다.

3. month, day는 0부터 시작한다.

4. day는 일요일부터 시작한다.

5. date는 1부터 시작한다.(setDate에 0을 입력하면 이전 달의 마지막 날이 날짜 셋팅된다. => 자동 고침 기능)

6. Date 객체는 현지 시간(local time) 기준으로 생성된다.

 

12. JSON과 메서드

객체를 네트워크 통신이나 로깅 등에 활용할 목적으로 문자열화 해야할 때가 있다.

모든 프로퍼티에 대해 전부 대응하며 직접 구현하는 것은 까다로운데(중첩 객체 등 고려), 이때 활용할 수 있는 것이 JSON 포맷이다.

 

JSON 포맷의 특징:

1. 객체 프로퍼티 키는 쌍따옴표로 감싸진다.

2. 객체 프로퍼티 값이 문자열이라면 쌍따옴표로 감싸야한다.

3. 객체 프로퍼티 키가 Symbol인 경우 문자열로 변경될 때 포함되지 않는다.

4. 객체 프로퍼티가 함수일 경우, 문자열로 변경될 때 포함되지 않는다.

5. 객체 프로퍼티 값이 undefined일 경우, 문자열로 변경될 때 포함되지 않는다.

6. 중첩 객체라도 문자열화를 할 수 있다.(단, 순환 참조를 하는 객체의 경우 문자열화를 할 수 없다.)

 

JSON.stringify

1. 첫 번째 인자에 객체를 전달하면 문자열로 변경해서 반환한다.(원시값도 전달 가능)

2. 두 번째 인자에 프로퍼티가 요소인 배열 혹은 replacer 함수를 전달할 수 있다.

   2-1. 프로퍼티 배열이 전달되는 경우, 해당 배열 내의 프로퍼티에 한해서만 serialize 대상이 된다.(중첩 객체 모두에 적용됨)

   2-2. 함수로 전달하는 경우, 조건에 맞게 값을 반환시켜 프로퍼티를 무시하거나 변경을 할 수도 있다.(undefined를 반환시켜 특정 프로퍼티의 serialize를 막을 수 있다, 전달되는 함수는 중첩 객체까지 모두 순환된다.)

 

JSON.parse

1. 첫 번째 인자에 deserialize할 문자열을 전달하면 객체로 반환된다.

2. 두 번째 인자에 reviver 함수를 전달할 수 있다.(key, value를 인자로 전달받는 함수, deserialize 진행 시 특정 프로퍼티에 대해 변경을 가할 수 있다.)

 

toJSON

1. JSON.stringify로 인해 serialize가 진행될 때 Date 같은 내장 객체는 내부적으로 구현된 toJSON으로 인해 문자열화가 진행된다. 내장 객체가 아닌 경우, 이를 직접 구현해놓을 경우, stringify 시 알아서 호출된다.