[JavaScript] 실행 컨텍스트에 대하여 (with 호이스팅)
·
◼ FrontEnd/JavaScript
이번 포스트에서는 자바스크립트의 동작원리와 밀접한 관련이 있는 개념인 실행 컨텍스트에 대해 설명해 보겠습니다. 실행 컨텍스트를 잘 이해하면 호이스팅의 개념도 자연스럽게 이해할 수 있으며, 클로저의 동작 방식도 이해하기 쉬워집니다. 실행 컨텍스트는 자바스크립트 소스 코드를 실행하기 위해 생성되는 환경입니다. 좀 더 구체적으로 말하면, 소스 코드가 실행되는데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역입니다. 실행 컨텍스트는 스코프 내의 식별자들을 등록 및 관리하고, 코드의 실행 흐름을 제어한다는 2가지 큰 역할을 수행합니다. 아래에서 실행 컨택스트의 구성 요소와 역할에 대해 더욱 자세히 설명하겠습니다. 실행 컨텍스트는 크게 3가지 구성 요소를 가지고 있습니다. 바로 환경 레코드(Environm..
[JavaScript] 클로저에 대하여
·
◼ FrontEnd/JavaScript
이번 포스트에서는 자바스크립트의 클로저에 대해 제가 이해한 내용을 설명해보려 합니다. 우선 클로저를 쉽게 설명하면, 함수가 자신이 탄생한 환경(스코프)을 기억하는 것을 말합니다. 이로 인해 자신이 탄생한 외부 함수의 스코프가 콜 스택에서 정리되어도 그 값을 기억하고 접근할 수 있습니다. 좀 더 깊이 있게 설명하면, 클로저는 특정 함수와 그 함수가 선언될 당시의 렉시컬 환경이 함께 기억되는 구조를 말합니다. 이 정의에는 헷갈리는 개념들이 다수 포함되어 있기 때문에, 아래에 좀 더 쉽게 풀어서 설명해 보겠습니다. 우선 예시 코드부터 살펴보겠습니다.function outerFunction(outerVariable) { return function innerFunction(innerVariable) { ..
[JavaScript] 자바스크립트는 일급 함수를 지원하는 언어이다
·
◼ FrontEnd/JavaScript
MDN Web Docs에서 자바스크립트 언어에 대한 소개를 보면 첫 문장은 다음과 같다.JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다.우선 인터프리터, just-in-time 컴파일 언어는 나중에 살펴보기로 하고, 이번 포스트에서는 이 '일급 함수'라는 개념에 집중하고자 한다. 자바스크립트는 일급 함수를 지원하는 언어인데, 이게 무슨 말일까? 일급 함수란 무엇을 뜻하는 용어일까? 일급 함수란?먼저, MDN Web Docs에서 일급 함수에 대한 설명을 참고하면 다음과 같다.프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 합니다. 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들..
[JavaScript] forEach문에서 return이나 break를 쓰면 안된다
·
◼ FrontEnd/JavaScript
중간고사가 끝나고 여유가 생겨 오랜만에 코딩테스트 연습을 위해 프로그래머스에서 '올바른 괄호'라는 문제를 풀고 있었는데, 작성한 코드의 로직이 틀린 곳이 없음에도 특정 케이스가 계속 통과하지 않는 문제가 발생했습니다. 그래서 테스트케이스를 직접 작성해보고 코드도 디버깅해보며 오랜시간 전전긍긍하다 결국 문제점을 발견하고 해결했습니다. 이 문제점은 그동안 제가 전혀 몰랐던 내용이었기에, 이렇게 기록으로 남겨둡니다. 결론부터 말하면 자바스크립트의 배열을 순회하는 forEach문에서는 return문이나 break문을 작성해도 코드가 반복을 중단하지 않습니다. 그리고 forEach문 안에서 return문을 만나도 forEach문을 감싸고 있는 함수를 벗어나지 않습니다. 예시코드를 살펴보면 다음과 같습니다. fun..