prepare_frontend_interview 저장소에 있는 자바스크립트 내용을 구어체 느낌으로 정리한 글입니다.
저장소에는 자세한 개념적인 부분이 많이 있어서, 학습이 필요하다면 위 저장소를 참고하시면 좋습니다.
잘못된 부분이나, 보충이 필요한 부분이 있다면 댓글로 조언 부탁드립니다.
최근 업데이트: 23/02/09

프로그래밍

프로그래밍이란 무엇인가요?

• 제 생각에는, 프로그래밍이란 문제상황을 이해하고 분석하여 도출한 해결 방법을 컴퓨터에게 실행을 요청하는 것이라고 생각합니다.

컴파일러, 인터프리터를 알고 계신가요?

• 저희가 컴퓨터에게 어떤 문제 해결을 요청할 때에는 프로그래밍 언어라고 하는 사람이 이해할 수 있는 문법을 사용하여 코드를 작성합니다.
• 하지만 컴퓨터는 기계어만 이해할 수 있기 때문에 우리가 작성한 자연어 상태의 코드를 이해할 수 없습니다.
• 그래서 프로그래밍 언어로 구성된 코드를 컴퓨터가 이해할 수 있는 코드로 변환하는 일종의 번역기를 컴파일러나 인터프리터 라고 부릅니다.

컴파일러와 인터프리터의 차이를 알고 계신가요?

• 둘 다 고수준 언어를 컴퓨터가 실행할 수 있는 기계어로 변환하는 기능을 가지고 있습니다.
• 컴파일러는 전체 코드를 한번에 컴퓨터가 실행할 수 있는 오브젝트 코드로 변환합니다.
• 반면 인터프리터는 코드를 각 행마다, 한번에 한 문장씩 기계어로 변환하여 실행합니다.
• 그래서 번역 속도 자체는 전체 코드를 번역해야 하는 컴파일러가 더 느리지만, 인터프리터를 사용할 경우 실행할 때 마다 변환 과정이 필요해서, 한번에 실행 파일을 생성하는 컴파일러보다 더 느립니다.

자바스크립트

자바스크립트의 특징을 알고 있나요?

• 먼저, 자바스크립트는 HTML, CSS, 그리고 웹 어샘블리와 함께 브라우저에서 실행할 수 있는 유일한 프로그래밍 언어입니다.
• 자바스크립트는 HTML, CSS 등과 함께 웹 브라우저에서 실행할 수 있는 프로그래밍 언어입니다.
• 그리고 자바스크립트는 동적 타입 언어로, 런타임 시 타입을 결정하는 특징이 있습니다.
• 마지막으로 자바스크립트는 컴파일을 거치지 않는 인터프리터 언어입니다. 자바스크립트 엔진인 V8엔진이 최적화를 위해 JIT (Just-In-Time) 컴파일러를 사용하지만, 기본적으로 자바스크립트는 인터프리터 언어로 사용됩니다.

변수

변수란 무엇인가요?

• 변수는 어떤 값을 저장하기 위한 메모리 공간이나 그 공간을 식별하기 위한 이름을 의미합니다.

식별자는 무엇인가요?

• 식별자는 변수나 함수, 클래스 이름과 같이 메모리 상의 어떤 값을 구별하여 식별할 수 있는 고유한 이름을 의미합니다.
• 식별자는 특정 값이 아닌 그 값이 존재하는 메모리 주소를 기억하고 있습니다.
• 자바스크립트에서 식별자는 문자, 숫자, 언더스코어, 달러기호를 사용하여 사용할 수 있습니다. 다만 식별자는 숫자로 시작할 수 없습니다.

변수 선언은 무엇인가요?

• 변수 선언은 변수를 사용하기 위해서 변수를 생성하는 것을 의미합니다.
• 변수를 선언하면 값을 저장하기 위한 메모리 공간을 확보하고, 선언된 변수의 이름과 해당 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비합니다.
• 자바스크립트에서 var, let, const 키워드를 통해 변수 선언을 할 수 있습니다.

호이스팅을 알고있나요?

• 런타임 이전에 자바스크립트는 실행 컨텍스트를 생성하는데, 실행 컨텍스트의 생성 단계에서 실행 할 코드를 읽어서 코드를 실행하는데 필요한 변수나 함수를 메모리에 등록합니다.
• 그래서 실제로 코드가 실행 될 때, 변수 선언이 어디에 존재하던지 상관없이 변수를 참조할 수 있습니다.
• 이걸 변수 선언이 코드의 가장 위로 올려보내진 것 처럼 보인다 해서 호이스팅이라고 부릅니다.

var 키워드에 대해 소개해주세요.

var

• var 키워드는 새로운 변수를 생성하기 위한 키워드입니다.
• var 키워드로 선언된 변수는 선언만 하고 초기화 하지 않아도, 기본적으로 자바스크립트 엔진에 의해 undefined라는 값으로 초기화 되는 특징이 있습니다.

var 키워드의 문제점

• 변수를 중복으로 선언할 수 있고,
• 블록 레벨이 아닌 함수 레벨 스코프를 가지고 있습니다.
• 그리고 변수 호이스팅에 의해 선언부가 참조되는 위치보다 아래에 있어도 참조할 수 있는 문제점이 있습니다.

let 키워드와 var 키워드의 차이점을 소개해주세요.

let

• let 키워드는 ES6에서 도입된 변수 선언을 위한 키워드입니다.

let 키워드의 특징

• let 키워드의 특징들은 var 키워드를 사용했을 때의 단점을 보완합니다.
• 먼저 변수의 중복 선언이 불가능합니다.
• 그리고 var 키워드의 함수 레벨이 아닌 블록 레벨 스코프를 가집니다.
• 또한 변수 호이스팅이 되지 않는 것 처럼 동작합니다. 만약 실제 선언부보다 앞에서 변수를 참조하려고 하면 참조 에러가 발생합니다. 왜냐하면 var 키워드는 선언과 동시에 undefined로 초기화 되는 반면, let 키워드는 선언과 초기화 단계가 분리되어 진행됩니다. 그래서 초기화 이전에 변수를 참조하게 되면 참조 에러가 발생합니다. 이를 TDZ 라고 하는 일시적 사각지대라고 부릅니다.
• 마지막으로 var 키워드를 통해 선언한 전역 변수가 전역 객체의 프로퍼티로 되는 것과 달리, let 키워드를 통한 전역 변수는 전역 객체의 프로퍼티로 등록되지 않습니다.

const 키워드를 설명해주세요.

const

• const 키워드는 let 키워드와 마찬가지로 ES6에서 추가된 문법으로, 상수를 선언하기 위한 키워드입니다.

const 키워드의 특징

• const 키워드는 선언과 동시에 초기화 해야 합니다.
• 또한 한번 초기화 된 값에 재할당을 할 수 없습니다.
• 그래서 const 키워드에 원시값을 할당 할 경우 상수처럼 사용할 수 있습니다.

네이밍 컨벤션을 소개해주세요.

• camelCase, snake_case, PascalCase, typeHungarianCase
• 카멜 케이스는 이름의 첫 글자는 소문자로 하고, 이후 단어의 첫 글자를 대문자로 표시하는 컨벤션입니다.
• 스네이크 케이스는 각 단어의 사이를 언더바로 구분하는 컨벤션입니다.
• 파스칼 케이스는 이름의 첫 글자를 포함한 모든 단어의 첫 글자를 대문자로 표시하는 컨벤션입니다.
• 헝가리안 표기법은 변수앞에 타입을 붙여서 작성하는 컨벤션입니다.

리터럴은 뭔가요?

• 리터럴은 사람이 이해할 수 있는 문자와 같은 약속된 기호를 사용해 값을 생성하는 표기법입니다.

데이터 타입

자바스크립트 데이터 타입을 다 말해주세요.

• 숫자, 문자열, 불린, undefined, null, 심볼, bigint 라는 7가지 타입이 있습니다.
• 7가지 타입을 제외한 객체, 함수, 배열 등은 모두 객체 타입으로 분류됩니다.

심볼 타입을 소개해주세요.

• 심볼 타입은 ES6에 추가된 문법으로, 변경 불가능한 원시 값의 타입입니다.
• 심볼 값은 다른 값과 중복되지 않는 유일한 식별자로 사용됩니다. 자바스크립트의 객체는 프로퍼티 키로 문자열과 심볼 타입만 허용해서 객체의 유일한 프로퍼티 키로 등록할 때에도 사용할 수 있습니다.

데이터 타입이 필요한 이유가 있나요?

• 타입에 따라 확보해야 하는 메모리 공간의 크기가 다릅니다.
• 그리고 값을 참조할 때에도 타입에 따라 한번에 읽어들여야 하는 메모리 공간의 크기가 다릅니다.
• 그리고 타입에 따라 읽어들인 메모리를 어떻게 해석할지도 다릅니다.

정적 타이핑과 동적 타이핑을 소개해주세요.

정적 타이핑은,

• 변수의 타입을 정하면 변경할 수 없고, 변수의 타입에 맞는 값만 할당할 수 있는 방식을 정적 타이핑이라고 합니다.
• C나 Java와 같은 정적 타이핑 언어는 변수를 선언할 때 변수의 타입을 함께 선언하는 명시적 타입 선언 방식을 사용하고, 컴파일 시점에서 타입 체크를 통해 타입 에러를 잡아낼 수 있습니다.

반면 동적 타이핑은,

• 자바스크립트에서 사용하는 방식으로, 변수 선언이 아닌 값의 할당으로 타입이 결정됩니다. 이를 타입 추론이라고 부릅니다.
• 값은 재할당을 통해 변할 수 있으므로, 변수의 타입이 동적으로 변할 수 있습니다. 이런 특징을 동적 타이핑이라고 합니다.

타입 변환 방식을 소개해주세요.

명시적 타입 변환은

• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환이라고 합니다.
• 예를 들어 toString() 을 사용하여 문자열로 변환하거나, Number(), String() 과 같은 함수를 사용하여 변환하는 방식 등이 있습니다.

암묵적 타입 변환은

• 개발자의 의도와 상관 없이, 표현식을 평가하는 과정에서 자바스크립트 엔진에 의해 타입이 자동으로 변환되는 것을 암묵적 타입 변환이라고 합니다.
• 예를 들어 숫자와 빈 문자열을 더하기 연산자로 더할 경우 그 결과가 문자열 타입으로 암묵적으로 변환되거나, 조건문 안에 있는 null이나 undefined가 false로 암묵적으로 변환하는 방식이 있습니다.

truthy, falsy는

• 자바스크립트는 암묵적 타입 변환을 가지고 있는데, 제어문의 조건식과 같은 불린 값으로 평가되어야 하는 컨텍스트에서 불린 값이 아닌 값을 암묵적으로 불린 값으로 변환합니다.
• true로 변환되는 값을 truthy, false로 변환되는 값을 falsy 라고 합니다.
• falsy 값은 false, undefined, null, 0, -0, NaN, 빈 문자열이 있습니다.

배열

자바스크립트 배열의 특징을 설명해주세요.

• 일반적으로 동일한 크기, 동일한 타입의 값이 메모리상에 연속적으로 나열된 자료구조를 배열이라고 합니다. 이를 밀집 배열이라고 합니다.
• 하지만 자바스크립트에서는 크기가 달라도 되고, 연속적으로 나열되지 않아도 되는 특징이 있습니다. 그래서 자바스크립트와 같은 배열을 희소 배열이라고 합니다.
• 자바스크립트 배열은 엄밀한 의미에서는 배열이라고 할 수는 없고, 일반적인 배열의 동작을 흉내낸 특수한 객체입니다.

배열 메소드를 소개해주세요.

• 배열 메소드는 크게 원본 배열을 직접 변경하는 메소드가 있고, 변경하지 않고 새로운 배열을 반환하는 메소드가 있습니다.
• ES5부터 추가된 메소드들은 대부분 원본 배열을 변경하지 않지만, 초기 배열 메소드는 원본 배열을 직접 변경하는 경우가 있습니다.
• 원본 배열을 변경하는 메소드로는 push, pop, shift, unshift, splice, sort, reverse 등이 있습니다.

고차함수는 무엇인가요?

• 고차함수는 함수를 인자로 전달받거나, 함수를 반환하는 함수를 고차함수라고 합니다.
• 자바스크립트에서 함수는 일급객체기 때문에 함수를 값으로 전달하거나, 함수 결과로 반환할 수 있습니다.
• 대표적으로 배열 오브젝트의 고차함수가 있습니다. 고차함수는 함수형 프로그래밍에 기반을 두고 있어서 원본 값을 변경하지 않고 새로운 결과값을 만들어 내는데 사용합니다.
• 예를 들어 forEach, map, filter, reduce, some, every, find 등이 있습니다.

forEach 와 map의 차이점을 설명해주세요.

• 둘 다 기본적으로 호출한 배열의 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복합니다.
• 차이점으로는 forEach는 언제나 undefined를 반환하지만, map은 순회별로 반복한 콜백 함수의 반환값으로 이루어진 배열을 반환합니다.

객체 리터럴

자바스크립트의 객체는 무엇인가요?

• 자바스크립트에서는 모든 것이 객체라고 불립니다. 원시 값을 제외한 모든 값이 객체입니다.
• 원시 타입은 변경 불가능한 하나의 값을 가지지만, 객체 타입은 여러개의 원시 값과 다른 객체 등을 포함한 변경 가능한 자료구조입니다.
• 자바스크립트의 객체는 키와 값으로 구성된 프로퍼티의 집합입니다.

함수와 메소드의 차이는 무엇인가요?

• 자바스크립트 객체 프로퍼티의 값으로는 모든 값이 들어갈 수 있습니다.
• 그래서 프로터티 값으로 함수를 저장할 수 있는데, 이때 일반 함수와 구분하기 위해 메소드라고 부릅니다.

객체를 생성하는 방법은?

• 객체 리터럴을 사용하거나,
• Object 생성자 함수를 사용합니다.
• 또는 생성자 함수를 사용합니다.
• Object.create 메소드로 생성하거나,
• ES6에서 추가된 클래스 문법을 활용하여 객체를 생성할 수 있습니다.

전역 객체란 무엇인가요?

• 런타임 이전에 자바스크립트 엔진에 의해 생성되는 특수한 객체입니다.
• 브라우저에서는 window 객체, node.js 환경에서는 global 객체를 가집니다.
• 전역 객체는 표준 빌트인 객체와 호스트 객체, 그리고 var 키워드를 이용해 선언한 전역 변수와 함수를 프로퍼티로 가지고 있습니다.

빌트인 객체와 호스트 객체에 대해 설명해주세요.

• 표준 빌트인 객체는 ECMAScript 사양을 정의된 객체를 의미합니다. 전역 객체에 포함되어 있어서 어플리케이션 전반에서 공통 기능으로 사용할 수 있습니다.
• 호스트객체는 ECMAScript 사양으로 정의되어 있지는 않지만, 자바스크립트를 실행하는 환경에서 추가로 제공하는 객체를 의미합니다. 예를 들어 브라우저 환경에서 필요한 Web API 를 위한 기능들이 여기에 포함됩니다.
• 표준 빌트인 객체와 호스트 객체를 제외한 나머지 객체를 사용자 정의 객체라고 합니다.

원시 값과 객체 비교

자바스크립트에서 객체 타입과 다른 타입을 구분하는 이유가 있나요?

• 객체 타입이 아닌 원시 타입은 모두 변경 불가능한 값입니다.
• 원시 값을 변수에 저장하면 확보된 메모리 공간에는 실제 값이 그대로 저장됩니다. 반면 객체 타입의 경우 변경 가능한 값이기 때문에 값이 저장된 메모리 공간의 주소가 변수에 저장됩니다.
• 그래서 원시 값을 다른 변수에 할당하면 원본 값이 복사되어 전달됩니다.
• 하지만 객체 값을 다른 변수에 할당하면 객체의 실제 값이 아닌 해당 값의 메모리 주소가 전달됩니다.
• 이러한 차이를 값에 의한 전달, 참조에 의한 전달이라고 합니다.

값에 의한 전달은 뭔가요?

• 원시 값을 가진 변수를 다른 변수에 할당하는 경우, 할당받는 변수에 할당하는 변수의 원시 값이 그대로 복사되어 전달됩니다.
• 이를 값에 의한 전달이라고 합니다.
• 값에 의한 전달의 경우 새로운 값이 복사되는 것이기 때문에 변수의 값을 변경해도 다른 변수에 영향을 주지 않습니다.

참조에 의한 전달은 뭔가요?

• 객체 타입의 경우 변할 수 있기 때문에 원시값처럼 사전에 메모리의 크기를 정해둘 수 없습니다. 그래서 변수는 실제 값이 저장된 메모리의 주소를 저장하고 있습니다.
• 그런 변수를 다른 변수에 할당하면, 할당받는 변수에 원본의 참조 값인 메모리 주소가 복사되어 전달됩니다.
• 이를 참조에 의한 전달이라고 합니다.
• 주소가 복사되기 때문에 두 변수는 모두 같은 오브젝트를 가리킬 수 있습니다.

함수

자바스크립트의 함수 정의 방법을 모두 소개해주세요.

• 함수 선언문, 함수 표현식, Function 생성자 함수, 그리고 ES6에서 추가된 화살표 함수가 있습니다.

함수 선언문과 함수 표현식의 차이를 설명해주세요.

• 함수 선언문은 맨 앞에 function 키워드를 사용해 바로 선언하는 방식이고, 함수 표현식은 어떤 변수에 function 키워드를 통해 생성한 함수를 할당하며 선언하는 방식입니다.
• 함수 선언문의 경우에는 함수 호이스팅을 받기 때문에 함수 선언부 이전에서 호출이 가능하지만, 함수 표현식의 경우에는 변수 호이스팅을 받기 때문에, var 키워드를 사용하여 선언하면 undefined, let이나 const를 사용하여 선언하면 참조 에러가 발생합니다.

즉시실행함수에 대해 설명해주세요.

• 즉시실행함수는 선언과 동시에 실행되는 함수입니다.
• 단 한번만 호출되기 때문에 다시 호출할 수 없고, 그래서 일반적으로 이름 없는 함수를 사용합니다.
• 즉시실행함수는 선언부를 그룹 연산자인 괄호로 감싸서 실행해야 합니다.

스코프

스코프란 무엇인가요?

• 스코프는 식별자가 유효한 범위를 의미합니다.
• 자바스크립트는 변수를 참조할 때 어떤 값을 참조할지를 스코프를 통해 결정합니다.

스코프의 종류를 설명해주세요.

• 스코프는 크게 전역 스코프와 지역 스코프로 나뉩니다.
• 전역 스코프는 코드의 가장 바깥 영역의 스코프이고, 지역 스코프틑 함수 내부와 같은 특정 지역 내부에서만 사용되는 스코프입니다.
• 전역 스코프는 어디에서든 참조할 수 있고, 지역 스코프는 해당 함수와 그 하위 함수에서 참조할 수 있스빈다.

렉시컬 스코프에 대해 설명해주세요.

• 스코프를 결정하는 방식에는 크게 정적 스코프와 동적 스코프가 있습니다.
• 정적 스코프는 함수가 선언되는 위치에 따라 스코프가 결정되는 방식이고, 동적 스코프는 함수가 호출되는 시점에서 스코프가 결정되는 방식입니다.
• 자바스크립트는 정적 스코프를 따르고, 이를 다른 말로 렉시컬 스코프라고 합니다.

전역 변수로 선언했을 때의 문제점이 있나요?

• 전역 변수를 사용하면 의도하지 않은 문제점이 발생할 가능성이 큰 문제점이 있습니다.
• 왜냐하면 전역 변수는 코드 어디서든 참조할 수 있고 할당할 수 있는 유효범위가 넓습니다. (암묵적 결합)
• 그리고 전역 변수는 생명 주기도 길기 때문에 오랫동안 변경될 수 있습니다.
• 또한 전역 변수를 참조하기 위해서는 스코프체인의 끝에 있기 때문에 검색 속도가 약간 느릴 수 있습니다.
• 마지막으로 자바스크립트는 하나의 전역 스코프를 공유하기 때문에 다른 파일에서 동일한 이름의 전역 변수를 사용한다면 예상하지 못한 결과를 얻을 수도 있습니다.

생성자 함수에 의한 객체 생성

생성자 함수는 뭔가요?

• 생성자 함수는 new 키워드와 함께 호출한 함수로, 객체를 생성하기 위해 사용합니다.
• 기본적으로 String, Number, Boolean 등 빌트인 생성자 함수를 가지고 있고, 개발자가 정의할 수도 있습니다.

객체 리터럴과 생성자 함수의 차이가 있나요?

• 객체 리터럴을 이용하면 하나의 객체만 생성할 수 있습니다. 그래서 비슷한 구조의 객체를 여러개 생성해야 하는 경우 비효율적입니다.
• 생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체 여러개를 효율적으로 생성할 수 있습니다.

생성자 함수를 통한 인스턴스 생성과정을 설명해주세요.

• 생성자 함수를 선언합니다.
• new 키워드를 통해 생성자 함수를 호출합니다.
• 함수가 실행되면서 this 바인딩을 한 인스턴스를 초기화합니다.
• 함수의 반환값으로 인스턴스를 반환합니다.

함수형 프로그래밍

일급 객체는 무엇인가요?

• 일급 객체는 이름 없는 리터럴로 생성할 수 있고, 변수-자료구조 등에 저장할 수 있어야 하고, 함수의 매개변수나 반환값으로 사용할 수 있어야 합니다.

일급 객체인 함수로는 어떤 걸 할 수 있나요?

• 일급 객체는 함수의 매개변수나 반환값으로 사용할 수 있습니다.
• 그래서 고차함수로써 사용할 수 있으므로 함수형 프로그래밍을 가능하게 합니다.

함수형 프로그래밍

• 함수형 프로그래밍은 외부 상태에 의존하거나 변경하지 않는 순수 함수를 통해 부수 효과를 줄이고 참조 투명성을 지키기 위한 프로그래밍 패러다임입니다.

순수 함수

• 어떤 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수라고 합니다.