[FE 면접질문] Javascript (1)

프로그래밍

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

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

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

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

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

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

 

자바스크립트

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

• 자바스크립트는 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 : 헝가리안 표기법은 변수 앞에 타입을 붙여서 작성하는 컨벤션이다.

리터럴은 무엇인가요?

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

 

데이터 타입

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

• String, Number, Boolean, undefined, null, Symbol, bigint 라는 7가지 타입이 있다.
• 7가지 타입을 제외한 객체, 배열, 함수 등은 모두 객체(object) 타입으로 분류된다.

symbol 타입을 소개해주세요.

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

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

• 타입에 따라 확보해야 하는 메모리 공간의 크기가 다르다.
• 그리고 값을 참조할 때에도 타입에 따라 한 번에 읽어들여야 하는 메모리 공간의 크기가 다르다.
• 타입에 따라 읽어드린 메모리를 해석하는 방법도 다르기 때문이다.

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

정적 타이핑

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

동적 타이핑

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

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

명시적 타입 변환

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

암묵적 타입 변환

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

truthy / falsy

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

 

배열

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

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

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

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

고차함수는 무엇인가요?

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

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

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

 

객체 리터럴

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

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

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

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

객체를 생성하는 방법은?

• 객체 리터럴을 사용한다.
• Object 생성자 함수를 사용한다.
• 생성자 함수를 사용한다.
• Object.create 메소드를 생성한다.
• ES6에서 추가된 class 문법을 활용하여 객체를 생성한다.

전역 객체란 무엇인가요?

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

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

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

 

원시 값과 객체 비교

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

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

값에 의한 전달은 뭔가요?

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

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

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

 

함수

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

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

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

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

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

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

 

스코프

스코프란 무엇인가요?

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

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

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

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

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

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

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

 

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

생성자 함수는 뭔가요?

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

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

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

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

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

 

함수형 프로그래밍

일급 객체는 무엇인가요?

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

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

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

함수형 프로그래밍

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

---

Reference

시리즈 | 💬 개발자 면접 - shyuuuuni.log