[책집필] 객체 지향 프로그래밍(OOP), ES6 추가 기능

오늘의 면접 단골 질문

같이 멋쟁이사자처럼 프론트엔드 스쿨 7기 동기들과 함께 책 집필을 진행한다.

책 집필 회의는 매주 2회, FE파트와 팀 전체 회의가 진행된다.

 

우리 책집필 주제는 프론트엔드와 백앤드 개발자의 기술 면접 질문을 다룬다.

채용 공고 사이트 및 블로그에서 단골 질문에 대한 답변을 1분 이내의 답변으로 구성한다.

 

나는 우선, 시간이 안걸리는 주제 2개를 선정해서 필수 항목을 채우고, 시간 많이 걸리는 주제 1개를 공유하고자 한다.
기존 생활에 책집필 일정이 들어와 시간을 효율적으로 잘 사용해야 한다.

 

1. 객체 지향 프로그래밍이란?

---

1-1. 질문의도

자신의 주 프로그래밍 언어의 특징을 알고 쓰지는 알아보는 단골 면접 질문이다.

또는 면접 준비를 했는지 태도를 평가하는 기초 질문으로 쓰일 수 있다.

 

1-2. 모범 답변 (30초/250자)

[30초 답변 : 자세하게 핵심 정보만을 답변하며 여지를 남긴다.]

 객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 대표적인 프로그래밍 패러다임으로 Java, C++, C# 등이 지원합니다.  대비되는 개념으로 C언어가 대표적인 절차 지향 프로그래밍(Procedure-Oriented Programming, POP) 이 있습니다. 물론 자바스크립트도 OOP를 지원하고 있으나, 자바스크립트는 다른 전통적인 클래스 기반 아닌 프로토타입 기반의 객체 지향 프로그래밍 언어입니다.

 객체 지향 프로그래밍 언어는 상속(Inheritance), 캡슐화(Encapsulation), 추상화(Abstraction), 다형성 (Polymorphism) 의 4 가지 특징을 가지고 있습니다.

 

[추가 30초 답변: 객체 지향 프로그래밍을 사용하는 근본적인 이유를 설명할 수 있다]

간단하게 개념과 장점을 말씀드리면,

- 상속은 부모 클래스의 모든 속성과 메소드를 상속 받음으로써 코드 중복을 줄일 수 있습니다.

- 캡슐화는 프로퍼티와 메소드를 묶어 코드 관리 및 가독성을 높일 수 있습니다.

- 추상화는 자세한 구현 정보는 숨기고 일반 인터페이스를 정의하는 것을 의미합니다. 수정사항이 발생하더라도 인터페이스는 바뀌지 않은 채로 구현 세부 정보만 바꾸면 되기 때문에 코드 관리 및 유지보수에 용이해 집니다.

- 마지막으로 다형성은 상속에서 확장된 개념으로 상속된 객체의 다양한 형태를 의미합니다. 메소드 오버라이딩을 통해서 결과값의 형태는 같지만 다른 구현 방식을 가진 메소드를 정의하여 사용할 수 있습니다.

 

참고자료 1. 노마드코더 - 개발자 전공필수? 객체지향 개념 정리 10분컷

참고자료 2. 노마드코더 - 객체지향 프로그래밍? 문과도 이해쌉가능. 10분컷

참고자료 3. Poiemaweb - 5.20 OOP참고

참고자료 4. mdn - 객체 지향 프로그래밍

2. ES6 이후 JavaScript 의 추가된 기능은 무엇이 있습니까?

---

2-1. 질문 의도

- 최신 JavaScript 트렌드에 맞는 프로그래밍을 하고 있는지 알아 보는 있는 질문

 

2-2. 모범 답변 (40초/308자)

2015년 승인된 ECMAScript 제 6판을 기준으로 매년 새로운 판이 출판되고 있습니다. 자바스크립트에 ES6 이전과 뚜렷하게 다른 추가기능으로는 let, const, arrow func, classes, module, destructuring, map/set, promise, await/async,rest/spread properties, class fileds 등이 있습니다. 말씀드린 추가 기능을 통해서 자바스크립트는 좀 더 객체 지향 프로그래밍 언어가 되었으며, 의도치 않은 오류가 줄어들고, 데이터를 가공 및 접근이 보다 용이해질 수 있게 됬습니다.

 

2-3. 관련 내용

2023년 06월 27일 ECMASCript 제 14판을 최종 승인 했다.

ECMAScript 의 변경 기록 및 앞으로 추가될 내용은 ECMA-262 GitHub 저장소에서 확인할 수 있다.

 

ES (ECMAScript): ECMA 스크립트란, Ecma International 이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. ECMA-262 는 매년 새로운 판이 출판되며 꾸준히 업데이트가 되고 있다.

 

ES6 => ES2015 (ECMAScript 2015)

ES7 => ES2015 (ECMAScript 2015)

ES8 => ES2015 (ECMAScript 2015)

...

ES13 => ES2022 (ECMAScript 2022)

ES14 => ES2023 (ECMAScript 2023)

ES15 => ES2024 (ECMAScript 2024) // ES문서와 해당 연도는 9 차이가 난다.

 

ES6 (ECMAScript 2015) 추가 기능

arrow (화살표 함수)

classes (클래스)

enhanced object literals (Object 메소드 선언 및 속성 (동적 ) 선언)

template strings (템플릿 문자열)

destructuring (구조분해할당)

default, rest, spread (default 파라미터, rest 파라미터, 전개연산자)

let, const (let, const block level 스코프 변수선언)

Iterators, for...of

generators

unicode

modules

module loaders

map, set, weakmap, weakset

proxies

symbols

subclassable build-ins

promises (비동기 프로그래밍)

math, number, string, array, object APIs

binary and octal literals

reflect api

tail calls (꼬리 물기 최적화)

 

ES7 (ECMAScript 2016) 추가 기능

Array.prototype.includes()

지수 연산자(**)

 

ES8 (ECMAScript 2017) 추가 기능

문자열 패딩

Object.entries(), Object.values()

Object.getOwnPropertyDescriptors()

후행 쉼표

Shared memory and atomics (공유된 메모리와 원자 / SharedArrayBuffer 객체와 Atomics 객체를 사용한 메모리 공유)

Async Functions (async, await)

오류 처리

 

ES9 (ECMAScript 2018) 추가 기능

Asynchronous Iteration (비동기 반복 / for-await-of)

Rest/Spread Properties (전개연산자 및 rest 파라미터 => 배열로 변경)

Promise.prototype.finally()

정규식 기능 추가 (s(dotAll) 플래그, 명명된 캡처 그룹, 룩비하인드 어서션, 유니코드 속성 이스케이프)

템플릿 리터럴 제한 해제

 

ES10 (ECMAScript 2019) 추가 기능

Array.prototype.flat(), Array.prototype.flatMap()

Object.fromEnties()

String.prototype.trimStart(), String.prototype.trimEnd()

선택적 catch 할당

Function.prototype.toString()

Symbol.prototype.description

 

ES11 (ECMAScript 2020) 추가 기능

Bigint

동적으로 가져오기

옵셔널 체이닝

Promise.allSettled()

null 계열의 값을 병합하기

String.prototype.matchAll()

모듈 네임스페이스 export 문법

import.meta

globalThis

 

ES12 (ECMAScript 2021) 추가 기능

String.prototype.replaceAll()

Promise.any()

논리 연산자와 할당 표현식

숫자 구분 기호

약한 참조

Intl.ListFormat

Intl,DataTimeFormat 의 dataStyle 및 timeStyle 옵션

 

ES13 (ECMASCript 2022) 추가 기능

Top-level await (모듈 최상단에서 await 사용 가능)

Class fields (접근 제어자 속성 #)

클래스 내 정적 블록 (static 초기화 블록)

in 키워드의 기능 확장 (객체에 private 인스턴스 존재 확인)

정규식 표현식 플래그 d를 통한 일치 인덱스 (일치하는 하위 문자열에 시작 또는 종료 인덱스를 제공)

Error.prototype.cause 속성 (추가적인 Context Message)

.at() 키워드 추가 (배열의 음수 인덱싱 가능)

Object.hasOwn 키워드 추가 (Object.prototype.hasOwnProperty 의 대안으로 추가)

 

ES14 (ECMAScript 2023) 추가 기능

Array.prototype.findLast(), Array.prototype.findLastIndex() 메소드 (역방향으로 요소를 탐색)

Array.prototype.toReversed() / .toSorted() / .toSliced(index,count) / .with(index, value) 메소드

(원본 배열을 변경하지 않고 새로운 배열을 반환)

WeakMap 의 키로 Symbol 사용

HashBang(Shebang) 문법 (실행할 프로그램의 인터프리터 정의. 스크립트 첫 라인에 #! 시작)

 

 

 

참고자료 1. 위키백과 - ECMA스크립트

참고자료 2. ES6 - ES9 간략 정리

참고자료 3. 모던 자바스크립트 핵심 가이드 : ES7 - ES12 추가 기능

참고자료 4. ES13 추가된 기능들

참고자료 5. ES14 추가된 기능들