[JavaScript] 기본기(2)

✍ 목차

• 프로그래밍 패러다임
• JS 프로토타입
• 이벤트 루프

✏️ [프로그래밍 패러다임]

프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를

어떻게 작성할지 결정하는 역할을 한다.  프로그래밍 패러다임은 크게 아래와 같이 분류된다.

• 명령형 프로그래밍 : 무엇(what)을 하는 것 보다 어떻게(how) 해야 하는지를 설명하는 방식
  • 절차지향 프로그래밍 : 수행되어야 할 연속적인 계산 과정 (C, C++)
  • 객체지향 프로그래밍 : 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, JAVA)
• 선언형 프로그래밍 : 어떻게(how) 해야 하는지보다 무엇(what)을 할 것인지 설명하는 방식
  • 함수형 프로그래밍 : 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 리스프)

위의 말만 보면 무슨 말인지 이해하기가 어렵다. 비유를 통해 알아보면
A라는 사람이 회사에서 집으로 갈려고 합니다. 가는 방식에 따라 설명하면,
명령형 : 회사에서 나와서 좌측으로 100m가서, 15번 버스를 타고 종착역에서 내리세요. 
선언형 : 우리집 주소는 경기도 수원시 장안구 ~~ 입니다.

코드 예시

// 명령형
let a = [1, 2, 3, 4, 5];
let result = [];
for (let i = 0; i < a.length; i++) {
  if (a[i] % 2 === 0) result.push(a[i]);
}

//선언형
let result2 = a.filter((el) => el % 2 === 0);

함수형 프로그래밍 특징

• 객체지향 추상화의 최소 단위가 객체인 것처럼 함수형은 함수가 최소 단위이다.
• 함수 단위로 나눠지므로 재사용성이 높다.
• 불변성을 지향하기에 동작을 예측하기 쉽고 사이드 이펙트를 방지한다.
  • 사이드 이펙트 방지한다는 것은 동시성 문제도 해결된다는 의미
• 객체지향은 제어 흐름의 간접적인 전환에 부과되는 규율이라면, 함수형은 변수 할당에 부과되는 규율

함수형 프로그래밍 장점

• 상태가 없기 때문에 사이드 이펙트가 없다.
• 재사용성이 높다.
• 코드가 짭고 간결하다.

함수형 프로그래밍의 장점이 곧 단점이 된다.!
상태가 없다 -> 메모리와 성능 측면에서 비효율
재사용성 -> 함수를 쪼개다보면 너무 복잡해질 가능성이 있다
코드가 짧고 간결 -> 그만큼 숙련도와 실력이 필요하다.

 

JS는 다중 패러다임 언어이기 때문에 상황과 로직에 따라 적절히 사용하면된다.!

굳이 객체지향과 함수형으로 나눌 필요없이 둘 다 쓰자!

 

✏️ [JS 프로토타입]

Prototype vs Class
클래스(Class)라는 것은 Java, C++ 등에서 한번쯤 사용해봤을 것이다.
Class를 선언하고 생성을 통해 객체지향 프로그래밍을 사용할 수 있다.
하지만 JS는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는
프로토타입 기반의 언어이다.

프로토타입은 객체간의 연결을 해주는 역할이라고 볼 수 있다.
이러한 프로토타입은 객체를 확장하고 객체지향적인 프로그래밍을 할 수 있게 해준다.

서로를 참조하고 있다.

어? JS에서 Class라고 선언하고 new 키워드로 생성해서 쓸 수 있는데요? 라는 질문이 있을 수 도 있다.
이는 ES6이후 프로토타입을 좀 더 간결하고 쉽게 사용할 수 있도록 지원하는 문법일 뿐이다. 내부적으로 프로토 타입 형식을 따른다.

es6문법을 활용하여 상속받아 클래스 생성 후 출력하게 되면 dog의 Prototype이 Animal이라는 것을 볼 수 있다. 이는 위의 그림과 같이 Animal을 참조하고 있는 상황이다.

Animal객체의 경우는 최상위인 Object를 참조하고 있다.

 

즉, Java와 Js의 객체지향 사용법은 매우 유사하나 내부적으로 동작 원리가 다를 뿐이다.

 

✏️ [이벤트 루프]

출처 : https://velog.io/@josworks27/JavaScript%EC%9D%98-Event-Loop%EB%9E%80

이벤트 루프를 한 줄로 정의하기 어렵다. 왜냐하면 여러 개념을 종합한 개념이기 때문이다.

하지만 한 줄 요약하자면,

Call Stack이 비어 있을 경우, Callback Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다.

 

정확히 알기 위해 하나씩 차근차근 살펴보자.

JS Engine

JS Engine은 위의 사진에서 왼쪽 부분과 같이 Heap과 Call Stack으로 구성되어 있다.

JS는 싱글 스레드 기반 프로그래밍이다. 이는 위의 그림에서와 같이 Call Stack이 하나라는 의미이다.

• Heap : 메모리 할당이 일어나는 곳으로 프로그래머가 할당/해제하는 메모리 공간이다.
• Call Stack : 프로그램이 자동으로 사용하는 임시 메모리 영역이다.

Web API

사진 오른쪽에있는 것으로 이 부분은 JS Engine영역이 아니다.

Web API는 브라우저에서 제공하는 API로 Dom, Ajax 등이 있다.

Call Stack 영역에서 실행된 비동기 함수는 Web API를 호출하고,

Web API는 콜백함수를 그림 하단에있는 Callback Queue에 넣는다.

 

Callback Queue

JS는 비동기 프로그래밍 특징을 가지고 있다. 따라서 비동기적으로 실행된

콜백함수는 Callback Queue에 저장된다.

 

다음 코드가 실행될때, 각 과정을 알아보자.

setTimeout(function exec() {
  console.log('test')
}, 1000);

Call Stack : 함수에 관한 정보 저장한다. 이때 setTimeout으로 인해 Web API가 호출된다.

Web API : Browser API인 timer를 호출한다. 이때 콜백함수를 Callback Queue에 넘기게 된다.

Callback Queue : 비동기 작업이 끝난 콜백함수가 Callback Queue에 추가가 된다.

Event Loop : Call Stack이 비어있는 것을 확인하고 Callback Queue에 있는 작업을 Call Stack에 옮깁니다.

-> 위의 과정을 거쳐 최종적으로 "test"라는 문자열이 찍힌다.

 

 

🙆‍♂️ 느낀점

와우... 굉장히 정리할 것이 많았다. 평소 공부하면서 주워들었던 개념이라 대충은 알지만 설명하라 하면

모르는 주제들을 많이 배웠다. 이번 기회를 통해 정확한 개념을 학습할 수 있어서 좋았다. 비록 정리한다고 오래걸렸지만 배움의 즐거움이 너무 행복했다.

 

 

📃 참고 사이트

프로토타입

https://www.nextree.co.kr/p7323/

 

이벤트 루프 개념

https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

 

이벤트 루프 동작 과정

https://medium.com/sjk5766/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-event-loop-%EC%A0%95%EB%A6%AC-422eb29231a8