this
-
메소드에서의 this -> 해당 객체 참조
-
함수에서의 this -> window 객체 참조
-
Constructor 함수에서의 this -> 빈 객체 참조
-
본래
{title:'audio'}가 없으면this.title은 window 객체를 가리키지만,{title:'audio'}를 넣어줌으로써 audio 객체의 title을 가리키게됨
-
화살표 함수
bind, call, apply
-
call
-
함수를 호출하는 함수
-
첫 번째 매개변수로 어떠한 것을 전달해주면 호출되는 함수의 this 안에 window 객체가 아닌 전달받은 것을 받게 됨
-
-
apply
- call과 유사하지만, 배열로 넣어주어야 함
- call과 유사하지만, 배열로 넣어주어야 함
-
bind
-
bind 메서드를 이용해서도 함수에서 this가 window 객체대신 다른 게 나오게 할 수 있음
-
직접 함수를 실행하지 않고 반환
-
Event Loop
- setTimeout()
두 번째 매개변수로 들어간 밀리초 단위가 지난 후 첫 번째 매개변수인 콜백 함수가 호출됨
- JS는 동기 언어
Closure
다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 엑세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스 가능
구조 분해 할당
-
객체 구조 분해 할당
-
깊게 들어간 객체 구조 분해 할당
-
배열 구조 분해 할당
-
생략
-
다른 이름 변수명 사용
-
전개 연산자
특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용
-
배열 조합
-
객체 조합
전개 연산자를 통해 원본 배열을 유지 -> 불변성 유지
map, filter, reduce
- map()메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환
-
filter()메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
-
reduce()메서드는 배열의 각 요소에 대한 주어진 리듀서 함수를 실행하고, 하나의 결괏값 반환
-
리듀서 함수의 인자
- 누산기(acc)
- 현재 값(cur)
- 현재 인덱스(idx)
- 원본 배열(src)
- 원본 배열(src)
strict mode
적용 방법
1. 파일에 "use strict" 지시자 입력
2. 함수 안에 "use strict"를 사용해서 그 함수만을 위해서 strict mode를 적용
3. class를 사용하면 자동으로 strict mode가 적용
- JS파일의 타입을 Module로 사용하면 strict mode 적용
IIFE 즉시 실행 함수 표현
IIFE를 사용하는 주된 이유는 변수를 전역으로 선언하는 것을 피하기 위함
표현식 vs 선언문
함수 선언문은 호이스팅의 영향을 받지만, 함수 표현식은 호이스팅의 영향을 받지 않음
Intersection Observer
브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지 구별
Pure Function
- 같은 입력값이 주어졌을 때, 언제나 같은 결괏값 리턴
- 사이드 이펙트를 만들지 않음
--
얕은 비교와 깊은 비교
- 얕은 비교
숫자, 문자열 등 원시 자료형은 값을 비교
배열, 객체 등 참조 자료형은 값 혹은 속성을 비교하지 않고, 참조되는 위치 비교
- 깊은 비교
객체의 경우에도 값으로 비교
- Object depth가 깊지 않은 이유: JSON.stringfy() 사용
- Object depth가 깊은 경우: lodash 라이브러리의 isEqual() 사용
얕은 복사와 깊은 복사
-
얕은 복사
-
얕은 동결
-
깊은 복사
Curry Function
커링은 f(a,b,c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합될 수 있게 변환
-> 커링은 호출하는 것이 아닌 변환하는 것
-> 파라미터가 몇 개인지 상관없이 한 번에 처리
