[자바스크립트] 호이스팅 (Hoisting) 호이스팅(Hoisting)은 자바스크립트에서 변수(var)와 함수(function)선언이 소스코드의 상단으로 옮겨지는 것을 의미합니다. 즉, 변수와 함수 선언이 코드 실행 전에 먼저 처리되어 해당 스코프의 최상단에 위치하게 됩니다. 다만, 호이스팅은 변수의 할당과 함수의 정의를 옮기는 것이지, 변수의 초기화나 함수의 호출을 옮기는 것은 아닙니다. 이는 변수와 함수가 소스코드에서 실제로 작성된 위치에서 실행됩니다. 1. 호이스팅의 3가지 유형 자바스크립트의 호이스팅은 아래와 같은 세 가지 유형으로 구분할 수 있습니다. 1) 변수 호이스팅 (Variable Hoisting) 변수 선언문(var)이 소스코드에서 상단으로 옮겨지는 것을 의미합니다. 선언만 되었을 뿐 초기화는 이루어지지 않았기 때문에, 변수를 선.. 2023. 3. 8. [자바스크립트] 폴리필 (Polyfill) JavaScript 폴리필(Polyfill)은 새로운 기능을 구현하고, 구현하지 않은 브라우저에서 이전 버전의 자바스크립트 코드를 대신 실행하는 데 사용되는 코드 조각입니다. 1. 필요한 이유 새로운 자바스크립트 기능이 출시될 때, 이러한 기능은 최신 브라우저에서 잘 작동하지만, 이전 버전의 브라우저에서는 작동하지 않을 수 있습니다. 이러한 경우, 폴리필은 이전 버전의 브라우저에서도 이러한 새로운 기능을 사용할 수 있도록 도와줍니다. 예를 들어, ECMAScript 6(ES6)에서는 let 및 const 키워드를 도입하여 변수를 선언하는 방법을 개선했습니다. 그러나 이러한 키워드는 이전 버전의 브라우저에서 지원되지 않을 수 있습니다. 이 경우, 폴리필을 사용하여 let 및 const 키워드가 지원되지 않.. 2023. 3. 8. [자바스크립트] 디스트럭처링 (Destructuring) 디스트럭처링 (Destructuring)은 자바스크립트에서 배열(Array)이나 객체(Object)의 값을 쉽게 추출하여 변수에 할당할 수 있는 문법입니다. 1. 배열 디스트럭처링 배열 디스트럭처링을 사용하면, 배열의 각 요소를 배열 변수에 할당할 수 있습니다. 예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다. const arr = [1, 2, 3]; 이 배열의 각 요소를 변수에 할당하려면, 다음과 같이 할 수 있습니다. const [a, b, c] = arr; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 이렇게 배열의 각 요소를 변수에 할당할 때, 변수 이름은 원하는 대로 지정할 수 있습니다. 만약, 배열에서 일부 요소만 추출하고.. 2023. 3. 8. [자바스크립트] 이벤트 버블링 (Event Bubbling) 자바스크립트에서 이벤트 버블링(Event Bubbling)은 HTML 요소에서 발생하는 이벤트가 해당 요소의 상위 요소로 전파되는 현상을 말합니다. 이는 이벤트가 발생한 요소부터 상위 요소까지 순서대로 이벤트 핸들러가 호출되는 구조를 가지게 됩니다. 1. 이벤트 버블링의 개념 예를 들어, 다음과 같은 HTML 구조가 있다고 가정해봅시다. 이 구조에서 #inner 요소에서 클릭 이벤트가 발생하면, 이벤트는 #inner -> #outer 순서로 전파되게 됩니다. 따라서, #inner 요소에 이벤트 핸들러가 등록되어 있고, 해당 핸들러가 실행되면, 이벤트는 자동으로 #outer 요소에도 전달되며, #outer 요소에 등록된 이벤트 핸들러도 실행됩니다. 이벤트 버블링은 일반적으로 이벤트 핸들러를 여러 요소에서 .. 2023. 3. 8. [자바스크립트] 이벤트 루프 (event loop) 자바스크립트의 이벤트 루프(event loop)는 자바스크립트 엔진에서 실행되는 메커니즘으로, 비동기적인 코드를 실행하는 방식을 제어하는 역할을 합니다. 1. 목적 자바스크립트는 단일 쓰레드(single thread) 언어이기 때문에, 코드를 실행하는 순서가 중요합니다. 만약 코드가 순차적으로 실행되지 않는다면, 예측할 수 없는 결과가 발생할 수 있습니다. 하지만, 자바스크립트에서는 비동기 코드를 처리하기 위해 이벤트 루프를 사용합니다. 2. 이벤트 루프의 동작 방식 이벤트 루프는 두 가지 큐(queue)를 감시하며, 한 번에 하나의 작업만 처리합니다. 이 큐는 "콜 스택(call stack)"과 "태스크 큐(task queue)"입니다. 콜 스택은 현재 실행 중인 함수의 호출 스택(call stack).. 2023. 3. 7. 이전 1 ··· 3 4 5 6 다음
