개발 기본 상식

출처 : https://github.com/junh0328/prepare_frontend_interview/

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

함수 표현(Function expression)은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거칩니다. 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다.

  1. 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression) 라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다

  2. 즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다. 함수 이름이 있는 기명 즉시 실행 함수도 사용할 수 있다. 하지만 즉시 실행 함수를 다시 호출할 수는 없다.
  3. 즉시 실행 함수는 반드시 그룹 연산자 (…)로 감싸야 한다.

* 스코프 🔥

* 스코프가 뭔가요? 🔥🔥🔥

식별자(변수)가 유효한 범위 스코프는 유효 범위라는 뜻으로, 식별자(변수)가 유효한 범위를 말합니다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

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

전역스코프 함수스코프 블록스코프

크게 전역 스코프와 지역 스코프로 구분 이는 상대적인 개념이며 전역이란 코드의 가장 바깥 영역을 말합니다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 됩니다. 이 전역 변수는 어디서든 참조할 수 있습니다. 지역이란 함수 몸체 내부를 말합니다. 지역은 지역 스코프를 만드는데, 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 됩니다. 지역 변수는 자신의 스코프와 하위 지역 스코프에서 유효합니다.

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

함수를 어디서 ‘호출’ 했는지가 아닌 어디서 ‘정의’ 했는지에 따라 함수의 상위 스코프를 결정하는 것이 정적 스코프 즉, 렉시컬 스코프를 의미 다른 말로, 정적 스코프(Static scope)라 부르기도 하다.

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

  1. 암묵적 결합 변수의 유효 범위(스코프)가 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.

  2. 변수의 긴 생명주기

전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비한다. 또한 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다. 변수 이름이 중복되기라도 한다면 의도치 않은 재할당이 이뤄지기도 한다.

  1. 스코프 체인 상에서 종점에 존재

전역 변수는 스코프 체인 상에서 종점에 존재한다. 이는 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 말한다. 즉, 전역 변수의 검색 속도가 가장 느리다. 검색 속도의 차이는 그다지 크지 않지만 속도의 차이는 분명히 있다.

  1. 네임스페이스 오염

자바스크립트의 가장 큰 문제점 중 하나는 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유한다는 것이다. 따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

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

* 생성자 함수가 뭔가요?

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다.

자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다.

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

객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성하기 때문에 같은 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 비효율적이다. 생성자 함수를 통해 객체를 생성한다면 마치 객체를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

* 함수와 일급 객체 🔥

* 일급 객체가 뭔가요?

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

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

일급 객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나이다.

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

명령형 프로그래밍을 기반으로 개발했던 개발자들은 개발하는 소프트웨어의 크기가 커짐에 따라, 복잡하게 엉켜있는 스파게티 코드를 유지보수하는 것이 매우 힘들다는 것을 깨닫게 되었다. 그리고 이를 해결하기 위해 함수형 프로그래밍이라는 프로그래밍 패러다임에 관심을 갖게 되었다. 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다.

유명한 책인 클린 코드(Clean Code)의 저자 Robert C.Martin은 함수형 프로그래밍을 대입문이 없는 프로그래밍이라고 정의하였다.

[ 함수형 프로그래밍(Functional Programming)의 특징 ] 부수 효과가 없는 순수 함수를 1급 객체로 간주하여 파라미터나 반환값으로 사용할 수 있으며, 참조 투명성을 지킬 수 있다.

함수형 프로그래밍의 특징을 한 줄로 요약하면 위와 같다. 여기서 키워드는 “부수 효과”, “순수 함수”, “1급 객체”, “참조 투명성” 인데, 각각에 대해 자세히 살펴보도록 하자.

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

부수효과(Side Effect) 여기서 부수효과(Side Effect)란 다음과 같은 변화 또는 변화가 발생하는 작업을 의미한다.

변수의 값이 변경됨 자료 구조를 제자리에서 수정함 객체의 필드값을 설정함 예외나 오류가 발생하며 실행이 중단됨 콘솔 또는 파일 I/O가 발생함

순수 함수(Pure Function) 그리고 이러한 부수 효과(Side Effect)들을 제거한 함수들을 순수 함수(Pure Function)이라고 부르며, 함수형 프로그래밍에서 사용하는 함수는 이러한 순수 함수들이다.

Memory or I/O의 관점에서 Side Effect가 없는 함수 함수의 실행이 외부에 영향을 끼치지 않는 함수

프로토타입

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

Object Oriented Programming (객체 지향 프로그래밍) 는 프로그램 설계 방법론의 일종이다. 프로그래밍 할 때 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아닌객체 라는 단위로 나누고 이를 서로 상호작용할 수 있게 만들어 역할을 수행 할 수 있게 만든다.

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

캡슐화 (Encapsulation)변수와 함수를 하나로 묶고 필요에 따라 접근 권한을 나누어 외부에서 함부러 접근하지 못하게 제한을 두어 객체의 손상을 방지한다.이에 따라 내부 구현 내용을 감추어 외부에서 확인 할 수 없도록 정보 은닉 도 포함되게 된다.

추상화 (Abstraction)객체들이 사용하는 공통적인 변수와 함수들을 따로 묶는 것 을 말한다.예를 들어 말, 강아지, 고양이가 존재한다고 치면이 3가지의 동물들이 공통적으로 수행하는 행동 중 숨쉬기, 걷기, 달리기 등등이 있을 것이고다리 개수, 성별 등 공통 적으로 가지고 있는 특징들도 있다.이렇게 공통적인 행동과 특징들을 가지고 하나의 객체를 정의 하는 과정 을 추상화로 볼 수 있다.

상속 (Inheritance)자식 객체가 부모 객체의 변수와 함수를 그대로 물려 받을 수 있는 것을 뜻한다.예를 들어 동물이라는 객체에 달리기, 숨쉬기 함수가 있다면강아지, 고양이 객체를 만들 때 동물 객체를 상속 받아강아지, 고양이 객체에서는 달리기, 숨쉬기 함수를 따로 구현하지 않고동물 객체의 달리기, 숨쉬기 함수를 쓸 수 있다.

다형성 (Polymorphism)같은 객체임에도 상황에 따라 다르게 동작 할 수 있는 것을 뜻한다.오버로딩 (Overloading) 이나 오버라이딩 (Overriding) 같은 것을 사용하여 객체를 상황에 따라 다르게 사용 할 수가 있는 것이다.

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

자바스크립트는 객체지향 프로그래밍 뿐만 아니라 명령형, 함수형 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다. 클래스 기반 객체지향 프로그래밍 언어와 달리 프로토타입 기반의 객체지향 프로그래밍입니다.

프로토타입이 뭔가요?

프로토타입을 기반으로 객체 지향의 상속 개념을 구현한다. 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체의 참조 링크를 가지고 있으며, 이 링크를 통해 프로토타입으로부터 프로퍼티나 메서드를 상속받을 수 있다,

strict mode

strict mode가 뭔가요?

오타나 문법 지식의 미비로 인한 실수를 줄여 안정적인 코드를 생산하기 위해 ES5에 추가된 모드이다. strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다.

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

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

빌트인 객체

빌트인 객체가 뭔가요? 종류는 어떤게 있죠?

자바스크립트 내장 객체를 말함 개발자가 모든 기능을 구현하지않고, 편하게 개발할 수 있도록 자바스크립트에서 기본적으로 제공하는 객체 자료형 객체 관련 메서드를 제공함(Standard Builtin Object - String, Array 등) 웹페이지 제어 및 동작을 추가하기위한 공통의 기능을 제공함(Native Object - BOM, DOM) 반대로는 호스트 객체(Host Object)가 있는데, 호스트 객체란 개발자가 만들어내는 객체임

종류 Number : 숫자, 상수, 지수 String : 문자열, 문자열을 분리 혹은 연결 Boolean : true, false Object : {key, value} 형태의 프로퍼티 Array : [1, “a”, “가”] 형태 Function : function () {…} 형태 Math : abs(), round() 등의 계산 Date : 연월일, 시분초 등 시간값 JSON : 서버와 데이터를 송신하는데 사용 [{“name”: “value”}] 형태 RegExp : 정규표현식 Global : 전역 객체, 모든 객체의 유일한 최상위 객체

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

원시 타입인 String, Number, Boolean으로 특정된다.

순간적으로 생성되었다 사라지는 객체를 래퍼 객체(Wrapper Object)라고 하는데, 자바스크립트 엔진이 암묵적으로 원시타입에 해당하는 래퍼 객체를 생성하고, 볼일이 끝나면 다시 원시타입으로 복귀시키는 것이다.

this

this가 뭔가요?

this는 읽기 전용 값으로 런타임 시 설정할 수 없으며 함수를 호출한 방법에 의해 값이 달라집니다.

this 바인딩이란?

바인딩이란 식별자(변수)와 값(원시 값 또는 객체)을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다.

this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?

함수 선언식 : global 화살표 함수 : 상위스코프의 this 생성자 함수 : 생성자함수가 생성할 인스턴스 메서드 호출 : 메서드를 호출한 객체

실행 컨텍스트 🔥

실행 컨텍스트에 대해 말해보세요 ✓

자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경이다. 즉, 스코프의 정보를 담은 환경을 의미한다. 실행 컨텍스트는 렉시컬 스코프를 기반으로 호이스팅, 클로저, 블록 스코프 등이 어떻게 동작하는지 설명하고 표현한다.