호이스팅

• 스코프 단위로 일어난다.

Temporal Dead Zone

- TDZ 영역에 있는 변수들은 사용할 수 없다

변수 생성 과정

var
1) 선언 및 초기화 단계
2) 할당 단계

let
1) 선언 단계
2) 초기화 단계
3) 할당 단계

const
1) 선언 + 초기화 + 할당

스코프

var : 함수 스코프
-> 함수 내에서 선언된 변수만 그 지역 변수가 되는 것!
-> if문 안에서 선언한 변수는 if문 밖에서도 사용 가능!

> let, const : 블록 스코프

모든 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효/ 외부에서 접근X
코드 블록 내에서 선언한 변수 => 지역 변수

• 코드 블록 -> 함수, if문, for문, while문, try/catch문 등({}로 이루어지는 것들)
  
  함수; 코드 블록 내에서 선언된 변수는 함수 밖에서 사용할 수 없음!!

생성자 함수

객체 리터럴

Computed property

Method

Object.assign() : 객체 복제

Object.Keys() : 키 배열 반환

Object.entries() : 키/값 배열 반환

Symbol

유이한 식별자 만들 떄 사용함
유일성 보장(전체 코드중에 하나)

Symbol.for()

Symbol.for() : 전역 심볼

• 하나의 심볼만 보장받을 수 있음
• 없으면 만들고, 있으면 가져오기 때문
• Symbol 함수는 매번 다른 Symbol 값을 생성하지만, Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

Number, Math

- toString()

isNaN()

parseInt()

Math.random()

1~100 사이 임의의 숫자를 뽑고 싶다면?
Math.floor(Math.random()*100)+1

String

백틱 은 여러 줄을 포함할 수 있다

let list = [
"01. 들어가며",
"02. JS의 역사",
"03. 자료형",
"04. 함수",
"05. 배열",
];

let newList = [];
for(let i = 0; i < list.length; i++){
	newList.push(list[i].slice(4)); // 배열 index 4부터 끝까지
}
cosole.log(newList);

Array

• push() : 뒤에 삽입
• pop() : 뒤에 삭제
• unshift() : 앞에 삽입
• shift() : 앞에 삭제

arr.forEach(fn) : 배열 반복

arr.sort()

배열 재정렬

arr.reduce()

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
=> 왜 사용하는가?
똑같이 함수에 객체를 넘기지만, 코드가 훨씬 간결해짐
만약 해당 값을 만 번 사용하게 된다면??
지속적으로 객체명.key로 접근하는 것은 불편해짐

-> 순서가 바뀌어도 상관 없음

-> 객체로 받은 값이 undefined일때만 (gender = 'male' 같이) 기본값이 사용된다!

나머지 매개변수

Js에서는 인수로 넘겨주는 매개변수의 개수 제한이 없음

-> 아무것도 전달하지 않으면 undefined가 아니라 빈 배열 반환

-> 나머지 매개변수는 항상 마지막에 있어야 함

전개 구문(spread 연산자)

• 복제
  

• 전개 구문을 사용하면 코드를 간단하게 만들 수 있다.
  

• 같은 기능을 forEach문으로 만들었을 때
  

• 전개구문일 때

setTimeout / setInterval

• setTimeout : 일정 시간이 지난 후 함수를 실행

• setInerval : 일정 시간 간격으로 함수를 반복

• clearTimeout() : 예정된 작업 없앤다

call, apply, bind

-> 함수 호출 방식과 관계없이 this를 지정할 수 있음

• call
  call 메서드는 모든 함수에서 사용할 수 있고, this를 특정값으로 지정할 수 있다.

-> 결과

• apply
  -> array로 받는다
  

bind
함수의 this값을 영구히 바꿀 수 있음

-> 항상 this의 값을 Mike로 받을 수 있음

비동기 처리

작업의 완료를 기다리지 않고 다른 작업을 동시에 수행할 수 있도록 한다

콜백함수(callback)

함수의 매개변수에 함수 자체를 넘겨 함수 내에서 매개변수 함수를 실행하는 기법

• 가장 많이 쓰는 콜백 함수 형태
  

Promise

resolve: 성공한 경우
reject : 실패 됐을 때 실행되는 함수

callback 함수

어떤일이 완료된 후 실행회는 함수 => callback 함수

• 성공의 경우(resolve)

• 실패의 경우(reject)
  

• then -> 성공, 실패의 경우
  

• catch -> 첫번째 실행한 함수에서 난 에러 잡아줄 수 있음 (catch 선호)
  

• finally resolve든 reject든 다 끝나면 항상 실행 => 로딩 화면 없앨 때 유용

• promise.all => 모든 작업이 완료될 때까지 기다림
  -> 모든 페이지를 다 보여주거나 다 안 보여줄 떄 사용

• promise.race -> 하나라도 완료되면 끝냄

async / await

• async
  

• await

-> 시작을 먼저 출력하고, getName에 1초 기다렸다 Mike 출력

Generator

함수의 실행을 중간에 멈췄다 재개할 수 있는 기능
next(), return(), throw()
Generator는 다른 작업을 하다가 다시 돌아와서 next() 해주면 진행이 멈췄던 부분부터 이어서 실행

map/filter/reduce

• map

  각 요소를 변형해서 새 배열을 만들고 싶을 때

  • 각 요소를 하나씩 순회하면서 콜백 함수 실행
  • 리턴한 값들로 새 배열 생성
  • 길이 유지됨
    

• filter

  조건에 맞는 요소만 골라서 새 배열로 만들고 싶을 때

  • 조건식이 true인 요소만 추려서 새 배열로 반환
  • 길이 달라질 수 있음
    

• reduce

  • acc는 누적값, cur은 현재 요소
  • 초기값부터 시작해서 왼->오 순서로 누적 계산
  • 반환 값은 배열이 아닌 하나의 값(숫자, 문자열, 객체 등)