TIL | JavaScript 기초 개념 및 용어 정리

자바스크립트의 기초개념 용어 정리 | 이해한대로 적었으나, 틀린 부분은 지적부탁드립니다.

 

메인 개념들은 비동기성(asynchronous), 스코프(scope), 호이스팅(hoisting), 클로저(closure), 오브젝트(object)다.

비동기성(Asynchronous)

• 동기식 프로그래밍은 말 그대로 코드들이 한줄씩 순차적으로 실행되는 것을 의미한다. 메인 스레드에서 call stack에 쌓인 함수들을 순차적으로 처리하는 방식이므로 call stack이 완전하게 비어있지 않는 한, 다음 함수가 실행될 수 없다.
• 이때, 메인 스레드가 아닌 워커 스레드를 통해 비동기식 처리를 진행한다.
• 비동기식 처리를 위해서는 이벤트 핸들러로 콜백을 요청한다. 그런데 복잡하게 콜백 처리가 이루어지는 경우 콜백지옥에 빠질 수 있게된다.
• 보다 nice한 비동기 작업은 Promise 처리이다. Promise를 통해 pending(보류), fulfilled(처리함), rejected(거부)의 결과를 얻을 수 있다.
• asynchronous

Introducing asynchronous JavaScript - Learn web development | MDN

스코프(scope)

• 스코프란 변수가 유효성을 갖는 영역을 가리킨다.
• 현재 실행되는 컨텍스트를 말한다.
• 이때 컨텍스트는 값, 표현식이 표현되거나 참조될 수 있다.
• 종속된 함수에서 상위 함수에서 정의된 변수를 참조할 수는 있지만, 그 반대는 불가능하다.
• call stack 처리를 위한 유효영역(?).
• scope

스코프 - 용어 사전 | MDN

호이스팅(hoisting)

• 자바스크립트에서의 hoisting은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• MDN에 의하면 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이라고 한다.
• 내가 이해한 바로는, 변수또는 함수가 호출이 되는 시점이 선언되는 시점보다 앞서있을 때도 자연스럽게 잘 동작하게 해준다는 것이다.
• hoisting

호이스팅 - 용어 사전 | MDN

클로저(closure)

• 함수와 함수가 선언된 어휘적 환경의 조합이다.
• MDN에서 정의한 문장을 이해하지 못하여... 삽질을 계속 하다가 얻어낸 나만의(?) 정의는 다음과 같다.
• 함수가 함수에 종속되었을 때, 종속된 함수는 그 함수를 감싸고 있는 함수에서 정의한 변수를 참조할 수 있다는 것이다.
• 변수의 유효범위를 지정하는 것을 Lexical scoping이라고 하는데 변수의 유효범위가 종속된 함수의 scope를 벗어난 범위까지 확장될 수 있다는 점에서, C#에서는 상상도 할 수 없던... 변수의 재활용성을 극한으로 끌어올린 것 같다.
• closure

클로저 - JavaScript | MDN

 

오브젝트(object)

• 오브젝트는 관련된 데이터와 함수의 집합
• 데이터와 연관된 함수를 저장하는데 매우 유용한 구조로 쓰인다.
• 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로 시작한다.
• 객체에 접근할 때는 점 또는 괄호로 접근한다.
• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

JavaScript 객체 기본 - Web 개발 학습하기 | MDN