면접 질문 중 3가지에 대해 정리해보겠당~~ 조금씩 내껄로 만들다보면 나중엔 툭 찌르면 그냥 나오겠지? ㅎㅎ
var, let, const 차이
var는 함수 스코프를 가지며, 초기화 전 접근 시, 호이스팅 덕분에 undefined 반환한다(js만의 예전 문법으로 인한 오류라고도 볼 수 있음)
여기서 호이스팅? 변수나 함수 선언이 코드의 맨 위로 옮겨지는 현상
애초에 c++같은 언어는 변수와 함수를 위에서 선언해야만 사용이 가능하다.
js 엔진이 호이스팅 기능을 수행해주기 때문에 코드 아래에서 선언해도 사용가능한게 js만의 특징!
함수 스코프?
함수 내에서 선언한 변수는 함수 내부에서만 접근 가능
es6에 추가된 const,let은 블록 스코프를 가지며 호이스팅은 일어나지만 초기화 전 접근 시 오류 발생
블록 스코프?
해당 블록 내부에서만 접근 가능
함수 선언식(function)은 전체가 호이스팅,
함수 표현식(const ~~ = ()=>{})은 변수만 호이스팅
이후 const,let은 값의 재할당에서 차이가 있음
const - constant의 약자로 상수여서 재할당 불가
let - 재할당 가능
블록 스코프를 가지고 유지 보수가 용이한 const,let만 사용
Async/Await, Promise차이
코드 작성 방식, 가독성의 차이
Promise는 비동기 작업 처리 위한 객체로써,
then,catch 매서드 사용해 콜백 등록
비동기 작업 완료 후 then블록 코드 실행,
오류 발생 시 catch블록 실행
Async/Await은 ES2017문법에서 도입
비동기 코드를 동기코드처럼 작성함
await 키워드 사용시, promise 해결될 때까지 함수의 실행 일시 중지하고, 결과 값을 반환 받아 처리
코드 가독성 향상, try/catch문 사용해 오류 직관적 처리 가능
여러 비동기 함수 병렬 호출 위해 Promise.all 함수 사용 혹은
Promise.race()함수 사용해서 타임아웃 기능을 구현할 수도 있지만
코드 가독성, 동기코드처럼 작성할 수 있는 효과있는 Async/Await주로 더 사용하는 편
Arrow function
es6에 도입한 함수 표현식, 화살표 함수라고도 함
function키워드 대신 화살표 사용하여 더 간결하게 함수 정의할 수 있는데,
이러한 가독성 뿐만 아니라 일반 함수와 달리 자신의 this 바인딩을 가지지 않는다는게 특징
여기서 this란?
함수가 호출되는 방식에 따라 다른 값을 가리키는 특별한 객체, 주로 객체 지향 프로그래밍에서 객체의 인스턴스(클래스의 구체적인 구현체)를 참조하는데 사용
일반 함수에서 this는 전역 객체인 window혹은 node의 global을 참조
화살표 함수에선 고유의 this바인딩을 가지지 않고, 선언된 위치 기준 상위 스코프의 this를 의미
이렇게 혼동을 주는 this의 특징때문에 call,apply,bind로 고정시키기도 하지만, 사용자체를 지양하는 편
