모던 자바스크립트 Deep Dive #2

Yejung·2022년 10월 29일

모던 자바스크립트 Deep Dive

모던 자바스크립트 Deep Dive 스터디

목록 보기

2/5

📚 22.10.29 2회차 스터디 정리본

📌 타입변환과 단축 평가

명시적 타입 변환이 뭔가요?
- 개발자가 의도적으로 값의 타입을 변환하는 것
- 타입 캐스팅이라고도 한다.
명시적 타입 변환 함수를 예를 들어볼 수 있나요?
- String 생성자 함수를 new 연산자 없이 호출, parseInt
- toString() 메서드, + 단항 산술 연산자, * 산술 연산자 (1을 곱해주면서 변환)
암묵적 타입 변환이 뭔가요?
- 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
- 타입 강제 변환이라고도 한다
truthy / falsy 한 값이 뭔가요?
- 참 또는 거짓으로 평가되는 값
  (https://developer.mozilla.org/ko/docs/Glossary/Truthy)
  (https://developer.mozilla.org/ko/docs/Glossary/Falsy)
- 빈 문자열 (””) 은 falsy로 평가
- 빈 배열과 객체 ([], {}) 는 truthy로 평가

📌 배열

자바스크립트의 배열은 자료구조의 배열과 같나요?
- 같지 않다.
- 자료구조의 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 (밀집배열)
- 자바스크립트의 배열은 각각의 메모리 공간은 동일한 크기를 가지지 않아도 되고 연속적으로 이어져 있지 않을 수도 있다 (희소 배열)
- 자바스크립트의 배열은 해시 테이블로 구현된 객체
- 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체
배열의 메서드는 어떤 종류가 있나요?
- Array.isArray : 전달된 인수가 배열이면 true 아니라면 false
- Array.prototype.indexOf : 원본 배열에서 인수로 전달된 요소를 검색해 인덱스를 반환
  - 배열에 특정 요소가 존재하는지 확인할 때 유용
- Array.prototype.includes : 원본 배열에 인수로 전달된 요소가 존재하는지 확인 후 true, false 반환
- 그 외 push, unshift, concat, splice, slice, join, reverse, fill, flat 등이 있다.
고차 함수에 대해서 아시나요?
- 함수를 인수로 전달받거나 함수를 반환하는 함수
- 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반
- 배열 고차함수에는 sort, forEach, map, filter, reduce, some, every, find, findIndex, flatMap 등이 있다.
forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?
- 두 메서드 모두 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출
- 하지만 map은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환
- 용도가 다르다

📌 객체 리터럴

자바스크립트에서 객체란 뭘까요?
- 원시값을 제외한 나머지 값이 모두 객체
- 0개 이상의 프로퍼티(key-value) 집합
함수와 메서드의 차이점에 대해 알고 계신가요?
- 객체의 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름
- 메서드는 객체에 묶여있는 함수
자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?
- 객체 리터럴에 의한 객체 생성 → 일반적이고 간단
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스

📌 원시 값과 객체 비교

동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까요?
- 근본적으로 크게 세가지 측면에서 다르기 때문
  1. 원시값은 변경 불가능한 값 / 객체는 변경 가능한 값
  2. 원시값을 변수에 할당하면 확보된 메모리 공간에는 실제 값이 저장 / 객체는 변수에 할당하면 확보된 메모리 공간에는 참조 값이 저장
  3. 다른 변수에 할당했을 때 원시값은 값에 의한 전달, 객체는 참조에 의한 전달
값에 의한 전달이 뭔가요?
- 해당 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달

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

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

📌 함수

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

함수 선언문
```
function add(x, y){
	return x + y;
}
```

함수 표현식

const add = function (x, y){
	return x + y;
}

Function 생성자 함수

const add = new Function('x', 'y', 'return x+y');

화살표 함수
```
const add = (x, y) => x + y;
```

함수 선언문과 함수 표현식은 어떤 차이가 있나요?
- 두 함수의 함수 생성 시점이 다릅니다
- 함수 선언문은 런타임 이전에 함수 객체가 먼저 생성이 되고 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당 (함수 호이스팅)
- 함수 표현식은 변수에 할당되는 값이 함수 리터럴인 방식 (변수 호이스팅)
- 즉 undefined로 초기화(var) 되고 그 값은 런타임에 평가되어 할당되는 시점에 함수 리터럴이 평가되어 함수 객체가 된다.
즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요
- 함수 정의와 동시에 즉시 호출되는 함수
- 단 한 번만 호출되며 다시 호출할 수 없다
- () 내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가 → 다시 호출 X
- 즉시 실행함수는 반드시 () 그룹 연산자로 감싸야한다.
- 혹시 있을 수도 있는 변수나 함수 이름의 충돌을 방지할 수 있다.

📌 스코프

스코프가 뭔가요?
- 식별자가 유효한 범위
- 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효범위가 결정
스코프에는 어떤 종류가 있죠?
- 전역스코프와 지역스코프
  - 전역은 코드의 가장 바깥영역
  - 전역에서 변수를 선언하면 전역 스코프를 가짐
  - 지역은 함수 몸체 내부
  - 지역변수는 자신의 지역스코프와 하위지역스코프에서 유효
- 함수레벨 스코프와 블럭레벨 스코프
  - 블럭레벨 스코프 : 함수 몸체만이 아니라 모든 코드블럭(if, for, while, try/catch)이 지역 스코프를 만든다
  - 함수레벨 스코프 : 함수의 코드블럭만을 지역 스코프로 인정 (ex. var)
- 동적스코프와 렉시컬스코프(정적스코프)
  - 동적 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
  - 렉시컬: 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정
  - 자바스크립트는 렉시컬 스코프를 따른다
렉시컬 스코프를 아시나요? 안다면 렉시컬 스코프는 무엇을 의미하나요?
- 렉시컬 스코프 : JS 엔진은 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정
- 상위스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 위치에 의해 결정된다.
전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까요?
- 암묵적 결합(모든 코드가 전역 변수를 참조하고 변경 가능) 허용
  - 변수의 유효범위가 클수록 가독성 ⬇
  - 의도치않게 상태가 변경될 수 있는 위험성 ⬆
- 긴 생명 주기
  - 메모리 리소스 오랜 기간 소비
  - 전역 변수 상태를 변경할 수 있는 시간도 길고 기회도 많음
  - var 키워드는 중복선언을 허용하므로 의도치않게 재할당 가능성도 더 커짐
- 스코프 체인 상에서 종점에 존재
  - 스코프 체인 상 변수를 검색할 때 가장 마지막에 검색되어 검색 속도가 가장 느림

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

생성자 함수가 뭔가요?
- new 연산자와 함께 호출하여 인스턴스를 생성하는 함수 ( 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다)
객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?
- 객체 리터럴에 의한 생성방식은 직관적이고 간편하지만 단 하나의 객체만 생성
- 동일한 프로퍼티를 갖는 객체를 여러개 생성하는 경우 비효율적
- 생성자 함수를 사용하면 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능
생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?
1. 암묵적으로 빈 객체인 인스턴스를 생성하고 this를 바인딩
2. 인스턴스에 프로퍼티나 메서드를 추가하고 인수로 전달받은 초기값을 할당하거나 고정값을 할당해 초기화
3. 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환

📌 함수와 일급 객체

일급 객체가 뭔가요?
1. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
2. 함수의 매개변수에 전달할 수 있다.
3. 함수의 반환값으로 사용할 수 있다.
자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있나요?
- 함수를 객체와 동일하게 사용할 수 있다(= 값과 동일하게 취급)
- 함수의 매개변수에 전달 + 반환값으로 사용 → 함수형 프로그래밍 가능
꼬리 질문) 함수형 프로그래밍이 뭔가요?
- 함수형 프로그래밍 언어는 불변성을 지향하는 프로그래밍 언어 패러다임이라고 말할 수 있습니다. 즉, 변경 가능한 상태를 최대한 제거하려고 노력한 프로그래밍 언어입니다. 순수 함수를 지향하는 프로그래밍 언어라고 설명하기도 합니다. (https://engineering.linecorp.com/ko/blog/functional-programing-language-and-line-game-cloud/)
꼬리 질문) 순수 함수가 뭔가요? 일반 함수와는 어떤 차이가 있죠?
- 순수 함수는 함수 외부의 모든 형식의 변수 또는 데이터를 변경하지 않습니다.
- 일관성이 있습니다. 동일한 입력 데이터의 집합이 제공되는 경우 항상 동일한 출력 값을 반환합니다.
- 내부 상태를 갖지 않아, 같은 입력에 대해서는 항상 같은 출력이 보장되는 함수입니다.
  다르게 표현하면, 부수효과(side effect)가 없는 함수
  (https://engineering.linecorp.com/ko/blog/functional-programing-language-and-line-game-cloud/)
  (https://learn.microsoft.com/ko-kr/dotnet/standard/linq/refactor-pure-functions)

📌 프로토타입

객체지향 프로그래밍은 무엇을 의미하나요?
- 객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임
- 객체의 상태 데이터를 프로퍼티, 동작을 메서드라고 부르는데 이러한 객체들이 자신의 고유한 기능을 수행하면서 다른 객체와의 관계성을 가지고 동작하도록 표현하는 방법입니다.
객체지향 프로그래밍의 특징에 대해 말해볼 수 있나요?
- 자료추상화 : 불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단히 만드는 것
- 캡슐화
- 상속 : 새로운 클래스가 기존의 클래스의 자료와 연산을 이용할 수 있게 하는 기능
- 다형성 개념: 어떤 한 요소에 여러 개념을 넣어 놓는 것으로 일반적으로 오버라이딩(같은 이름의 메소드가 여러 클래스에서 다른 기능을 하는 것)이나 오버로딩(같은 이름의 메소드가 인자의 개수나 자료형에 따라서 다른 기능을 하는 것)을 의미
- 동적바인딩 : 실행 시간 중에 일어나거나 실행 과정에서 변경될 수 있는 바인딩으로 컴파일 시간에 완료되어 변화하지 않는 정적 바인딩과 대비되는 개념 (바인딩 : 식별자와 값을 연결하는 과정)
- 다중상속 : 클래스가 2개 이상의 클래스로부터 상속받을 수 있게 하는 기능
  (https://ko.wikipedia.org/wiki/객체지향프로그래밍)
자바스크립트는 객체지향 프로그래밍 언어인가요?
- 네. 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어입니다.
프로토타입(프로토타입 객체)이 뭔가요?
- 프로토타입은 어떤 객체의 상위 객체 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공
- 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용 가능
- 객체 간 상속을 구현하기 위해 사용
- 모든 객체는 하나의 프로토타입을 갖고 모든 프로토타입은 생성자 함수와 연결
- 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가지고 내부 슬롯의 값은 프로토타입의 참조 또는 null
- [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만 __proto__ 라는 접근자 프로퍼티를 통해 자신의 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 간접적으로 접근 가능