[The Modern JavaScript] The JavaScript language - Data types

Methods of primitives

A primitive as an object

• 래퍼 객체: String, Number, Boolean, Symbol
• 원시값에 메서드를 호출하려고 하면 래퍼 객체를 통해 임시 객체가 만들어진 뒤 메서드 호출
  
  

Number

• 일반적인 숫자는 부동소수점숫자로 알려진 64비트 형식의 숫자
• 임의의 길이를 가진 정수는 BigInt 숫자로 나타냄(253이상이거나 -253이하)

More ways to write a number

• 10억(billion) : 1bn
• 'e' + 0의 개수
  • e는 왼쪽의 수에 오른쪽 수만큼 10의 거듭제곱
    • 10억(1,000,000,000) : 1e9 (1과 9개의 0)
  • 우측에 음수가 있으면 왼쪽으로 이동(나누기)
    • 0.000001 : 1e-6 (1에서 왼쪽으로 6번 이동)
• 16진수(0x), 2진수(0b), 8진수(0o)

toString(base)

• num.toString(base) 메서드는 base 진법으로 num을 표현한 후, 이를 문자형으로 변환

Rounding

• Math.floor : 소수점 첫째 자리에서 내림
• Math.ceil : 소수점 첫째 자리에서 올림
• Math.round : 소수점 첫째 자리에서 반올림
• Math.trunc : 소수점 모두 무시
• 소수점 n번째 자릿수
  • 곱하기와 나누기 : 10의 거듭제곱 수를 곱한 후 반올림 계산 후 처음 곱한 수를 다시 나누기
  • toFixed(n) 메서드 사용

Imprecise calculations

• 숫자는 내부적으로 64비트 형식으로 표현되는데, 정밀도 손실(loss of precision)이 자주 발생함
• toFixed(n) 사용하여 어림수를 통해 최대한 방지

Tests: isFinite and isNaN

• isNaN(value) : 인수를 숫자로 변환한 다음 NaN인지 테스트
• isFinite(value) : 인수를 숫자로 변환한 다음 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true 반환
  • 문자열이 숫자인지 검증하는데 주로 사용
  • 빈 문자열이나 공백만 있는 문자열은 모두 0으로 취급됨

parseInt and parseFloat

• parseInt는 정수, parseFloat는 부동 소수점 숫자 반환
• 문자열에서 숫자를 '읽으면서' 오류가 발생하면 이미 수집된 숫자까지 반환함
  • parseInt('a123') -> NaN, a는 숫자가 아니므로 오류 발생 후 중단

Other math functions

• Math.random() : 1을 제외한 0과 1 사이의 난수 반환
• Math.max(a, b, c ...) / Math.min(a, b, c ...) : 최대/최소값 반환
• Math.pow(n, power) : n을 power번 거듭제곱한 값 반환
  
  

Strings

Quotes

• '' 작은 따옴표
• "" 큰 따옴표
• `` 백틱
  • 템플릿 리터럴(template literal): 문자열 중간에 ${...} 표현식 삽입 가능
  • 여러 줄의 문자열 작성 가능

Special characters

• \n 줄바꿈, \' \'' 따옴표, \t 탭 등
• 모든 특수문자는 이스케이프 문자(escape character), 역슬래시(backslash) \로 시작
  • 역슬래시는 문자열 내 따옴표, 문자 자체로 출력할 때도 사용

String length

• 'length 프로퍼티'는 문자열의 길이 저장 (함수X)

Accessing characters

let str = "Hello";

alert( str[0] ); // 0번 째 글자, H
alert( str.charAt[0] ); // H
alert( str[str.length - 1] ); // (5-1=4) 4번 째 글자, o

• [] 대괄호 주로 사용, 해당 글자가 없는 경우 undefined 반환
• charAt 거의 사용하지 않음, 없는 경우 빈 문자열 반환

Strings are immutable

• 문자열은 일부 수정 불가
• 필요한 경우 새로운 문자열을 만든 다음, 바꾸려는 문자열에 재할당

Changing the case

• toLowerCase(), toUpperCase()
  • 'str'[0].toLowerCase() : 한 글자만 변경도 가능

Searching for a substring

• str.indexOf(substr,pos) : str의 pos에서 시작하여 부분 문자열인 substr이 어느 위치에 있는지 찾음
  • pos 생략 가능
  • 대소문자 구분, 공백 포함
• includes : 부분 문자열 포함 여부
• startsWith, endsWith : 특정 문자열로 시작 또는 끝나는지 여부 확인

Getting a substring

• slice(start, end) : start부터 end 바로 전까지 반환
  • end 생략 가능, 문자열 끝까지 반환
• substring(start, end) : start와 end 사이에 있는 문자열 반환
  • start와 end의 숫자가 바뀌어도 무관
  • 음수는 0으로 처리됨
• substr(start, length) : start부터 length개의 글자 반환

Comparing strings

• codePointAt(pos) : pos에 위치한 글자 코드 반환
• String.fromCodePoint(code) : code에 대응하는 글자 반환
• \u + 16진수 코드 : 코드에 대응하는 글자 반환
  
  

Arrays

• 순서가 있는 컬렉션을 저장하는 자료구조

Declaration

let arr = new Array();
let arr = [];

let fruits = ["사과", "오렌지", "포도"];
alert( fruits[0] ); // 사과
alert( fruits[1] ); // 오렌지
alert( fruits[2] ); // 포도

• 각 배열 요소에는 0부터 시작하는 숫자(인덱스)를 가짐
• 인덱스를 사용하여 특정 요소를 얻거나 수정, 추가 가능
• 배열 요소의 자료형 제약 없음

Methods pop/push, shift/unshift

• 큐(queue) : FIFO (First-In-First-Out)
  • push : 맨 끝 요소 추가
  • shift : 맨 앞 요소를 제거한 후 남은 요소를 앞으로 하나씩 당김
• 스택(stack) : LIFO (Last-In-First-Out)
  • push : 스택 끝에 요소 추가
  • pop : 스택 끝 요소를 추출

Loops

• for문, for..of, for..in : 배열 순회
• cf. 배열에는 for..in 권장하지 않음
  • 모든 프로퍼티를 대상으로 하여 키나 숫자가 아닌 '필요 없는' 프로퍼티도 순회, 속도 느림

A word about "length"

• length : 가장 큰 인덱스에 +1
• length의 값을 수동으로 직접 수정 가능
• arr.length = 0; 으로 초기화 가능

new Array()

• new Array(n) : 요소는 없지만 길이가 n인 배열이 만들어짐
• arr[0] : undefined
• arr.length : 길이는 2

Multidimensional arrays

• 다차원 배열 : 배열 안의 요소로 배열이 저장됨

toString

• 배열에는 toString 메서드가 구현되어 있어, 호출 시 배열의 요소가 쉼표로 구분된 문자열로 반환됨
  
  

Array methods

Add/remove items

• arr.splice(index, [deleteCount, element1 ...])
  • index : 조작하려는 첫 번째 요소
    • 음수 인덱스 가능 (뒤에서부터)
  • deleteCount : 제거하고자 하는 요소의 개수
  • element : 배열에 대체할 요소
• arr.slice([start], [end])
  • start 인덱스부터 end 바로 직전 요소까지 복사한 새로운 배열을 반환
• arr.concat(arg1, arg2 ...)
  • arr의 모든 요소 + arg1 + arg2 ... 모두 합친 새로운 배열 반환

Iterate: forEach

• arr.forEach(function(item, index, array))
  • 모든 요소에 func 호출

Searching in array

• arr.indexOf(item, from)
  • item 요소를 from부터 찾기 시작하여 해당 요소와 인덱스 반환, 없으면 -1 반환
  • 완전 항동 연산자 === 사용
• arr.lastIndexOf(item, from)
  • 뒤에서부터 탐색 시작
• arr.includes(value)
  • 발견하면 true 반환
  • NaN도 처리 가능
• arr.find(function(item, index, array){...})
  • item : 함수를 호출할 요소
  • index : 요소의 인덱스
  • array : 배열 자기 자신
  • 반환 값을 true로 만드는 하나의 요소를 찾고 반복 멈춤, 찾지 못하면 undefined 반환
• arr.filter(function(item, index, array){...})
  • 조건을 충족하는 요소가 여러 개인 경우에 해당 요소 전체를 담은 배열을 반환

Transform an array

• arr.map(function(item, index, array){...})
  • 전체 요소를 대상으로 함수 실행하고 결과를 배열로 반환
• arr.sort()
  • 배열 요소를 정렬, 배열 자체가 변경됨
  • 데이터 타입이 모두 다른 요소들을 정렬하기 위해 정렬 기준을 정의해주는 함수(ordering function, 정렬 함수) 필요
• arr.reverse
  • 배열 요소를 역순으로 정렬, 배열 자체가 변경됨
• arr.split(delim)
  • 구분자(delimiter)를 기준으로 문자열을 분리해줌
• arr.join(glue)
  • 인수(glue)를 사용하여 하나의 문자열로 합침
• arr.reduce(function(accumulator, item, index, array){...})
  • accumulator : 이전 함수 호출의 결과
  • item : 현재 배열 요소
  • index : 요소의 위치
  • array : 배열
  • 앞서 호출했던 함수의 결과가 누적하여 저장되는 누산기능 함수

Array.isArray

• Array.isArray(value)
  • value의 배열 여부 판단(true/false)

Most methods support "thisArg"

• func의 this (해당 배열을 지칭하는 파라미터)
• 함수를 호출하는 대부분 배열 메서드에서 사용 가능
  
  

Iterables

• for .. of 반복문을 사용할 수 있는 반복 가능한(iterable) 객체
• 이터러블엔 Symbol.iterator가 구현되어 있어야 함 (next())
  • 문자열이나 배열 같은 내장 이터러블에도 구현되어 있음
    
    

Map and Set

Map

• 키가 있는 다양한 자료형 데이터를 저장 가능
• 키 타입 제약 없음 (객체 허용)
• 삽입된 순서대로 순회함, 순서 기억
• new Map()
• map.set(key, value) : key를 이용해 value 저장
• map.get(key) : key에 해당하는 값을 반환
• map.has(key) : key 존재 여부 확인(true/false)
• map.delete(key) : key에 해당하는 값을 삭제
• map.clear() : 모든 요소를 제거
• map.size : 요소의 개수 반환

Iteration over Map

• map.keys() : 모든 키를 모아 이터러블 객체로 반환
• map.values() : 모든 요소의 값을 모아 이터러블 객체로 반환
• map.entries() : 요소의 키-값을 한 쌍으로 하는 이터러블 객체 반환, for..of 반복문의 기초로 사용
• map의 forEach 가능

Object.entries: Map from Object

• Object.entries(obj)
  • 객체의 키-값 쌍을 요소로 가지는 배열을 맵으로 바꿈

Object.fromEntries: Object from Map

• Object.fromEntries(map.entries())
  • 맵을 객체로 바꿈

Set

• 중복을 허용하지 않고 키가 없는 컬렉션
• new Set(iterable)
• set.add(value) : 값을 추가하고 set 자신을 반환
• set.delete(value) : 값을 제거 후 true/false 반환
• set.has(value) : 값이 존재하면 true/false 반환
• set.clear() : set의 모든 값 제거
• set.size : set 값의 개수 반환

Iteration over Set

• for..of, forEach 가능
• set.keys() : 모든 값을 포함하는 이터러블 객체 반환
• set.values() : set.keys와 동일한 기능
• set.entries() : [value, value] 배열을 포함하는 이터러블 객체 반환
  
  

WeakMap and WeakSet

WeakMap

• 일반 map과 달리, 모든 참조가 없는 경우 가비지 컬렉션의 대상이 될 수 있음
• 키 타입은 객체만 가능

WeakSet

• 객체만 저장 가능, 저장된 모든 객체가 도달 불가능한 상태가 되면 메모리에서 삭제됨
• 객체엔 주요 자료를, 위크맵과 위크셋에는 '부수적인 자료'를 저장하는 형태로 활용
  • 주요 객체가 삭제되면 해당 객체를 참조하고 있는 위크맵과 위크셋은 자동으로 삭제됨
    
    

Destructuring assignment

• 구조 분해 할당을 통해 객체나 배열을 변수로 연결 가능
• 객체 분해
  • let {prop : varName = default, ...rest} = object
  • object의 프로퍼티 prop의 값은 varName에 할당
  • object에 prop이 없으면 default가 varName에 할당
  • 연결한 변수가 없는 나머지 프로퍼티들은 객체 rest에 복사
• 배열 분해
  • let [item1 = default, item2, ...rest] = array
  • array의 요소들이 item1, item2... 에 할당되고 나머지 요소들은 rest에 저장
    
    

Date and time

Creation

• new Date() : 현재 날짜와 시간이 저장된 Date 객체 생성
• new Date(year, month, date, hours, minutes, seconds, ms)
  • year : 네 자리 숫자만 가능, 필수
  • month : 0(1월)부터 11(12월) 사이의 숫자, 필수
  • date : 일, 없는 경우 1일
  • 이외에 생략하는 경우 0으로 처리
• 자바스크립트의 타임스탬프는 밀리초 기준

Access date components

• getFullYear() : 연도 반환
• getMonth() : 월 반환
• getDate() : 일 반환
• getDay() : 요일 반환 (0 일요일)
• getHours(), getMinutes(), getSeconds(), getMilliseconds()
  
  

JSON methods, toJSON

• JSON은 독자적인 표준을 가진 데이터 형식

JSON.stringify

• JSON.stringify : 객체를 JSON으로 변환, 원시값 적용 가능
  • 객체 {}, 배열 [], 원시형(문자, 숫자, 불린, null 등)
  • 함수 프로퍼티(메서드), 심볼형 프로퍼티, undefined는 무시됨
• JSON.parse : JSON을 객체로 변환
• JSON으로 직렬화 처리된(serialized), 문자열로 변환된(stringified), 결집된(marshalled) 객체
  • "" 큰따옴표 사용 (문자열과 객체 프로퍼티 이름)

Excluding and transforming: replacer

let json = JSON.stringify(value[, replacer, space])

• value : 인코딩 하려는 값
• replacer : 인코딩 하려는 프로퍼티가 담긴 배열, 또는 매핑 함수
• space : 가독성을 높이기 위해 삽입할 공백 문자 수

Formatting: space

alert(JSON.stringify(user, null, 2));
/* 공백 문자 두 개를 사용하여 들여쓰기함:
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}

// JSON.stringify(user, null, 4)
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
} */

• 로깅이나 가독성을 높이는 목적으로 사용될 공백 문자의 수(들여쓰기 탭)

Using reviver

let str = '{
			"title":"Conference",
            "date":"2017-11-30T12:00:00.000Z"
		   }';

let meetup = JSON.parse(str);
alert( meetup.date.getDate() ); // 에러

// reviver 사용
let meetup2 = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});
alert( meetup.date.getDate() );

• 전송받은 문자열을 역 직렬화(deserialize)하여 자바스크립트 객체로 변환
  
  

"Data types", by Ilya Kantor, 2007-2022, https://javascript.info/data-types