자바스크립트 정리글입니다

클로저(Closure)란?

클로저란 함수 안에 함수를 생성했을 때 호출이 종료되더라도 스코프가 사라지지 않고 생성된 시점의 스코프 체인을 기억하고 있는 것을 뜻합니다. 보다 정확히는 외부 함수에 의해 반환되는 내부 함수를 가리키는 말입니다. 클로저를 사용하면 private 변수를 생성하여 정의된 스코프 이외의 곳에서 사용을 할 수 있습니다.

IIFE란?

즉시 실행 함수 표현식이라는 뜻으로 정의와 동시에 즉시 실행되는 함수입니다.

모듈패턴?

모듈패턴이란 자바스크립트의 코드관리기법 중 하나로 객체 핸들링을 위한 방법론입니다. 모듈패턴을 사용하면 객체에 유효범위를 줘서 private이나 public같은 접근 제한자처럼 사용하도록 캡슐화할수 있습니다.

호이스팅(Hoisting)이란?

호이스팅은 인터프리터가 자바스크립트 코드를 해석할 때 Global 영역이나 함수 영역 안에 있는 선언들을 최상위로 끌어올리는 것을 뜻합니다. 그리고 var 변수 선언과 변수와 함수 선언문에서만 호이스팅이 일어납니다.

var, let/const 차이?

var 변수선언은 호이스팅이 되고 let/const 변수선언은 호이스팅이 되지않는다.
var 를 쓰지않는 이유는 코드의 가독성과 유지보수때문이다.

This 란?

this는 자바스크립트 런타임시에 바인딩이 이루어지는 실행 컨텍스트입니다. 함수가 실행될 때 this가 결정되며 함수를 호출한 상황에 따라 this가 달라집니다.

객체의 메서드를 호출할 때 this는 객체를 가리킵니다.
함수를 호출할때는 this는 전역객체 가리킵니다.
생성자 함수를 사용할때는 this는 생성되는 객체 자신을 가리킵니다.

bind, call, apply 차이점

bind는 함수를 선언할 때 this와 파라미터를 지정해줄수있고, call과 apply는 함수를 호출할 때 this와 파라미터를 지정해줍니다.
apply는 파라미터를 배열의 형태로 전달하고 bind와 call은 각각의 파라미터를 하나씩 넘겨준다.

화살표함수란?

화살표함수는 ES6 문법으로 fucntion 키워드를 사용하는 것보다 간단히 함수를 만들 수 있습니다. 일반함수는 호출되는방식에 따라 this를 정의하지만 화살표함수는 this를 생성하지 않고 상위 스코프의 this를 가리키므로 콜백함수나 내부함수에서 this를 전달하기 수월합니다.(+생성자로사용불가능)

callback hell을 어떻게 처리 하면 좋은가?

콜백지옥은 비동기 처리 로직을 위해 콜백함수를 연속해서 사용하여 가독성이 떨어지는 것을 말합니다. 콜백지옥을 해결하려면 Promise나 Async를 사용하면 됩니다.

Promise가 콜백보다 좋은점?

프로미스란 자바스크립트 비동기 처리를 위해 사용되는 객체입니다. 코드의 복잡도가 높아짐에 따라 콜백이 중첩되는 경우가 발생했고, 이를 해결하기 위해 Promise 패턴이 생겼습니다. Promise 패턴을 사용하면 비동기작업을 순차적으로 진행하거나 예외처리를 할 때 then과 catch를 사용하여 좀더 가독성있게 관리할 수 있습니다.

객체 순회하는 방법?

for in 문을 사용하거나 객체 생성자인 Object의 메서드 keys, values, entries를 사용하면됩니다.
(각각 key값, value값 그리고 entries는 key와 value값을 배열로 반환)

배열 순회하는 방법

for문 또는 for in문을 사용하거나, 배열의 메서드인 forEach, map, reduce, filter 등을 사용하면 됩니다.
forEach는 return값이 undefined이지만 map은 콜백 함수의 결과값으로 새로운 배열을 return합니다.

Immutable이란? 쓰는이유? 사용방법?

immutable이란 변경 불가능한 값으로 원시타입인 Number, String, Boolean, null, undefined, Symbol 등이 있고, 객체타입은 mutable한 값입니다.

mutable value는 값에 대한 메모리 주소를 참조하기 때문에 값을 변경했을 경우 해당 값을 사용하는 다른곳에서 예상치 못한 버그를 유발할 수 있습니다. 하지만 immutable 객체를 사용한다면 이와 같은 Human Error를 방지할 수 있습니다.

객체를 immutable하게 만드려면 Object.freeze() 메서드를 사용하면 됩니다. 하지만 freeze 메소드는 객체 안의 객체까지 immutable하게 만들지는 못하므로 이에 주의하여 사용해야합니다. 다른 방법으로는 immutable js 라이브러리를 사용하는 것이 있습니다.

프로토타입이 어떻게 작동하는가?

모든 객체는 함수를 통해서 생성이 되는데 함수를 정의하면 Prototype Object도 같이 생성이 됩니다. 그 후 객체의 프로퍼티에 접근할 때 만약 객체에 해당 프로퍼티가 없다면 Prototype Object에서 해당 프로퍼티를 찾아서 사용을 합니다. 이와 같은 방식으로 같은 생성자를 통해 만들어진 객체들은 하나의 프로토타입을 공유하여 사용할 수 있습니다.

node.js 동작원리

Node js란 구글의 크롬 V8 자바스크립트 엔진과 비동기 작업을 처리하는 libuv라는 라이브러리로 이루어진 자바스크립트 런타임입니다. 노드의 특징으로는 싱글스레드, 비동기, 이벤트기반, 논블로킹 IO 등이 있습니다.

• 싱글스레드 : 자바스크립트를 실행하는 메인스레드인 이벤트루프가 싱글스레드임을 의미합니다.

• 동기와 비동기 : 동기란 호출된 함수의 return을 기다리거나 또는 return을 바로 받더라도 작업완료여부를 계속 확인하는것입니다. 비동기는 호출된 함수에게 콜백함수를 전달하여 호출된 함수의 작업이 완료되면 콜백함수를 실행하고, 호출된함수가 작업완료여부를 신경쓰지 않는것입니다.

• 블록킹 논블록킹 : 블로킹이란 호출된 함수가 수행이 끝날때까지 제어권을 가지고 있는 것이고 논블로킹이란 호출된 함수가 바로 리턴하여 제어권을 넘겨주는것입니다.

• 이벤트 기반 : 이벤트 기반이란 이벤트가 발생할때마다 이벤트 리스너에 등록해둔 콜백함수를 실행하는 것을 뜻합니다. (-> 이벤트루프도 설명)

자바스크립트 엔진은 Memory Heap과 Call Stack으로 이루어져있습니다. 메모리힙은 메모리할당이 일어나는곳이고 콜스택은 코드실행에 따라 호출스택이 쌓이는곳입니다.

자바스크립트 엔진은 콜스택에 쌓인 실행컨텍스트에 따라 위에서부터 실행이 일어나므로 비동기 처리를 할 수 없습니다. 따라서 비동기 작업을 처리하기 위해 libuv라이브러리를 사용합니다.

libuv 라이브러리?

(리버브는 노드에서 사용하는 비동기 IO 라이브러리입니다.) 노드의 특성인 이벤트기반과 논블로킹 IO는 모두 리버브 라이브러리에서 구현이 되며 노드의 비동기 작업은 OS커널이나 리버브의 스레드풀에서 수행합니다.

리버브 라이브러리에서는 이벤트 루프를 제공하는데 이 이벤트루프가 자바스크립트 엔진으로부터 받은 비동기작업을 OS커널에 넘겨주거나 스레드풀에 할당을 합니다. 그리고 할당된 작업이 끝나면 이벤트루프는 콜백함수를 태스크큐에 넣게되고…

자바스크립트 이벤트루프란?

이벤트루프란 자바스크립트의 비동기 작업을 위해 브라우저나 Node.js에서 지원하는것입니다. 비동기 작업의 처리가 끝나면 이벤트루프는 콜백함수를 태스크큐에 넣게되고... 이벤트루프는 콜스택과 태스크큐를 반복적으로 확인하면서 콜스택이 비어있을때 태스크큐의 작업을 꺼내어 콜스택으로 넣는 식으로 비동기작업을 처리합니다.

package_lock.json

package.json은 프로젝트의 정보와 프로젝트에서 사용중인 패키지의 의존성을 관리하는 파일입니다. dependencies에 프로젝트에 필요한 확장모듈이 적혀져있고, scripts에서 npm으로 실행시킬 수 있는 명령어를 정의할 수 있습니다.

자바 vs 자바스크립트

• 자바는 객체 지향 프로그래밍의 대표적인 언어로 클래스 기반의 객체지향언어입니다. 하지만 자바스크립트는 클래스기반이 아닌 프로토타입 기반의 언어입니다.

• 자바는 소스코드를 컴파일한 후에 실행을 하지만 자바스크립트는 실행하는 시점에서 필요한부분을 해석하여 실행합니다.

• 자바는 정적타입의 언어이고 자바스크립트는 동적타입의 언어입니다.

• 자바는 블록 단위의 스코프지만 자바스크립트는 함수 단위의 스코프를 가집니다. 하지만 ES6의 let과 const 키워드를 사용한다면 블록단위의 스코프를 사용할 수 있습니다.

내용 계속 추가중...