TIL #210113

📚 TIL

---

모던 JavaScript 튜토리얼

 

 

파트 1 - 코어 자바스크립트

🐝 객체 : 기본

 

객체

 

객체 : 몇 가지 특수한 기능을 가진 연관 배열(associative array), 프로퍼티(키-값 쌍)를 저장

프로퍼티 키는 문자열이나 심볼, 값은 어떤 자료형도 가능

프로퍼티 접근 : 점 표기법 - obj.property, 대괄호 표기법 - obj["property"]

추가 연산자

 

delete obj.prop	프로퍼티를 삭제하고 싶을 때
"key" in obj	해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때
for (let key in obj)	프로퍼티를 나열할 때

일반 객체 이외에도 Array, Date, Error 등 다양한 종류의 객체가 있음

 

참조에 의한 객체 복사

 

객체가 할당된 변수를 복사하거나 함수의 인자로 넘길 땐 객체가 아닌 객체의 참조가 복사됨

객체의 '진짜 복사본’을 만들려면

(1) '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign이나

(2) '깊은 복사’를 가능하게 해주는 _.cloneDeep(obj) 사용

 

가비지 컬렉션

 

‘도달 가능한(reachable)’ 값 : 어떻게든 접근하거나 사용할 수 있는 값, 메모리에서 삭제되지 않음

루트(root) : 태생부터 도달 가능한 값

 

• 현재 함수의 지역 변수와 매개변수
• 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수
• 전역 변수
• 기타 등등

루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 됨

가비지 컬렉터는 모든 객체를 모니터링하고, 도달할 수 없는 객체는 삭제

 

메서드와 'this'

 

메서드 : 객체 프로퍼티에 저장된 함수, 객체를 '행동’할 수 있게 해줌

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있음

this 값은 런타임에 결정

• 함수를 선언할 때 this를 사용할 수 있음,함수가 호출되기 전까지 this엔 값이 할당되지 않음
• 함수를 복사해 객체 간 전달할 수 있음
• 함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조

화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옴

 

'new' 연산자와 생성자 함수

 

생성자 함수(constructor function) : 함수 이름의 첫 글자는 대문자로 시작, "new" 연산자를 붙여 실행

new.target 프로퍼티를 사용하면 함수가 new와 함께 호출되었는지 아닌지를 알 수 있음

자바스크립트는 언어 차원에서 Date, Set 등 다양한 생성자 함수 제공

 

옵셔널 체이닝 '?.'

 

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용

 

obj?.prop	obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환
obj?.[prop]	obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환
obj?.method()	obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행

 

심볼형

 

'심볼(symbol)' : 유일한 식별자(unique identifier)를 만들고 싶을 때 사용

Symbol()을 호출하면 심볼을 만들 수 있음, 심볼은 이름이 같더라도 값이 항상 다름

Symbol.for(key) : key라는 이름을 가진 전역 심볼 반환, key라는 이름을 가진 전역 심볼이 없으면 새로운 전역 심볼 만듦

 

 

객체를 원시형으로 변환하기

 

원시값을 기대하는 내장 함수나 연산자를 사용할 때 객체-원시형으로의 형 변환이 자동으로 일어남

객체-원시형으로의 형 변환은 hint를 기준으로 세 종류로 구분

 

• "string" (alert 같이 문자열을 필요로 하는 연산)
• "number" (수학 연산)
• "default" (드물게 발생함)

객체-원시형 변환엔 다음 알고리즘이 적용됩니다.

1. 객체에 obj[Symbol.toPrimitive](hint)메서드가 있는지 찾고, 있다면 호출

2. 1에 해당하지 않고 hint가 "string"이라면, obj.toString()이나 obj.valueOf() 호출

3. 1과 2에 해당하지 않고, hint가 "number"나 "default"라면 obj.valueOf()나 obj.toString() 호출

obj.toString() : 로깅이나 디버깅 목적으로도 자주 사용

 

---

 

🐝 자료구조와 자료형

 

원시값의 메서드

 

원시값에도 객체에서처럼 메서드를 호출할 수 있음

래퍼 객체(object wrapper) : 원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체

 

숫자형

 

배정밀도 부동소수점 숫자(double precision floating point number), BigInt 숫자

'e' : e 왼쪽의 수에 e 오른쪽에 있는 수만큼의 10의 거듭제곱을 곱하는 효과

16진수 : 색을 나타내거나 문자를 인코딩할 때 등 다양한 곳에서 쓰임, 0x를 사용해 표현

2진수와 8진수 : 접두사 0b와 0o를 사용해 나타냄

num.toString(base) : base진법으로 num을 표현한 후, 이를 문자형으로 변환해 반환

숫자를 대상으로 메서드 toString을 직접 호출하고 싶다면 숫자 다음에 점 두 개 ..를 붙여야 함

base별 유스 케이스

 

base = 16	16진수 색, 문자 인코딩 등을 표현할 때 사용, 숫자는 0부터 9, 10 이상의 수는 A부터 F를 사용하여 나타냄
base = 2	비트 연산 디버깅에 주로 쓰임, 숫자는 0 또는 1이 될 수 있음
base = 36	사용할 수 있는 base 중 최댓값, 0..9와 A..Z를 사용해 숫자를 표현, 숫자로 된 긴 식별자를 짧게 줄일 때 유용

어림수 관련 내장 함수

• Math.floor : 소수점 첫째 자리에서 내림(버림)
• Math.ceil : 소수점 첫째 자리에서 올림
• Math.round : 소수점 첫째 자리에서 반올림
• Math.trunc : 소수부를 무시

소수점 n-th번째 수를 기준으로 어림수를 구해야 하는 상황 : 곱하기와 나누기, toFixed(n) 메서드 사용

정밀도 손실(loss of precision) : 숫자가 이진수로 변환되어 메모리에 저장되기 때문에 발생

isNaN(value) : 인수를 숫자로 변환한 다음 NaN인지 테스트함

isFinite(value) : 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환

parseInt,parseFloat : 불가능할 때까지 문자열에서 숫자를 읽고 숫자를 읽는 도중 오류가 발생하면 이미 수집된 숫자를 반환

기타 수학 함수

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

 

문자열

 

따옴표 : 작은따옴표, 큰따옴표, 백틱, 백틱을 사용하면 문자열 여러 줄에 작성 가능

템플릿 리터럴(template literal) : 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 삽입

태그드 템플릿(tagged template) : 첫 번째 백틱 바로 앞에 함수 이름을 써주면

함수는 백틱 안의 문자열 조각이나 표현식 평가 결과를 인수로 받아 자동으로 호출

특수 문자 : \n - 줄 바꿈 문자(newline character) , \', \" - 따옴표

length 프로퍼티 : 문자열의 길이 저장

특정 글자에 접근하기 : str.charAt(pos), str[pos],

for...of : 문자열을 구성하는 글자를 대상으로 반복 작업

문자열의 불변성 : 문자열은 수정할 수 없음

대소문자 변경하기 : 메서드 toLowerCase(), toUpperCase()

부분 문자열 찾기

 

str.indexOf(substr, pos), str.lastIndexOf(substr, pos)

str의 pos에서부터 시작해, 부분 문자열 substr을 찾으면 위치를 반환하고 그렇지 않으면 -1을 반환

비트 NOT 연산자 ~ : 피연산자를 32비트 정수로 바꾼 후 모든 비트를 반전, n이 32비트 정수일 때 ~n은 -(n+1)이 됨

str.includes(substr, pos) : str에 부분 문자열 substr이 있는지에 따라 true나 false를 반환

str.starsWith, str.endsWith : 문자열 str이 특정 문자열로 시작하는지 여부와 특정 문자열로 끝나는지 여부를 확인

부분 문자열 추출하기

 

str.slice(start, end)	문자열의 start부터 end 전까지 반환, 음수를 넘기면 문자열 끝에서부터 카운팅을 시작
str.substring (start, end)	start와 end 사이에 있는 문자열을 반환, start가 end보다 커도 가능, 음수 인수는 0으로 처리
str.substr(start, length)	start에서부터 시작해 length 개의 글자를 반환

문자열 비교하기

 

str.codePointAt(pos)	pos에 위치한 글자의 코드 반환
String.fromCodePoint(code)	숫자 형식의 code에 대응하는 글자 만들어줌
str.localeCompare(str2)	ECMA-402에서 정의한 규칙에 따라 str이 str2보다 작은지, 같은지, 큰지를 나타내주는 정수가 반환

문자열 심화 : 서로게이트 쌍(surrogate pair), 발음 구별 기호와 유니코드 정규화

 

배열

 

배열 : 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조

배열 선언

 

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

인덱스 : 배열 요소의 배열 내 순서를 나타내는 숫자

배열을 사용해 만들 수 있는 자료구조 : 큐(queue), 스택(stack)

push : 맨 끝에 요소 추가

pop : 스택 끝 요소를 추출

shift : 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줌

unshift : 배열 앞에 요소 추가

반복문 사용 : for, for..of, for..in

length 프로퍼티 : 가장 큰 인덱스에 1을 더한 값

다차원 배열(multidimensional array) : 배열이 배열의 요소가 된 배열

toString 메서드 : 요소를 쉼표로 구분한 문자열 반환

 

배열과 메서드

 

요소 추가/제거 메서드

• arr.splice(index, deleteCount, elem1, ..., elemN) : index - 조작을 가할 첫 번째 요소, deleteCount - 제거하고자 하는 요소의 개수, elem1, ..., elemN - 배열에 추가할 요소, 삭제된 요소로 구성된 배열 반환
• arr.slice(start, end) "start" 인덱스부터 ("end"를 제외한) "end"인덱스까지의 요소를 복사한 새로운 배열을 반환
• arr.concat(arg1, arg2, ...) : arr에 속한 모든 요소와 arg1, arg2 등에 속한 모든 요소를 한데 모은 새로운 배열이 반환

arr.forEach(function(item, index, array) : 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌

배열 탐색하기

• arr.indexOf, arr.lastIndexOf, arr.includes : 같은 이름을 가진 문자열 메서드와 문법이 동일
• arr.find(fn) : true가 반환되면 반복이 멈추고 해당 요소를 반환, 조건에 해당하는 요소가 없으면 undefined를 반환
• arr.findIndex : true가 반환되면 해당 요소의 인덱스를 반환, 조건에 맞는 요소가 없으면 -1 반환
• arr.filter(fn) : 조건을 충족하는 요소는 results에 순차적으로 더해짐, 조건을 충족하는 요소가 하나도 없으면 빈 배열 반환

배열을 변형하는 메서드

• arr.map : 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환
• arr.sort(fn) : 배열의 요소를 정렬, 배열 자체가 변경, 정렬 함수를 인수로 넘겨주지 않으면 사전편집 순으로 요소 정렬
• arr.reverse : arr의 요소를 역순으로 정렬
• str.split(delim) : 구분자(delimiter) delim을 기준으로 문자열을 쪼개줌
• arr.join(glue) : 인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어줌
• arr.reduce, arr.reduceRight : 배열을 기반으로 값 하나를 도출할 때 사용

Array.isArray(value) : value가 배열이라면 true를, 배열이 아니라면 false를 반환

thisArg : 선택적으로 사용할 수 있는 마지막 인수, func의 this가 됨

 

 

 

iterable 객체

 

반복 가능한(iterable, 이터러블) 객체 : 메서드 Symbol.iterator가 구현된 객체, for..of 반복문 적용 가능

관심사의 분리 : 이터레이터 객체와 반복 대상인 객체 분리

유사 배열(array-like) : 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체

Array.from : 이터러블이나 유사 배열을 받아 ‘진짜’ Array를 만들어줌

 

맵과 셋

 

맵(Map) : 키가 있는 데이터를 저장한다는 점에서 객체와 유사하지만, 키에 다양한 자료형 허용

주요 메서드와 프로퍼티

• new Map() – 맵을 만듦
• map.set(key, value) – key를 이용해 value를 저장
• map.get(key) – key에 해당하는 값을 반환, key가 존재하지 않으면 undefined를 반환
• map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환
• map.delete(key) – key에 해당하는 값을 삭제
• map.clear() – 맵 안의 모든 요소를 제거
• map.size – 요소의 개수를 반환

맵의 요소에 반복 작업하는 메서드

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환
• forEach 지원

Object.entries(obj) : 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환

Object.fromEntries : 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿔줌

셋(Set) : 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션

셋의 주요 메서드

• new Set(iterable) – 셋을 만듦, 이터러블 객체를 전달받으면 그 안의 값을 복사해 셋에 넣어줌
• set.add(value) – 값을 추가하고 셋 자신을 반환
• set.delete(value) – 값을 제거, 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
• set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환
• set.clear() – 셋을 비움
• set.size – 셋에 몇 개의 값이 있는지 세줌

셋의 값에도 for..of, forEach, set.keys(), set.values(), set.entries() 사용 가능

 

위크맵과 위크셋

 

자료구조를 구성하는 요소는 자신이 속한 자료구조가 메모리에 남아있는 동안 메모리에서 삭제되지 않음

위크맵(WeakMap)을 사용하면 키로 쓰인 객체가 가비지 컬렉션의 대상이 됨

위크맵 : 키가 반드시 객체여야 함, 반복 작업과 keys(), values(), entries() 메서드를 지원하지 않음

get, set, delete, has 메서드 지원, 부차적인 데이터를 저장할 곳이 필요할 때, 캐싱이 필요할 때 사용

위크셋 : 셋과 유사하지만 객체만 저장할 수 있음, 구성 요소 하나를 대상으로 하는 메서드만 지원

add, has, delete 사용 가능, 간단한 답변을 얻는 용도로 사용

 

Object.keys, values, entries

 

일반 객체에 사용하는 메서드

• Object.keys(obj) : 키가 담긴 배열을 반환
• Object.values(obj) : 값이 담긴 배열을 반환
• Object.entries(obj) : [key, value] 쌍이 담긴 배열을 반환

Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용 가능

 

구조 분해 할당

 

구조 분해 할당(destructuring assignment) : 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법

배열 분해하기

 

let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // surname엔 arr[1]을 할당
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname); // Lee

할당 연산자 우측엔 모든 이터러블이 올 수 있고 할당 연산자 좌측엔 뭐든지 올 수 있음

 

...로 나머지 요소 가져오기 : 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 배열로 가져올 수 있음

할당할 값이 없으면 undefined로 취급

=을 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값(default value)'을 설정할 수 있음

할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣으면 객체 분해 가능

중첩 구조 분해(nested destructuring) 객체나 배열이 다른 객체나 배열을 포함하는 경우의 구조 분해

함수 매개변수를 구조 분해할 땐, 반드시 인수가 전달된다고 가정되고 사용됨

빈 객체 {}를 인수 전체의 기본값으로 만들면 에러가 발생하지 않음

 

Date 객체와 날짜

 

new Date() : 인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환

타임스탬프(timestamp) : 1970년의 첫날을 기준으로 흘러간 밀리초를 나타내는 정수

Date 객체의 메서드

날짜 구성요소 얻기

 

getFullYear() : 연도(네 자릿수) 반환

getMonth() : 월 반환(0 이상 11 이하)

getDate() : 일 반환(1 이상 31 이하)

getHours(), getMinutes(), getSeconds(), getMilliseconds() : 시, 분, 초, 밀리초 반환

getDay() : 일요일을 나타내는 0부터 토요일을 나타내는 6까지의 숫자 중 하나를 반환

getTime() : 타임스탬프 반환

날짜 구성요소 설정하기

 

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

setMonth(month, [date])

setDate(date)

setHours(hour, [min], [sec], [ms])

setMinutes(min, [sec], [ms])

setSeconds(sec, [ms])

setMilliseconds(ms)

setTime(milliseconds)

자동 고침(autocorrection) : 범위를 벗어나는 값을 설정하려고 하면 자동 고침 기능이 활성화되면서 값이 자동으로 수정

Date.now() : new Date().getTime()과 의미론적으로 동일하지만 중간에 Date 객체를 만들지 않음

Date.parse(str) : YYYY-MM-DDTHH:mm:ss.sssZ 형식의 문자열에서 날짜를 읽어옴

문자열과 대응하는 날짜의 타임스탬프가 반환

 

JSON과 메서드

 

JSON (JavaScript Object Notation) : 값이나 객체를 나타내주는 범용 포맷

JSON.stringify : 객체를 JSON으로 바꿔줌

 

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

value : 인코딩 하려는 값

replacer : JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열. 또는 매핑 함수 function(key, value)

space : 서식 변경 목적으로 사용할 공백 문자 수

JSON으로 인코딩된 객체 : 문자열과 객체 프로퍼티 이름을 큰 따옴표로 감싸야 함

객체에 toJSON 메서드가 있으면 이를 자동으로 호출

JSON.parse : JSON을 객체로 바꿔줌

 

let value = JSON.parse(str, [reviver]);

str : JSON 형식의 문자열

reviver : 모든 (key, value) 쌍을 대상으로 호출되는 function(key,value) 형태의 함수로 값을 변경

 

---

 

😁 오늘 한 일

---

 

📕 자바스크립트 공부하기

- 누가.. 자바스크립트 쉽다고 했어..흑흑 책으로만 보니 개념이 어려워요 ㅠ

- 한 번에 이해하려고 하지 말고 쭉 공부하고 실습 위주로 학습해야겠어요!

 

🍖 친구랑 점심먹기

- 친구가 부대찌개를 끓여줘서 친구네 집에서 같이 밥을 먹었어요

- 넘 맛있었어요!! 원조 부대찌개의 맛이었어요

 

 

🎬 영화 미저리 보기

- 와 넘 무서워요 ㅋㅋㅋ 비슷한 주제의 영화 중에 제일 재밌는 듯..

- 마지막까지 사실적이고 소름돋는 명작이에요

 

🏆 LCK 보기

- 오늘 2021 LCK 스프링 개막전을 했어요

- 오랜만에 보니 한타의 시원한 맛에 롤하고싶어져요! 하지만 내가 하면 트롤 ㅠ