JavaScript

호이스팅

호이스팅은 코드가 실행하기 전 변수선언, 함수선언이 해당 스코프의 최상단으로 끌러올려진 것 같은 현상을 말한다. 또한 단지 선언문만 끌어올려질 뿐 할당은 끌어올리지 않는다.

호이스팅은 자바스크립트의 모든 선언에서 발생하고, let, const, class를 이용한 선언문에서는 호이스팅이 발생하지 않은 것처럼 동작한다. 이들 키워드로 선언된 변수를 선언문 이전에 참조하면 참조에러가 발생한다.

var키워드의 경우 선언과 동시에 undefined로 초기화 되어 메모리에 저장되는데 let, const의 경우 초기화 되지 않은 상태로 선언만 메모리에 저장되기 때문에 참조 에러를 일으키는 것이다.

참고

var / let / const

var : 변수를 중복으로 선언을 하여도 에러가 발생하지 않고, 각기 다른 값을 출력한다. 또 기본적으로 function scope를 가지고 있다. 변수 선언시 선언 단계와 초기화 단계가 한 번에 이뤄진다.(undefined로 초기화)

let : 변수의 재선언이 불가하다. block scope를 가지고 있다. 선언 단계와 초기화 단계가 분리되어 있어 실제 변수선언문 위치에 도달하였을 때 초기화가 이루어진다. 호이스팅으로 인한 스코프의 시작지점부터 초기화 시작 지점의 위치가 다른데 초기화 시작 지점까지는 변수를 참조할 수 없다. 이 구간을 일시적 사각지대(TDZ)라 부른다.

const : 변수의 재선언이 불가하고, 불변값으로 값의 재할당이 불가능하다. block scope를 가지고 있다.

클로저

자바스크립트에서는 함수를 어디서 호출했는지가 아닌 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다(렉시컬 스코프) 렉시컬 스코프가 가능하기 위해서는 함수는 자신이 호출된 환경과 상과없이 자신이 정의된 환경 즉 상위 스코프를 기억해야한다.

외부 함수보다 중첩된 이너 함수가 더 오래 유지되는 경우 중첩함수는 이미 생명주기가 종료된 외부 함수의 변수를 참조 할 수 있다. 이러한 중첩함수를 클로저라고 한다.

[클로저의 조건]

중첩 함수가 상위 스코프의 식별자를 참조해야한다.
중첩 함수가 외부 함수보다 더 오래 유지되야 한다.

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 상태가 의도치 않게 변경되지 않도록 상태를 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

[참고 : 모던자바스크립트 deep dive]

this

기본 바인딩 : 전역객체 window

암시적 바인딩 : 어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this가 된다.

명시적 바인딩 : 함수는 call, apply, bind 메서드를 가지고 있는데 첫 번째 인자로 넘겨주는 것이 this가 된다.

new 바인딩 : new 키워드를 사용하여 생성자 함수로 사용하면 this는 빈 객체를 가리킨다.

참고1

null / undefined

null : 원시 값 중 하나로 어떤 값이 의도적으로 비어있음을 표현한다. 즉 어떤 객체도 가리키고 있지 않다는 것을 의미한다. null은 타입이 object다

undefined : 변수를 선언하고 값을 할당하지 않은 상태로 자료형이 없는 상태다. 타입이 없기 때문에 undefined 타입은 undefined이다.

**두 값 모두 메모리적으로 차이가 없음 => 참고

깊은 복사, 얕은 복사

얕은 복사 : 얕은 복사는 참조 값의 복사를 의미한다. 해당 데이터의 참조 값을 전달하여 원본객체와 복사객체가 한 데이터를 공유하는 것이다. 예)call by reference

깊은 복사 : 값 자체의 복사를 의미한다. 원본 값과, 복사 값은 별도로 존재한다. 예)call by value

객체를 그대로 복사하여 사용하는 경우 기존 객체의 원본 데이터가 변질될 수 있어 객체의 깊은 복사가 중요하다. 객체의 깊은 복사를 하기 위해서 Object.assign(생성할 객체, 복사할 객체)를 사용하면 된다. 하지만 2차원 객체의 경우 복사가 이루어지지 않는다.

참고

Ajax / Promise

Ajax : 브라우저에 동기처리 방식으로 인한 문제점을 해결하기 위해 나온 비동기 통신으로 변경된 부분의 데이터만 Ajax를 통해 갱신하여 문제점을 해결할 수 있다. 비동기 처리 중 API를 호출했지만 서버에서는 응답값을 줄지 모른다. Ajax는 비동기적 처리로 서버에 요청후 응답을 기다리지 않고 다음 코드를 수행하여 문제가 발생할 수 있다. 이로 인하여 비동기적 처리의 실행순서를 제어하는 것이 필요했고 그 방법으로 콜백함수가 있다. 콜백함수를 이용하면 여러 콜백함수가 중첩되면서 콜백지옥 상황이 생기고 가독성이 떨어지게 된다.

Promise : Ajax의 콜백지옥의 단점을 개선도 하고 이전보다 간결하게 비동기 처리를 할 수 있도록 Promise가 나왔다. 사용방법은 Promise 객체를 사용하여 생성하고 인자로 함수를 담는다. 함수에는 resolve(처리가 성공적으로 끝난 경우 호출), reject(처리가 실패하여 끝난 경우 호출)라는 인수를 갖고 있다. promise 객체를 호출하는 부분에서 .then()을 사용하는 부분에서는 resolve 함수가, .catch()를 사용하는 부분에서는 reject 함수가 실행된다.

ES6 문법

const, let
화살표 함수
템플릿 리터럴
기본 매개변수
import, export
Promise
class
Spread 연산자
Iterator / Generator

async / await

async : 함수선언 앞에 async 키워드를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 것은 프로미스로 감싸서 반환

await : await 키워드는 async 함수안에서만 동작 한다. 함수 내에서 await 키워드를 만나면 프로미스가 처리될 때까지 기다리고 결과는 그 이후에 반환된다. 참고

forEach / Map

forEach는 배열을 순회하면서 배열의 각 원소들을 출력하나 map은 배열을 순회하면서 출력한 원소들을 새 배열로 반환해 준다.