복습
앞에서 배운 내용을 복습해보겠습니다. 함수를 선언하는 부분과 함수를 호출하는 부분은 명확히 구분해야 하는 것을 배웠는데요.
아래와 같은 코드가 함수를 선언하는 코드이고,
const add = (a, b) => a + b;
function calculator(func, a, b) {
return func(a, b);
}
다음과 같이 함수이름 뒤에 매개변수를 선언한다면 함수를 호출하는 것이 됩니다. 그리고, 함수를 호출했을 때 이를 return 값으로 대입해 생각하면 쉽습니다.
add(3, 5); // 8
calculator(add, 3, 5); // 8
const onClick = () => (event) => {
console.log('hello');
};
document.querySelector('#header').addEventListener('click', onClick());
// -> 다음과 같이 onClick() 을 return 값으로 대체
document.querySelector('#header').addEventListener('click', (event) => {
console.log('hello');
});
호출 스택
앞에서 함수 선언과 함수 호출의 차이를 명확하게 배운 이유가 이번에 호출 스택에 대해 자세히 알아보기 위해서입니다. 보통 함수를 호출하기 위해선 함수를 선언하고, 함수를 호출하는 과정을 거칩니다.
// 함수 선언
function c() {}
// 함수 호출
c();
하지만, 현업에선 위와 같이 단순한 코드보단 아래와 같이 변수를 동반한 복잡한 코드를 만나게 되는 경우가 더 많습니다.
const x = 'x';
function c() {
const y = 'y';
console.log('c');
}
function a() {
const x = 'x';
console.log('a');
function b() {
const z = 'z';
console.log('b');
c();
}
b();
}
a();
c();
실제로 이 코드에서 실행해보지 않고도 결과값을 예상할 수 있어야 하고, 어떤 함수에서 어떤 변수에 접근이 가능한지 미리 알 수가 있어야 합니다. 이는 이 강좌가 향하고 있는 목표라고 할 수 있습니다.
자바스크립트에는 공식 스펙이라고 할 수 있는 자바스크립트 스펙 무수히 많습니다. 이 모든 것을 외우지 않고도 자바스크립트 코드의 결과값을 99% 알 수 있습니다.(나머지 1% 는 사용하지 않습니다.)
자바스크립트 또는 프로그래밍 코드들은 항상 위에서 아래로 실행된다는 것을 이미 알고 있을 겁니다. 하지만, 진정 자바스크립트 엔진이 되기 위해선 1차원적인 생각은 잠깐 벗어나서 그림을 하나 그릴 줄 알아야 합니다.
스택(Stack)
함수호출이란 간단히 말해 호출을 할 때마다 스택이 쌓인다는 것입니다. 스택 자료구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말합니다.
스택의 특징은 선입선출의 반대개념으로 제일 나중에 들어온 것이 제일 처음 나가고, 제일 처음 들어온 것이 제일 나중에 나가는 구조입니다.
큐(Queue)
큐는 정해진 한 곳(top)을 통해서 삽입, 삭제가 이루어지는 스택과는 달리, 한쪽 끝에서 삽입 작업이, 다른 쪽 끝에서 삭제 작업이 양쪽으로 이루어집니다. 선입선출의 구조를 가지고 있습니다.
'zerocho > 인간 JS 엔진 되기(JS 고급 강좌)' 카테고리의 다른 글
this (0) | 2023.03.21 |
---|---|
호이스팅, TDZ(Temporal Dead Zone) (0) | 2023.03.20 |
스코프 체인 (0) | 2023.03.20 |
호출 스택 분석 (0) | 2023.03.17 |
함수와 함수 호출의 차이 (0) | 2023.03.15 |