프론트엔드 면접 스터디 4주차 - JavaScript(1)

Hyeon·2024년 5월 4일

JavaScript

면접스터디

목록 보기

5/6

프로그래밍이란 뭐라고 생각하나요?

0과 1밖에 모르는 컴퓨터에게, 원하는 바를 실행할 수 있도록 상세하게 요구사항을 설명하는 작업. 일종의 커뮤니케이션. 그 결과물이 바로 코드다.

컴파일러는 뭐고 인터프리터는 뭔가요? 🔥

컴파일러와 인터프리터는 모두 번역기다.

요구사항을 전달하기 위해, 사람이 이해할 수 있는 프로그래밍 언어로 프로그램을 작성한다. 그러면 그 작성된 프로그램을 컴퓨터가 이해할 수 있는 기계어로 변환하는데, 이 때 사용하는 것이 번역기다.

컴파일러란?

코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드를 변환한 후 실행한다.
실행 파일을 생성한다. (ex a.out)
컴파일 단계와 실행 단계가 분리되어있다 → 코드 실행 속도가 빠르다.

인터프리터란?

코드가 실행되는 단계인 런타임에 문 단위로 한줄씩 중간 코드인 바이트 코드로 변환한 후 실행한다.
실행 파일을 생성하지 않는다. (브라우저에서 바로 실행)
인터프리트 단계와 실행 단계가 분리되어있지 않고, 한줄씩 변환하고 즉시 실행한다. → 코드 실행 속도가 비교적 느리다.

❓ 머신코드랑 바이트코드의 차이

머신 코드: cpu가 바로 실행할 수 있는 기계어

바이트 코드: 특정한 하드웨어가 가상 머신에서 실행하도록 만든 바이너리 코드

대부분의 자바스크립트 엔진은? 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결했다. 인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화한다.

💡 자바스크립트는?

자바스크립트란 🔥

웹 페이지에서 동적이고 인터랙티브한 컨텐츠를 만들기 위해서 주로 사용하는 인터프리터 스크립트 언어

자바스크립트의 특징은 뭐가 있나요?

웹 브라우저에서 동작하는 유일한 언어
- 물론 서버에서도 실행 가능하다
이벤트 중심의 언어 (event driven)
OOP 지원
비동기 프로그래밍 가능
넓은 라이브러리와 프레임워크 생태계 보장
명령형
함수형
프로토타입 기반 객체 지향 프로그래밍

강점

HTML/CSS와 완전히 통합할 수 있음
간단한 일은 간단하게 처리할 수 있게 해줌
모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

변수 🔥

변수란 무엇인가요?

데이터를 저장한 메모리 공간을 식별하기 위해 붙인 이름
- 컴퓨터는 cpu를 사용해 연산하고 메모리를 사용해 데이터를 기억한다.
- 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다.
- 메모리 셀 하나의 크기는 1바이트(8비트)
- 변수는 번역기에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다.
- 변수에 값을 저장 → 할당(대입, 저장)
- 변수에 저장된 값을 읽어들이는 것 → 참조
- 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
let, const, var라는 키워드로 선언 가능하다.

식별자란 무엇인가요? 🔥

식별자란, 어떤 값(변수, 함수 등…)을 구별해서 식별할 수 있는 고유한 이름
식별자는 어떤 값이 저장되어있는 메모리 주소를 기억한다.
변수, 함수, 클래스 등의 이름은 모두 식별자다. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

변수를 선언한다는 것은 어떤 것을 의미하나요?

값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
변수를 사용하려면 반드시 선언이 필요하다 → var, let, const
확보된 메모리 공간은 자바스크립트에 의해 자동으로 undefined라는 값으로 초기화된다.

+) 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 변수 이름과 변수 값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리된다.

var 키워드는 뭔가요? var 키워드의 문제점은 무엇이 있나요? 🔥

var는 let, const(es6)와 함께 변수를 선언하는 키워드다.

특징

var 키워드로 선언한 전역 변수는 전역 객체 window 의 프로퍼티다.

문제점

함수 레벨 스코프를 가진다 (↔ 블록 레벨 스코프)
- 함수의 코드 블록만을 지역 스코프로 인정하기 때문에, 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내(ex for문)에서 선언해도 모두 전역 변수가 된다.
변수 중복 선언을 허용한다
- 값이 덮어 씌워진다
선언하기 전 사용이 가능하다. (호이스팅)

호이스팅이 뭔가요? 🔥🔥

호이스팅이란? 변수의 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 것
- 즉, 변수의 선언문 보다 먼저 변수를 참조해도 참조가 가능한 현상
가능한 이유? 변수 선언은 런타임(소스 코드를 한 줄 씩 실행하는 시점)이 아니라 그 이전 단계인 소스 코드의 평가 과정에서 먼저 실행된다.
- 소스 코드의 평가 과정에선 모든 선언문(var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자)을 찾아내 먼저 실행된다.

let 키워드는 var 키워드와 어떤 점이 다른가요? 🔥🔥

const 키워드는 어떤 특징이 있나요? 🔥

let과 const 모두 es6에서 도입된 키워드로, var의 문제점인 중복 선언 가능, 함수 레벨 스코프 등을 극복하기 위해 등장했다.

let과 const의 공통점

es6에서 도입된 키워드
같은 스코프 내에서 중복 선언 불가 (문법 에러)
블록 레벨 스코프
- 모든 코드 블록을 지역 스코프로 인정한다
선언단계와 초기화단계가 분리되어 진행된다
- 런타임 전에 선언 단계가 실행되었으나, 초기화 단계는 변수 선언문에 도달했을 때 실행됨
- 초기화 전에 접근하면 참조 에러가 뜬다.

let과 const의 차이점

const는 대부분 상수를 선언하기 위해서 사용

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야함

Const는 재할당 금지

원시값을 할당한 경우 값을 변경할 수 없지만… const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.
const 키워드는 재할당을 금지할 뿐 “불변”을 의미하지 않는다.

TDZ 🔥🔥

Temporary Dead zone
일시적 사각지대라는 뜻
스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 공간 (= 선언은 되었으나 초기화가 되지 않아 참조 에러를 뱉음)
let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시점 (변수 선언문)까지 변수를 참조할 수 없다.

식별자 네이밍 규칙은 어떤 것들이 있나요?

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(), 달러 기호($)를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 언더스코어(), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
예약어는 식별자로 사용할 수 없다.

자바스크립트 예약어

ES5부터 식별자를 만들 때 유니코드 문자12를 허용하므로 알파벳 외의 한글이나 일본어 식별자도 사용할 수 있다. 하지만 알파벳 외의 유니코드 문자로 명명된 식별자를 사용하는 것은 바람직하지 않으므로 권장하지 않는다.
자바스크립트는 대소문자를 구별하므로 대소문자가 다르면 다른 변수

네이밍 컨벤션은 어떤 것들이 있나요?

카멜 케이스 firstName
스네이크 케이스 first_name
파스칼 케이스 FirstName
헝가리언 케이스 strFirstName //type + identifier

→ JS에서는 변수나 함수의 이름에는 카멜 케이스 사용, 클래스의 이름에는 파스칼 케이스를 사용한다.

리터럴이 뭔가요?

리터럴이란? 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

배열, 불리언, 부동소수점, 숫자, 객체, 정규식, 문자열

ex) 문자열을 생성하고 싶다면? 따옴표로 묶는다. 객체를 생성하고 싶다면? 중괄호로 묶는다.

데이터 타입 🔥

데이터 타입의 종류는 어떤 것들이 있나요? 🔥

크게 원시 타입과 객체 타입으로 나뉜다.

원시타입에는 숫자, 문자열, 불리언, undefined, null, 심벌타입 총 6가지가 있다.

객체타입에는 객체, 함수, 배열 등이 있다. 모두 객체다.

→ 숫자 타입 1과 문자열 타입 ‘1’은 다른 값. 메모리 공간의 크기도, 메모리에 저장되는 2진수도 다르며, 읽어들여 해석하는 방법도 다르다.

💡 undefined vs null

undefined는 초기화만 된 경우(정의되지 않았을때), null은 의도적으로 값이 없을 때 사용

심벌 타입은 뭐죠?

ES6에 추가된 변경 불가능한 원시타입이다.

다른 값과 중복되지 않는 유일무이한 값이다.

주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

Symbol 함수를 호출해 생성한다. 생성된 심벌 값은 외부에 노출되지 않는다.

💡 언제 사용할까?

데이터 타입은 왜 필요할까요? 🔥

자바스크립트 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보하고 참조할 때도 얼마만큼의 메모리 공간을 읽을지, 어떻게 해석할지 정하기 때문이다.

❓ 근데 쟤가 숫자인지 어케 아는거지?

정적 타이핑이 뭔가요?

변수를 선언할 때 변수의 데이터 타입을 사전에 선언하는 것. 명시적 타입 선언이라고도 한다.

컴파일 시점에서 타입을 체크하고 타입이 일치하지 않으면 에러를 발생시킨다. 이를 통해 타입의 일관성을 유지하고 런타임시에 발생하는 오류를 줄인다.

C나 자바, 코틀린, 고같은 언어가 정적 타입 언어에 해당한다.

동적 타이핑이 뭔가요?

변수를 선언할 때 변수의 타입을 정하는 게 아닌, 할당될 때 변수의 타입이 결정되는 것. (타입 추론) 그리고 재할당에 의해 언제든지 타입이 변경된다. 즉, 미리 변수의 데이터 타입을 선언하지 않고 어떤 데이터 타입이든 자유롭게 할당이 가능하다.

그러므로 값의 변경에 의해 타입이 언제든지 변경될 수 있기 때문에, 유연성은 높지만 신뢰성은 떨어진다는 단점이 있다. ex) 숫자 타입의 변수라고 예측했으나 문자열 타입의 변수가 되어있을 수도 있다.

자바스크립트, 파이썬, php, 루비가 동적 타입 언어에 해당한다.

타입변환과 단축 평가 🔥

명시적 타입 변환이 뭔가요?

개발자가 의도적으로 값의 타입을 변환하는
= 타입 캐스팅
↔ 암묵적 타입 변환, 타입 강제 변환

명시적 타입 변환 함수를 예를 들어볼 수 있나요?

문자열 타입으로 변환

String(1) 
(1).toString()

숫자 타입으로 변환

Number('0')
parstInt('0')
parseFloat('10.53')

불리언 타입

Boolean('')

암묵적 타입 변환이 뭔가요?

자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다.

ex)

'10' + 2 //'102'
5 * '10' // 50
!0 //true

truthy / falsy 한 값이 뭔가요?

자바스크립트의 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적으로 타입 변환한다.

if ('') //falsy
if (true) //truthy
if (0) //falsy
if ('str') //truthy
if (null) //falsy

불리언 타입이 아닌 값을 Truthy값 또는 Falsy한 값으로 구분한다.

불리언 값으로 평가되어야 할 문맥에서 Truthy값은 true로, Falsy값은 false로 암묵적 타입 변환된다.

Falsy 값

Untitled

Truthy 값= 그 외 나머지

💡 객체나 배열은 메모리 주소가 들어가 있으니까 빈 배열이나 빈 객체도 Truthy 하다?

💡 단축 평가

배열 🔥

자바스크립트의 배열은 자료구조의 배열과 같나요?

자료 구조에서 말하는 배열
- 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조 (=밀집 배열)
- 각 요소가 동일한 데이터의 크기를 가진다.
- 빈틈없이 연속적으로 이어져 있다. → 인덱스를 통해 단 한 번의 연산으로 임의의 요소에 접근할 수 있다 → 빠르다! (시간 복잡도 O(1))
- 하지만 특정한 요소를 검색하는 경우 앞에서부터 탐색한다 (시간 복잡도 O(n))
- 배열에 요소를 삽입하거나 삭제하는 경우 요소를 이동시켜야 함
JS의 배열
- 배열의 요소를 위한 메모리 공간은 동일한 크기를 갖지 않아도 된다 (여러 데이터 타입이 담긴 배열 가능)
- 연속적으로 이어져있지 않을수도 있다 (=희소 배열)
- 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.
- 자바스크립트 배열의 인덱스는 프로퍼티의 키, 요소는 프로퍼티 값이다.
- 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반 배열보다는 느리다.
- 검색이나 요소 삽입, 삭제는 빠르다.

배열의 메서드는 어떤 종류가 있나요?

Array.isArray
- 배열인지 확인
- true/false를 리턴
Array.prototype.indexOf
- 요소를 검색하여 해당 인덱스 리턴
- 첫번째로 검색된 요소의 인덱스 리턴
- 존재하지 않으면 -1 리턴
Array.prototype.push (부수효과 ⭕)
- 원본 배열에 마지막 요소 추가
- length 값을 리턴
Array.prototype.pop (부수효과 ⭕)
- 원본 배열에 마지막 요소 제거
- 제거한 요소를 리턴
- 빈 배열이면? undefined 리턴

→ pop 메서드와 push 메서드를 사용하면 스택을 쉽게 구현 가능

Array.prototype.unshift (부수효과 ⭕)
- 인수로 전달받은 모든 값을 원본 배열의 맨 앞에 추가
- length 리턴
Array.prototype.shift (부수효과 ⭕)
- 원본 배열에서 첫번째 요소 제거하고 제거한 요소 리턴

→ shift 메서드와 push 메서드를 사용하면 큐를 쉽게 구현 가능

Array.prototype.concat
- 인수로 전달된 값들을 배열의 마지막 요소로 추가
- 새로운 배열을 반환

→ push와 unshift 메서드는 concat 메서드로 대체 가능!

Array.prototype.splice (부수효과 ⭕)
- 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우
- 원본 배열을 직접 변경

start
배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.

deleteCount Optional
배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

item1, item2, <em>...</em> Optional
배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

Array.prototype.slice

인수로 전달된 범위의 요소들을 복사하여 배열로 반환

새로운 배열을 반환

start： 복사를 시작할 인덱스다. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 예를 들어, slice(-2)는 배열의 마지막 두 개
의 요소를 복사하여 배열로 반환한다.
end： 복사를 종료할 인덱스다. 이 인덱스에 해당하는 요소는 복사되지 않는다. end는 생략 가능하며 생략 시 기본값은 length 프
로퍼티 값이다.

Array.prototype.join (부수효과 ⭕)
- 원본 배열의 모든 요소를 문자열로 변환한 후 구분자로 연결한 문자열을 반환한다
- 기본 구분자는 콤마다
- 변경된 배열이 리턴된다
Array.prototype.reverse (부수효과 ⭕)
- 원본 배열의 순서를 반대로 뒤집는다
- 변경된 배열이 리턴된다
Array.prototype.fill (부수효과 ⭕)
- 원본 배열을 인수로 전달받은 값으로 채운다
```
두 번째 인수로 요소 채우기를 시작할 인덱스를 전달할 수 있다.
세 번째 인수로 요소 채우기를 멈출 인덱스를 전달할 수 있다.
```
  → Array.from 메서드를 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 요소값을 만들면서 배열을 채울 수 있다.
  
  Array.from() - JavaScript | MDN

Array.prototype.includes
- 배열 내에 특정 요소가 포함되어있는지 확인한다
- true/false 리턴
- 두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있다. 두 번째 인수를 생략할 경우 기본값 0이 설정된다.

→ 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환하는 indexOf 메서드를 사용하여도 배열 내에 특정요소가 포함되어 있는지 확인할 수 있다. 하지만 indexOf 메서드를 사용하면 반환값이 -1 인지 확인해 보아야 하고 배열에 NaN이 포함되어 있는지 확인할 수 없다는 문제가 있다

Array.prototype.flat
- 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
- 기본값은 1이다. 인수로 Infinity를 전달하면 중첩 배열 모두를 평탄화한다.

고차 함수에 대해서 아나요?

고차 함수(Higher Order Function, HOF)는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.

→ 자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 인수로 전달할 수 있으며 반환할 수 있다. 함수형 프로그래밍은 순수함수와 보조함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. (조건문이나 반복문은 로직의 흐름을 방해하고, 변수는 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있기 때문)

고차 함수의 예시
- Array.prototype.sort
- Array.prototype.forEach
- Array.prototype.map
- Array.prototype.filter
- Array.prototype.reduce
- Array.prototype.some
- Array.prototype.every
- Array.prototype.find
- Array.prototype.findIndex
- Array.prototype.flatMap

forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?

forEach
- for문을 대체할 수 있는 고차 함수로, 자신의 내부에서 반복문을 실행한다.
- 반복문을 통해 자신을 호출한 배열을 순회하면서 콜백함수를 전달받아 반복 호출한다.
- 원본 배열을 수정하지 않고, 반환값은 undefined
map
- 자신을 호출한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출
- 콜백 함수의 반환 값들로 구성된 새로운 배열을 반환한다. 원본 배열을 변경되지 않는다.
공통점
- 둘 다 반복문을 돌면서, 콜백 함수를 호출한다.
- 원본 배열을 변경하지 않는다.
- 세 개의 인자를 받는다. (요소값, 인덱스, this)
차이점
- forEach는 실행만 한다.
- map은 실행한 뒤 나온 반환값으로 구성된 새로운 배열을 반환한다.

객체 리터럴 🔥

자바스크립트에서 객체란 뭘까요?

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.
객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다.
원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다.
원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등)은 모두 객체다.
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다 → 함수도 프로퍼티 값이 될 수 있는데, 이를 메서드라고 부른다. → 객체는 객체의 상태를 나타내는 값(프로퍼티)과 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있다. (객체지향 프로그래밍)

함수와 메서드의 차이점에 대해 알고 계신가요?

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라고 부른다.

→ 메서드는 객체에 묶여있는 함수!

메서드 내부에서 사용한 this 키워드는 객체 자신을 가리키는 참조 변수다.

자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스 (es6)

원시 값과 객체 비교 🔥

동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까요? 🔥

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입)은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

차이점

변경 가능 vs 불가능: 원시 값은 변경 불가능하나 객체는 참조 타입이므로 (메모리 주소를 저장) 변경 가능한 값이다.
실제 값을 저장 vs 참조 값을 저장 : 원시 값을 변수에 할당하면 변수에는 실제 값을 저장하지만 객체를 변수에 할당하면 변수에는 참조 값(메모리 주소)이 저장된다
값에 의한 전달 vs 참조에 의한 전달

값에 의한 전달이 뭔가요? 🔥

원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다.

이를 값에 의한 전달 pass by value라고 한다.

그러므로 변수 a에 10을 할당한 뒤, 이를 a = b 이런식으로 할당했을 때, a의 값이 변하거나 b의 값이 변하더라도 서로 영향을 미치지 않는다. 값 자체가 복사되었기 때문이다.

참조에 의한 전달이 뭔가요? 🔥

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.

이를 참조에 의한 전달 pass by reference이라 한다.

그러므로 변수 a에 객체 값을 할당한 뒤, 이를 a = b 이런식으로 할당했을 때

함수 🔥

자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?

함수 선언문 function add(x, y){}
- 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석된다.
- 함수 선언문은 표현식이 아닌 문이기 때문에 변수에 할당할 수 없다.
- 함수 선언문에서는 함수 이름을 생략할 수 없다
함수 표현식 var add = function (x, y){}
- 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다 = 함수 표현식
Function 생성자 함수 var add = new Function(’x’, ‘y’, ‘return x + y’)
- Function 생성자 함수에 new를 붙여서 호출하면 함수 객체를 생성해서 반환한다.
- new 연산자 없이 호출해도 결과는 동일하다?
- 일반적으로 쓰는 방식은 아님
  
  Function - JavaScript | MDN
화살표 함수 (es6) var add = (x, y) ⇒ x + y
- function 키워드 대신 화살표 ⇒ 를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.

💡 function 과의 차이점? 화살표 함수의 콜백 함수의 내부는 this가 상위 스코프를 가리킨다. 하지만 function의 this 전역 객체를 가리킴

함수 선언문과 함수 표현식은 어떤 차이가 있나요?

함수 리터럴의 함수 이름은 생략할 수 있다
- 함수 이름이 생략된 함수를 익명 함수라고 한다.
- 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적
- 함수 표현식에 기명 함수가 들어가 있다면, 기명 함수로 호출 불가

Untitled

함수 선언문으로 만든 함수는 함수 선언문 이전에 함수를 호출할 수 있다.
- 하지만 함수 표현식으로 만든 함수는 호출이 불가능하다.
- why? 선언문으로 만든 함수와 표현식으로 만든 함수의 생성 시점이 다르기 때문이다.

즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요

함수 정의와 함께 즉시 호출되는 함수. 단 한번만 호출되고 다시 호출할 수 없다

Immediately lnvoked Function Expression

함수 이름이 없는 익명 함수를 사용하는 것이 일반적

스코프를 줄이기 위해서 사용한다.

스코프 🔥

스코프가 뭔가요? 🔥🔥

식별자가 유효한 범위다.

스코프에는 어떤 종류가 있죠? 🔥

변수는 자신이 선언된 위치(전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정된다.

전역 스코프
- 전역이란 코드의 가장 바깥 영역
- 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다
- 전역 변수는 어디서든지 참조할 수 있다.
지역 스코프
- 지역이란 함수 몸체 내부.
- 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
- 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

💡 스코프 체인

→ 자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 참조한다.

함수 레벨 스코프
- 코드 블록이 아닌 함수에 의해서만 지역 스코프만 생성된다.
- var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.
블록 레벨 스코프
- 코드 블록에 의해서 지역 스코프가 생성
- if, for, while, try/catch도 지역 스코프로 인정

렉시컬 스코프를 아나요? 안다면 렉시컬 스코프는 무엇을 의미하나요? 🔥

동적 스코프
- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
렉시컬 스코프(정적 스코프)
- 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.
- 자바스크립트는 렉시컬 스코프를 따른다.
- 함수 객체는 자신이 정의 될 때 결정된 상위 스코프를 기억한다. 즉, 함수의 상위 스코프가 언제나 자신이 정의된 스코프다.
- 렉시컬 스코프는 클로저와 깊은 관계가 있다.

→ 그러므로 아무리 호출할 때 그 안의 변수의 값을 바꾸려해도 바뀌지 않음

전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까요?

암묵적 결합
- 모든 코드가 전역 변수를 참조하고 변경할 수 있기 때문에 의도치 않게 상태가 변경될 수 있다.
긴 생명 주기
- 전역 변수는 생명 주기가 길기 때문에 메모리 리소스도 오랜 기간 소비한다.
- 도달하지 않는 변수는… 가비지 컬렉터가 지워버림. 끝날 때까지 계속 도니까 문제 생김
- 특히 var로 선언한 변수는 중복 선언이 가능하기 때문에 의도치 않게 재할당도 가능
스코프 체인 상에서 종점에 존재
- 변수를 검색할 때 전역 변수가 가장 마지막에 검색되기 때문에, 검색 속도가 가장 느리다.
네임 스페이스 오염
- 자바스크립트의 경우… 파일이 분리되어있다고 해도 하나의 전역 스코프를 공유하기 때문에 원치 않게 값이 변경되거나, 중복 선언되거나 할 수 있음

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

생성자 함수가 뭔가요?

new 연산자와 함께 호출하여 객체를 생성하는 함수.

생성자 함수에 의해 생성된 객체를 인스턴스라고 한다.

객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?

객체 리터럴로 객체를 생성하면 프로퍼티 구조가 동일함에도 매번 같은 프로퍼티와 메서드를 써줘야한다. 생성자 함수를 사용하면 객체의 틀을 만들어놓고, 같은 구조의 객체를 여러개 생성할 수 있다.

생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?

function Circle(radius) {
// 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.
// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
// 3. 암묵적으로 this를 반환한다.
// 명시적으로 원시 값을 반환하면 원시 값 반환은 무시돠고 암묵적으로 this가 반환된다.
return 100;
}
// 인스턴스 생성. Circle 생성자 함수는 명시적으로 반환한 객처/를 반환한다.
const circle = new Circle(l);
console.log(circle); // Circle {radius: 1, getDiameter: /}

인스턴스 생성과 this 바인딩
1. 암묵적으로 빈 객체가 생성된다.
2. this에 바인딩 된다. → 생성자 함수 내부의 this가 생성자 함수가 생성할 인스턴스를 가리킴
3. 이 처리는 런타임 이전에 실행
인스턴스 초기화
1. this에 바인딩되어있는 인스턴스를 초기화한다.
  1. 인스턴스에 프로퍼티나 메서드 추가
  2. 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당
인스턴스 반환
1. 초기화가 끝나면, 암묵적으로 this를 반환한다.

함수와 일급 객체 🔥

일급 객체가 뭔가요?

다음의 조건을 만족하는 객체

무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능하다.
변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
함수의 매개변수에 전달할 수 있다.
함수의 반환값으로 사용할 수 있다.

자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있나요?

일반 객체와 같이 함수의 매개변수에 전달이 가능하다.
함수의 반환값을 사용할 수 있다.

→ 함수형 프로그래밍이 가능해지는 자바스크립트 장점 중 하나!

꼬리 질문) 함수형 프로그래밍이 뭔가요? 🔥

순수함수와 보조함수의 조합을 통해 외부 상태를 변경하는 부수효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임

꼬리 질문) 순수 함수가 뭔가요? 일반 함수와는 어떤 차이가 있죠? 🔥

부수 효과가 없는 함수

프로토타입 🔥

객체지향 프로그래밍은 무엇을 의미하나요? 🔥

객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
객체가 하나의 역할과 책임을 두게 만듦.
ex) 사람을 객체로 표현한다고 할때, 이름 성별 나이 신장 등을 프로퍼티로 설정하면, 특정한 사람을 다른 사람과 구별하여 인식이 가능하다.
객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다.

↔ 절차 지향 프로그래밍

객체지향 프로그래밍의 특징에 대해 말해볼 수 있나요? 🔥

추상화
1. 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것. (ex 사람의 속성 중에 이름, 주소만 가져오기)
캡슐화
1. 내부 데이터를 직접 조작하는 게 아니라,
상속
1. 부모의 값을 내려받는 것
다형성
1. 부모의 틀만 가지고 개조할 수 있는 것
2. 다양한 형태를 만들어내는 것

자바스크립트는 객체지향 프로그래밍 언어인가요?

자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어다.

💡 클래스를 안쓰니까?

프로토타입이 뭔가요?

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

프로토타입 객체란 객체 간 상속을 구현하기 위해서 사용되는데, 어떤 상위 객체의 상위 객체 역할을 하는 객체로서, 다른 객체에 공유 프로퍼티를 제공한다.

프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

모든 객체는 하나의 프로토타입을 받는다. 모든 프로토타입은 생성자 함수와 연결되어있다

ex) 객체는 object 생성자 함수와 연결되어있다.

이처럼 모든 객체는 proto 접근자 프로퍼티를 통해 프로토타입을 가리키는 [[Prototype]] 내부 슬롯에 접근할수 있다.

ex) JavaScript의 Array 객체는 Array.prototype을 프로토타입으로 가지고 있습니다. 따라서 Array 객체는 Array.prototype에 정의된 메소드와 속성을 상속받아 사용할 수 있습니다.

프로토타입은 객체를 생성할 때 그 객체의 기반이 되는 원형.

💡 프로토타입 링크

strict mode 🔥

strict mode가 뭔가요?

ES5부터 strict mode（엄격 모드）가 추가되었다. strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

strict mode를 통해 무엇을 예방할 수 있죠?

암묵적 전역
변수, 함수, 매개변수 삭제
매개변수 이름의 중복
with 문의 사용

→ eslint를 쓰자

빌트인 객체 🔥

빌트인 객체가 뭔가요?

ECMAScript 사양에 정의된 객체, 자바스크립트 실행 환경 (브라우저 또는 Nodejs 환경)과 관계 없이 언제나 사용할 수 있다.

표준 빌트인 객체는 전역 객체의 프로퍼티로 서 제공되는데, 전역 변수처럼 언제나 참조가 가능하다.

빌트인 객체의 종류는 어떤게 있죠?

자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여 개의 표준 빌트인 객체를 제공한다.

생성자 힘수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체다. 예를 들어, 표준 빌트인 객체인 String을 생성자 함수로서 호출하여 생성한 String 인스턴스의 프로토타입은 String.prototype이다.

래퍼 객체에 대해서 알고 있나요?

원시값은 객체이기 때문에 문자열 타입의 변수의 경우 length를 쓸 수 없다. 하지만 쓸 수 있다. 원시 값이 객체처럼 동작한다

why? 래퍼 객체 때문

래퍼 객체란? 문자열. 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체.

Hyeon

어 왜 되지? 에 대한 고찰

이전 포스트

프론트엔드 면접 스터디 3주차 - React

다음 포스트