자바스크립트/인터뷰

자바스크립트 모듈 (Module) 이란 무엇인가요?

모듈은 왜 필요한가요? 애플리케이션이 고도화되면, 스크립트 소스코드의 양도 증가합니다. 결국 많은 양의 소스코드를 효율적으로 관리하기 위해서 모듈이라는 개념이 필요해집니다. 초기의 자바스크립트는 간단한 스크립트를 지향했기 때문에 모듈을 문법 차원에서 지원하지 않았습니다. ES6 (ES2015) 이후부터 공식적으로 모듈 문법인 export, import 문법을 지원합니다. 이전에는 AMD, CommonJS, UMD 와 같은 시도가 있었습니다만 이제는 사라지는 추세입니다. 자바스크립트의 모듈이란 무엇인가요? 단지 하나의 .js 파일을 의미합니다. .js 파일 내부에서는 export 와 import 문법을 이용해 함수, 변수 등을 교환하여 사용할 수 있습니다. 가져올 js 파일이 모듈이라면 strict mod..

클로저 (Closure) 란 무엇인지 설명해주세요.

클로저란 무엇인가요? 함수에서 반환된 내부 함수가 이미 콜스택 영역에서 제거된 외부 함수 영역의 참조를 잃지 않고 기억하는 것을 말합니다. 함수 내부에 [[Scopes]] 라는 프로퍼티가 있기에 가능합니다. 이는 자바스크립트 코드로는 접근이 불가능하지만, 실행 컨텍스트에서의 Lexical Environment 를 기억하고 있습니다. function outer() { let count = 0; return function inner() { return count++; }; } const inner = outer(); console.log(inner()); // 0 console.log(inner()); // 1 console.log(inner()); // 2 클로저의 장점은 무엇인가요? 메모리 효율적이다...

호이스팅이란 무엇인가요?

호이스팅이란? 호이스팅이란 자바스크립트 엔진의 동작 매커니즘 중 하나로 변수, 함수, 클래스 선언을 코드 실행 전 최상단 스코프로 끌어올리는 것을 말합니다. 이해를 위해 끌어올린다는 표현을 사용하였으나 실제로 각 식별자들을 인식하는 과정입니다. 단, 선언(declaration) 만 끌어올릴 뿐 초기화(initialization) 를 끌어올리지는 않습니다. 코드 예제 var 의 경우 console.log(message); //output : undefined var message = "The variable Has been hoisted"; 선언이 끌어올려져 undefined 를 출력하고 있습니다. var message; console.log(message); message = "The variable H..

메모이제이션이란 무엇인가요?

메모이제이션이란? 메모이제이션은 프로그래밍 기법 중에 하나입니다. 이 기법을 캐시라고 부르는 사람들도 있습니다. 한 번 연산한 값을 메모리에 기억해두었다가 값이 필요할 때 연산을 다시 반복하지 않고 메모리에서 이미 연산된 값을 다시 꺼내쓰는 기법입니다. 만일 함수의 결과가 외부 요인에 영향을 받지 않는다면, 메모이제이션 기법을 적용할 수 있는 좋은 대상이 됩니다. 인자별 결과 값을 메모리에 저장해두면 나중에 같은 인자로 함수가 호출되었을 때 연산을 하지 않고 메모리에서 바로 값을 제공할 수 있습니다. 이렇게 함수의 결과 값을 메모리에서 가져오면, 비싼 컴퓨팅 자원을 아끼게 해주고 함수 실행 결과도 매우 빨리 나오게 됩니다. 주로 재귀 함수나 동적 프로그래밍에 이 기법이 많이 이용됩니다. 웹에서는 만일 매..

자바스크립트에서 URL 을 인코드하거나 디코드하는 방법에 대해서 알고 있나요?

자바스크립트 URL 인코드 디코드 방법 URL 인코드 디코드는 아래의 경우에 사용합니다. URL 파라미터에 특수문자가 있는 데이터를 넘길 때 ex) www.naver.com/search?keyword=%3A%2F%2F%5E%5E%3A%2F%2F 쿠키에 데이터를 담을 때 쿠키의 데이터의 기호가 쿠키의 양식에 맞지 않게 들어가 HTTP 헤더의 포맷을 깰 수 있으므로 인코딩하여 넘기는 것이 안전합니다. encodeURI(), decodeURI() 글로벌 오브젝트에 내장 메서드로 encodeURI() 와 decodeURI() 가 있습니다. 이 함수를 통해서 "full URL"을 인코드하거나 디코드할 수 있습니다. 가끔은 encodeURI() 와 decodeURI() 를 통해 인코딩 디코딩이 불가능한 경우도 있습..

자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?

Temporal Dead Zone (TDZ) 란? Temporal Dead Zone 은 줄여서 TDZ 라고 부르며 한국어로 해석하면 시간상 사각지대 정도로 해석할 수 있습니다. let 과 const 로 선언된 변수는 var 와 같이 호이스팅을 거치지만, 초기화 전까지는 TDZ 에 들어간 변수입니다. TDZ 에 들어가 있는 변수를 사용하는 경우, Reference Error 를 만나게 됩니다. console.log(a); // 레퍼런스 에러! TDZ 에 들어간 변수입니다. let a = 10; typeof 와 TDZ console.log(typeof a); // 레퍼런스 에러! let a = 10; typeof 연산자를 사용해도 마찬가지로 Reference Error 를 만나게 됩니다. 어휘적 스코프와 결..

switch 문에서 에러 없이 let 으로 변수를 재선언해보세요.

switch 문에서 에러를 내지 않고 변수를 재선언해보세요. let x = 1; switch (x) { case 0: let name; break; case 1: let name; // SyntaxError for redeclaration. break; } 위의 코드는 에러가 발생합니다. 왜일까요? let 키워드가 블록 스코프를 갖는데, 같은 블록 내에 중복된 이름의 식별자가 존재하기 때문입니다. 각 let name 이 존재하는 곳을 블록으로 나눠주면, 에러가 사라집니다. 이는 ES6(ES2015) 에서 추가된 문법입니다. let x = 1; switch (x) { case 0: { let name; break; } case 1: { let name; break; } }

let 키워드를 var 와 비교하여 설명해보세요

let 키워드와 var 키워드 let 은 변수를 선언할 때 사용합니다. 블록 스코프를 가집니다. 호이스팅이 됩니다. 단, 초기화 전까지는 Temporal Dead Zone 에 속합니다. var 도 변수를 선언할 때 사용합니다. 함수 스코프를 가집니다. 호이스팅이 됩니다. 초기화 전에도 참조가 가능하지만, undefined 라는 값을 가지고 있습니다. 함수 스코프의 특징 function foo() { for (var a = 0; a < 10; a++) { console.log(a); } console.log(`outside: ${a}`); } var 로 for 문을 작성하고 외부에서 a 를 참조해도 참조가 가능합니다. 이는 함수 스코프라는 특성 때문입니다. 블록에 갇혀있더라도 함수 내에서는 변수를 계속 참..

pure function (순수 함수) 란 무엇인가요?

순수함수란? 아래의 조건을 만족하는 함수입니다. 사이드 이펙트가 없어야 합니다. 몇번을 호출해도 반환 값이 동일해야 합니다. 전역변수를 건들거나, DOM 을 편집하거나, console.log 처럼 로그를 찍거나, new Date() 와 같이 시간에 의존해서도 안됩니다. 현대 프로그래밍에서 불변성(immutability)이 주목받으며 함께 부각된 개념 중 하나입니다. 순수함수의 장점은? 유닛테스트에 용이합니다. 외부 환경에 의존하지 않기 때문에 코드를 테스트하기 굉장히 쉬워집니다. 신뢰할 수 있습니다. 실행 시점이나 실행 컨텍스트에 따라서 결과가 변경되지 않기 때문에 신뢰할 수 있습니다. SRP(Single Responsibility Principal) 를 지키기 쉽습니다. 함수를 순수하게 구성하다보면, ..

Currying function (커링 함수) 이란 무엇인가요?

Currying function 이란? 수학자 Haskell Curry 의 이름을 딴 함수입니다. 여러 개의 인자를 받는 함수를 단 하나의 인자만 받는 함수(unary) 로 만드는 과정을 커링(Currying) 이라고 합니다. 커링을 적용하려면, 여러 인자를 받는 함수(n-ary) 를 하나의 인자만 받는 함수 (unary) 로 변환해야 합니다. 커링 기본 개념 예제 const multiArgFunction = (a, b, c) => a + b + c; console.log(multiArgFunction(1, 2, 3)); // 6 const curryUnaryFunction = (a) => (b) => (c) => a + b + c; curryUnaryFunction(1); // returns a fun..

unary function 이란 무엇인가요?

unary function 이란? 인자를 단 하나만 받는 함수를 말한다. const unaryFunction = (a) => a + 10;

Higher Order Function (고차함수) 란 무엇인가요?

Higher Order Function (HOF) 란 무엇인가요? 한국어로는 '고차함수' 라고 표현하며, 아래의 두가지 조건 중 하나라도 만족하면 고차함수라고 할 수 있습니다. 함수를 파라미터로 받는다. 함수를 반환한다. 고차함수를 사용하는 이유는 무엇인가요? 고차함수는 함수형 프로그래밍에 뿌리를 두고 있습니다. 함수형으로 코드를 작성하는데 필수적입니다. 함수형 프로그래밍에서는 사이드이펙트를 피하고 불변성을 지켜 에러를 최소화합니다. 그렇다면 함수형 프로그래밍의 장점은 무엇인가요? 보통 하나의 함수가 다른 함수에 의존하지 않아 코드를 변화시킬 때 사이드 이펙트에 대한 걱정이 덜합니다. 외부 요소에 의존하지 않아, 작성한 함수가 매번 같은 동작을 보장받습니다. 상태가 없다는 것은 동시성 프로그래밍에서 생기..