[JavaScript] 함수형 프로그래밍 | 객체지향 프로토타입 | 이벤트 루프 | 모듈 | 230605(3)

Chaeyeon Lee·2023년 6월 6일

TIL 객체지향프로토타입 국비지원교육 모듈 이벤트루프 자바스크립트 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스 함수형프로그래밍

데브코스 TIL

목록 보기

4/16

(1) 함수형 프로그래밍

함수형 프로그래밍은 데이터를 함수로 만들어 결과를 도출한다.

함수형 패러다임:
함수가 최소 단위이고. 재사용성이 높다. 불변성 지향하므로 동작 예측이 쉽고 사이드 이펙트를 방지할 수 있다. 동시성 문제도 해결됨.

함수형 프로그래밍의 장단점

(1) 상태가 없어서 사이드 이펙트 없음. <-> 변수조작 불가느
(2) 재사용성 높음. <-> 함수를 잘게 쪼개야 하므로 복잡성 증가
(3) 코드가 짧고 간결함. <-> 많은 숙련도 필요

선언형 프로그래밍

함수형 프로그래밍과 비슷하다. 기존 명령형 프로그래밍은 문제를 어떻게 해결하는지 컴퓨터에게 명령 내리지만, 선언형 프로그래밍은 무엇을 해결할지 집중하고 해결방법은 컴퓨터에게 위임한다.

control flow: if/else/while/for ...
data flow: stateless, recursion ...

(2) 객체지향 프로토타입

객체란?

현실에 있는 것을 추상화한 것

자바스크립트는 객체 기반의 프로그래밍 언어로, 자바스크립트를 구성하는 거의 '모든 것'이 객체다. (원시값을 제외한 나머지 값)
객체는 0개 이상의 프로퍼티로 구성된 집합이고, 프로퍼티는 키와 값으로 구성되고, 함수도 값으로 취급된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다. 이처럼, 객체는 프로퍼티와 메서드로 구성된 집합체이다.

프로퍼티: 객체의 상태를 나타내는 값
메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

객체지향 프로그래밍 : 객체 위주로 설계하고 프로그래밍하는 패러다임으로, 최소 단위는 객체이다. 객체는 객체간 메시지를 주고 받는다.

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

var person = {
  name: "Lee", //프로퍼티 키는 name, 프로퍼티 값은 "Lee"
  age: 20 //프로퍼티 키는 age, 프로퍼티 값은 20
};

프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값

프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

함수

일련의 과정을 문statement으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 객체 타입의 값이다.

프로토타입

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다.

상속과 프로토타입
상속: 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속 받아 그대로 사용할 수 있는 것

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.
프로토타입 객체(프로토타입) : 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)를 제공한다. 프로토타입을 상속 받은 하위(자식)객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조(null인 경우도 있음)다. 여기에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다.
모든 객체는 하나의 프로토타입을 갖고, 모든 프로토타입은 생성자 함수와 연결되어 있다.

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

이처럼 다양한 방식으로 생성된 모든 객체는 추상연산에 의해 생성된다는 공통점이 있다.
추상연산은 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달 받는다. 그리고 자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달할 수 있다. 추상연산은 빈 객체를 생성한 후, 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가한다. 그리고 인수로 전달받은 프로토타입을 자신이 생성한 객체의 [[Prototype]] 내부 슬롯에 할당한 다음, 생성한 객체를 반환한다.

즉, 프로토타입은 추상연산에 전달되는 인수에 의해 결정되고, 이 인수는 객체가 생성되는 시점에 객체 생성 방식에 의해 결정된다.

Object.create메서드 : 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. 첫 번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 객체를 생성하면서 직접적으로 상속을 구현한다.

(3) 이벤트 루프

자바스크립트는 싱글 스레드 기반이다. 하나의 스레드=하나의 콜 스택=한번에 하나의 작업
콜 스택 : 실행될 함수가 호출한 순서대로 쌓이는 공간.
blocking : 시간 소요가 많은 작업을 수행할 때, 다음 작업이 곧장 실행되지 않고 현재 진행되는 작업이 끝난 후 다음 작업이 실행되는 상황. =>브라우저는 렌더링을 하지 못하고 다른 코드 또한 실행할 수 없게 된다.
비동기 콜백 : 블로킹을 해결하기 위한 방법.

어떻게 동시에 여러 작업을 처리할 수 있을까?

답은 '이벤트 루프'

자바스크립트가 싱글 스레드라는 말은, 자바스크립트 엔진이 단일 호출 스택을 사용한다라는 말이다. 자바스크립트가 구동되는 환경에서는 여러 개의 스레드가 사용되고, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기 위한 장치가 "이벤트 루프"이다.

Web APIs : 브라우저에서 제공하는 API로, 비동기인 setTimeout, Promise 등이 있다. 콜스택에서 실행된 비동기 함수들은 모두 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 넣는다.
즉, 비동기 코드를 만다면 Web API 영역으로 빠지고, 그 콜백은 바로 콜스택으로 가는 것이 아니라 큐로 빠진다는 것이다.
Callback Queue : 비동기적으로 실행된 콜백함수가 보관되는 곳. 콜 스택에 가기 위한 대기열이라고 볼 수 있다. 여기에 있는 콜백함수들은 콜스택이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행된다.

Callback Queue의 세 가지 종류
(1) Task Queue : setTimeout, setInterval과 같은 코드
(2) Microtask Queue : Promise callback, async callback과 같은 코드
(3) Animation Frames : requestAnimationFrame과 같은 코드
2-3-1 순으로 실행됨.

이벤트 루프는 콜스택과 콜큐를 감시하며 어떤 게 비어져 있고 어떤 것을 채워야할지 정하며 수행된다. 현재 실행 중인 태스크가 없는지 태스크 큐에 태스크가 있는지 반복적으로 확인한다.

(4) 모듈

웹사이트는 여러 개의 자바스크립트 파일로 이루어져 있고, 자바스크립트는 각각의 파일을 별개의 프로그램으로 취급한다. 모듈을 사용하면 스크립트간 의존도를 파악할 수 있고, 흐름의 제어가 비교적 쉽다.

모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 자신만의 파일 스코프를 가질 수 있다.
자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 비공개 상태이다. 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다.