자바스크립트의 비동기 코드가 runtime에 의존적이라고 하는 이유에 대한 의문을 시작으로 이번 포스팅을 시작하려고 한다. 이전에 비동기 함수를 테스팅하는 과정에서 에러가 발생을 했었는데 이때 비동기 코드가 runtime에 의존적인 결과코드이기 때문에 별도의 설정을 해줘야 했고, 이 에러를 겪고 해결해나가기 전에는 그 이유에 대해서 잘 몰랐었기 때문에 혹시 과거의 나와 같이 의문을 갖는 사람들을 위해 포스팅을 해보려고 한다.

이 이유에 대해서 이해하려면 자바스크립트 코드의 실행과정에 대해서 우선적으로 이해를 해야한다.

• 자바스크립트 코드의 실행과정

자바스크립트에서는 작성된 코드들은 call stack에 쌓인 후에 실행이 된다. 하지만 JS엔진에서는 비동기 작업을 지원하지 않기 때문에 코드들 중에서 비동기 작업을 Web API(browser에 의해 제공)에 위임을 한다.

• JS runtime engine의 역할

  JS runtime engine은 standard JS 코드를 실행하는 역할을 하는 JS engine(V8 for chrome)로 아래와 같은 프로그래밍 언어로써 독립적으로 요구되는 특징들을 지원한다.

  • variable, functions,
  • scoping, scope chaining, execution context, execution scope

• Web API의 역할

  • Web API는 Browser로부터 제공되는 wrapper로, 표준 JS 프로그래밍 언어의 일부가 아니며, 아래의 기능들을 지원한다.

  • ajax, events(onkeyPress, onBlur와 같은 이벤트들)

  • console.log, window object, DOM을 읽고 쓰기와 같은 기능

  • 비동기 작업(Asynchronous task)지원

  • 표준 JS 언어는 위와같은 기능들을 지원하지 않기 때문에 브라우저는 JS 엔진을 브라우저의 custom wrapper들로 감싸서 웹에서의 여러 조작들이 지원 가능하도록 한다.
    (위와 같은 이유로 browser가 JS의 runtime으로 불린다)

    cf) Node는 JS에게 위와 같은 기능들을 제공하는 server side에서 동작하는 runtime이다.

이번 포스팅에서는 자바스크립트를 공부하다가 용어상 혼동되는 부분이 있어 간단하게 정리하고 넘어가고자 한다.
계속 공부를 해나가면서 혹시 용어상 혼동되는 부분이 있으면 이 포스팅 글에 지속적으로 업데이트를 해나가도록 하겠다.

Stack frame vs Execution context

알고리즘 관련 공부를 하다가 함수 실행과 관련된 글을 읽던 중에 스택 프레임(Stack frame)이라는 말이 나왔다. 함수가 실행되면 함수의 매개변수와 지역변수, 복기주소로 구성된 스택 프레임이 스택에 쌓이게 되고, 함수가 최종적으로 실행이 되면 복기주소를 통해서 자기가 호출되었던 주소로 되돌아 간다고 한다.
이전에 자바스크립트에서 스코프에 대해서 공부를 했을때, 실행 컨텍스트에 대해서도 공부를 했었는데 스택 프레임과 같은 개념인 것 같아서 찾아보니 용어만 다를 뿐 같은 것이라는 것을 알게 되었다.

이전에 스코프와 실행 컨텍스트에 대해서 공부하면서 정리했던 포스팅의 링크를 아래에 첨부해둔다.
다시 한 번 반복해서 읽어보자.
https://leehyungi0622.github.io/2021/03/19/202103/210319-javascript-basic_til/

Call stack vs Execution stack

콜 스택(Call stack)과 컨텍스트 스택(Context stack)이 있는데 콜 스택은 자바스크립트 코드가 실행될때 생성된 실행 컨텍스트를 보관하는 LIFO 스택이라는 것은 공부를 통해 알고 있다. 그런데 다른곳에서는 같은 개념의 설명을 컨텍스트 스택이라고 하는 곳도 있었다.
이 역시 스택 프레임과 실행 컨텍스트와 같이 다른 용어지만 같은 것이라고 한다.

이번 포스팅에서는 아직은 조금 낯설은 클로저(Closure)에 대해서 정리를 해보려고 한다.

클로저(Closure)

클로저에 대한 정의는 ECMAScript에 없다. 다만 클로저는 자바스크립트가 채용하고 있는 기술적 기반/컨셉이다.
자바스크립트는 클로저를 이용하여 스코프적 특징과 함수에 대한 명세를 구현하였다.
다시 말해 클로저(Closure)는 ECMAScript의 명세에는 없지만 스코프와 스코프와 긴밀한 관련이 있는 1급 객체로서의 함수와 매우 관련이 깊다.

자 그럼 누군가 클로저(Closure)가 뭐냐고 물어본다면 뭐라고 대답할 수 있을까?

inner function은 항상 outer function의 변수와 인자에 접근을 할 수 있다. 비록 outer function이 이미 호출되어 값이 반환되었을지라도 outer function의 변수 객체에 접근이 가능한 이유가 바로 클로저(Closure) 덕분이다.

아직 설명이 부족하기 때문에 아래 간단한 예시를 살펴보자.

simple example(1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function add(a) {
  var x = '두 숫자의 합은 ';
  return function (b) {
    var sum = a + b;
    console.log(x + sum);
  };
}

var totalSum = add(10);
totalSum(5);

// output: 두 숫자의 합은 15

add(10);
/*
ƒ(b){
  var sum = a + b;
  console.log(x + sum);
}
*/

add(10)(4);
// output: 두 숫자의 합은 14

JavaScript에서 함수는 1급 객체(First-Class Objects)로써 정의되었기 때문에 위와같이 함수 내에서 함수를 반환할 수 있는 것이다.

자 그럼 위의 결과값부터 말을 하자면 두 숫자의 합은 15이다. 새로운 함수는 새로운 함수 실행 컨텍스트를 갖는다. 이전에 스코프에 대해서 블로그 포스팅을 했을때 이미 자세히 다뤘듯이 실행 컨텍스트 내부에는 코드가 실행되기 위한 다양한 정보(변수, 함수 등)들과 참조 속성에 대한 정보가 담긴다. 이 참조 속성이 상위 스코프의 실행 컨텍스트의 참조 속성으로 연결되어 변수를 참조하는 것을 스코프 체인(Scope chain)이라고 정의를 한다.

이번 포스팅에서는 JavaScript에서의 this binding에 대해서 정리를 해보려고 한다.
이는 중요한 개념이기 때문에 나의 말로써 다른 사람에게 설명할 수 있을 정도로 연습을 해둬야 한다.

그럼 JavaScript에서 this란 무엇일까?

갑자기 누군가 JavaScript에서 this가 무엇이냐고 물어본다면 간단하게 현재 실행되는 코드의 실행 컨텍스트를 가르킨다라고 대답할 수 있다.
JavaScript는 Script 언어로, interpreter가 코드를 라인단위로 읽고 해석한 뒤에 실행을 시킨다.
이때 interpreter에 의해 현시점에서 실행되는 JavaScript 코드의 환경(스코프)를 실행 컨텍스트(execution context)라고 정의한다.
JavaScript에서는 내부에서 이런 실행 컨텍스트를 Call stack에서 관리를 하고 실행되는 시점에 자주 변경되는 실행 컨텍스트를 이 this라는 녀석이 가르키고 있다.

알고리즘 문제 풀이를 하면서 중복된 요소를 제거하기 위해서 Set 자료구조를 자주 사용하였다.
그런데 이 Set 자료구조의 사용법에 대해서 자세히 설명하라고 하면 설명할 수 없을 것 같다는 생각에 자바스크립트에서 자주 사용되는 자료구조인 Set과 Map 자료구조의 사용법에 대해 비교해서 정리해가며 공부를 해보려고 한다.

Set

Set은 value들로 이루어진 집합이다. Array와는 다른점은 같은 value를 두 번 포함할 수 없다는 것이다. 따라서 보통 중복을 제거하고자 할때 이 Set 자료구조를 많이 사용한다.

이번 포스팅에서는 앞서 포스팅한 이벤트 전파(Event propagation), 캡쳐링(Capturing)과 버블링(Bubbling)과 매우 밀접한 관련이 있는 이벤트 위임(Event delegation)에 대해서 정리를 해보려고 한다.

이벤트 위임(Event delegation)?

이벤트 위임은 Vanilla JS로 웹 앱을 구현할때 자주 사용하게 되는 코딩 패턴이다.
이벤트 위임은 간단하게 말하자면 '하위요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이라고 정의할 수 있다.

아래에 간단한 TO DO LIST 예시 코드를 작성해보았다.

1
2
3
4
5
6
7
8
9
10
11

<h1>TO DO LIST</h1>
<ul class="itemList">
  <li>
    <input type="checkbox" id="item1" />
    <label for="item1">Learn about event delegation</label>
  </li>
  <li>
    <input type="checkbox" id="item2" />
    <label for="item2">Event delegation pattern</label>
  </li>
</ul>

1
2
3
4
5
6

const inputs = document.querySelectorAll('input');
inputs.forEach((input) => {
  input.addEventListener('click', (event) => {
    console.log('clicked');
  });
});

만약에 아래와 같이 새로운 리스트 아이템을 추가해준다면, 이전의 input태그는 정상적으로 이벤트가 동작하지만 새롭게 추가된 input태그는 이벤트가 적용되지 않은 것을 볼 수 있다.

이벤트를 적용할 당시에 단 두개의 input 태그만 존재했기 때문이다.

이번 포스팅에서는 이벤트 전파(Event propagation), 캡쳐링(Capturing)과 버블링(Bubbling)에 대해서 정리를 해보려고 한다.

이벤트 전파(Event propagation)?

HTML태그는 중첩된 구조로 되어있다. 따라서 이벤트 또한 중첩적으로 장착될 수 있기 때문에 이러한 경우에 어떠한 순서로 이벤트 핸들러들을 호출(실행)할 것인가에 대한 순서에 대한 규약이 바로 이벤트 전파라고 할 수 있다.

만약 상위 HTML 요소에 이벤트를 주고 그 하위 요소들에도 이벤트를 주었을때

상위 HTML 요소에 적용한 이벤트 핸들러가 가장 먼저 호출이 되고 점점 내부로 들어오면서 가장 하위 요소(target element)의 이벤트 핸들러가 호출되는 형태가 된다면 이를 이벤트 캡처링(Event Capturing)이라고 한다.

그리고 가장 하위(target element) 요소에 적용한 이벤트 핸들러가 가장 먼저 호출되고, 그 상위 element에서 그 상위 element로, 그리고 상위 element로 타고 올라가면서 이벤트가 호출되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.

캡처링(Capturing)과 버블링(Bubbling)

앞서 이벤트 전파의 정의에서 캡처링과 버블링의 방향성에 대한 정의에 대해서 간단하게 살펴보았다.
웹 브라우저의 이벤트 모델은 캡처링과 버블링, 모두를 지원한다.
(하지만 이벤트 캡처링은 예전 IE버전에서는 지원되지 않고 있다)

캡처링과 버블링은 서로 비슷하지만 정반대의 방향성을 가지며, 버블링이 이벤트 전파에서 실세라고 할 수 있다.

캡처링을 사용하는 것은 매우 드문 편이지만 이벤트가 전달되는 흐름에 있어 유용한 개념이기 때문에 알아두면 유용하다.

이번 포스팅에서는 아직은 조금 낯설은 스코프(Scope)에 대해서 정리를 해보려고 한다.

ECMAScript의 자바스크립트 명세를 보면 자료형, 문법, 연산자, 실행코드와 실행컨텍스트 등 다양한 명세로 구분이 되어있는데 그 중에서 살펴 볼 파트는 9장 실행코드와 실행 컨텍스트(Executable Code and Execution Contexts)이다.

ft ECMA-262/March 18, 2021

ECMAScript 2022 Language Specification(Chapter.9)
https://tc39.es/ecma262/#sec-executable-code-and-execution-contexts

스코프(Scope)

Preview

이번 예습 범위는 26장 ES6 함수의 추가 기능과 27장 배열이었다. 이전 예습범위를 공부하면서 자바스크립트가 프로토 타입 기반의 언어라는 부분과 함수형 객체 인스턴스가 어떻게 생성이 되는지에 대해 좀 자세히 공부를 했었는데, 그 덕분에 여러가지로 수월하게 26장의 내용을 이해할 수 있었던 것 같다. 이번 기회로 프로토 타입과 관련한 내용을 개인적으로 찾아가며 학습할 수 있었던 좋은 기회였던 것 같다.
콜백함수와 고차 함수의 개념, 프로토 타입 메서드, 정적 메서드 등의 개념을 이해하고 27장을 보니 이전에는 단편적으로만 보였던 메서드들이 다양하게 구분되어 보이기 시작했다. 역시 아는만큼 보이는 것 같다.
아직 개념적으로 공부해야 될 부분이 많기 때문에 지금 느끼는 재미로 좀 더 확장성 있게 공부하도록 해야겠다.

정적 메서드, 프로토타입 메서드, 인스턴스 메서드

Preview

오늘은 내일 있을 자바스크립트 수업을 위해서 12장 함수 ~ 15장 let, const와 블록 레벨 스코프에 해당하는 교재의 내용을 읽어보고 개인적으로 궁금한 내용들을 찾아보며 공부해보았다.

우선 강사님이 함수 부분이 가장 중요하다고 하셔서 이 부분을 읽을때 좀 더 집중해서 읽어보았다.
다시 한 번 읽어보고 싶은 내용에 대해서 다시 한 번 정리를 해두었다.

Review

이번 수업에서 가장 중요한 개념은 중첩함수와 콜백함수의 개념이였다.

함수(fuction)

• 자바스크립트에서 함수는 객체이다.

  자바스크립트의 함수객체는 다른 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만, 함수 객체는 호출할 수 있다.

  자바스크립트에서 함수는 객체이기 때문에 함수 객체만이 가질 수 있는 고유한 속성(property)를 가지고 있다.
  아래 첨부한 노트의 첫 번째를 참고하자. 첫 번째 노트의 우측 상단부를 보면, 함수 객체가 가지는 고유속성 5가지(arguments, caller, length, name, prototype)가 있는 것을 알 수 있다.

  순차적으로 언급한 순서로 함수 객체의 고유 속성에 대해서 알아보도록 하자.

  • arguments : 함수의 인수로 iterable한 유사배열 객체이다. 함수 내부에서 사용되는 지역변수이며, 가변 인자((넘겨받을 인수의 갯수가 정해지지 않았을때 함수 내부에서 사용될 수 있다)

    과거에 가변 인자의 사용으로 인해 argument라는 속성을 사용했지만, ES6에서 rest parameter의 개념이 도입되었다. (…args)

  • caller : ECMAScript 사양에 포함되지 않은 비표준 property이다.

  • length : 함수로 전달된 매개변수(parameter)의 갯수

  • prototype : proto type object에 접근이 가능하게 해준다.

  
  

• 함수는 객체 타입의 값이다.