Demystifying JavaScript: 실행 컨텍스트, 호이스팅 및 유형 변환 이해

JavaScript는 표면적으로는 단순해 보이지만 내부적으로는 많은 일이 일어나고 있습니다. 오늘은 실행 컨텍스트, 호이스팅, 원시 데이터 유형과 비원시 데이터 유형, 유형 변환과 같은 몇 가지 필수 개념을 살펴보겠습니다. 더 나은 버그 없는 코드를 작성하려면 이러한 사항을 이해하는 것이 중요합니다.

전역 실행 컨텍스트 및 어휘 환경
브라우저에서 JavaScript 파일을 실행하면 코드가 호출 스택에서 한 줄씩 실행됩니다. 그러나 코드가 실행되기 전에 전역 실행 컨텍스트가 생성됩니다. 이 컨텍스트는 this 및 window 개체를 설정합니다. Node.js에서 window에 해당하는 것은 global이며, 둘을 비교해 보면 window === global이 true를 반환한다는 것을 알 수 있습니다.

함수를 호출할 때마다 새로운 어휘 환경이 생성됩니다. 전역 실행 컨텍스트가 가장 먼저 생성되며, 그 안에 정의된 모든 함수는 해당 변수에 액세스할 수 있습니다. 이것이 JavaScript의 범위 체인이 작동하는 방식입니다. 함수 내부에서 외부(전역) 범위의 변수에 액세스할 수 있습니다.

호이스팅: 변수와 ​​함수
JavaScript에는 컴파일 중에 변수와 함수가 해당 범위의 맨 위로 "이동"되는 호이스팅이라는 메커니즘이 있습니다. 작동 방식은 다음과 같습니다.

변수: var로 선언된 변수는 부분적으로 호이스트됩니다. 즉, 초기화되기 전에 참조할 수 있지만 해당 값은 초기화된 줄에 도달할 때까지 정의되지 않습니다.
함수: 함수 선언 구문으로 선언된 함수는 완전히 호이스팅됩니다. 즉, 코드에서 함수를 선언하기 전에도 함수를 호출할 수 있습니다.
예:

console.log(a); // undefined
var a = 5;

console.log(b); // Error: b is not defined
let b = 10;

hoistedFunction(); // Works!
function hoistedFunction() {
  console.log('This function is hoisted!');
}

notHoistedFunction(); // Error: notHoistedFunction is not a function
var notHoistedFunction = function() {
  console.log('This function is not hoisted!');
}

보시다시피 let과 const는 var처럼 호이스팅되지 않으며 함수 표현식(예: notHoistedFunction)은 런타임에만 정의됩니다.

기본 유형과 비기본 유형
JavaScript에는 기본 데이터와 비원시 데이터라는 두 가지 유형의 데이터가 있습니다.

기본 유형에는 문자열, 숫자, 부울, 정의되지 않음, null, 기호 및 bigint가 포함됩니다. 이는 변경할 수 없습니다. 즉, 해당 값을 변경할 수 없습니다. 예:

let x = 'hello';
x[0] = 'H'; // This won’t change the string, it stays 'hello'

비원시 유형은 객체, 배열, 함수입니다. 이는 변경 가능하며 참조로 전달되므로 해당 값이 변경될 수 있습니다. 예를 들면 다음과 같습니다.

let obj1 = { name: 'John' };
let obj2 = obj1; // Both obj1 and obj2 now reference the same object
obj2.name = 'Doe';
console.log(obj1.name); // Outputs: Doe

원본 객체의 수정을 방지하려면 Object.sign() 또는 스프레드 연산자(...)를 사용하여 얕은 복사본을 생성할 수 있습니다. 중첩된 객체를 복사하는 전체 복사의 경우 JSON.parse() 및 JSON.stringify()를 사용하세요.

예제 코드 조각: 얕은 복사와 깊은 복사

// Shallow copy example
let obj1 = { name: 'John', details: { age: 30 } };
let obj2 = { ...obj1 }; // Shallow copy
obj2.details.age = 40;
console.log(obj1.details.age); // Output: 40 (Shallow copy affects the original)

// Deep copy example
let obj3 = JSON.parse(JSON.stringify(obj1)); // Deep copy
obj3.details.age = 50;
console.log(obj1.details.age); // Output: 40 (Deep copy doesn’t affect the original)

유형 변환 및 비교
JavaScript는 동적으로 유형이 지정되는 언어입니다. 즉, 변수 유형을 명시적으로 지정할 필요가 없습니다. 그러나 이로 인해 특히 비교 연산자를 사용할 때 예상치 못한 동작이 발생할 수 있습니다.

형 강제를 피하기 위해 항상 이중 등호(==)보다 삼중 등호(===)를 사용하는 것을 선호합니다. 예:

console.log(0 == '0'); // true (type coercion happens)
console.log(0 === '0'); // false (no type coercion)

NaN 비교와 같은 특별한 경우에는 NaN === NaN이 false를 반환하므로 Object.is()를 사용하세요.

console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

JavaScript의 런타임과 Node.js
JavaScript는 단일 스레드 동기 런타임에서 실행됩니다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 이는 제한적으로 보일 수 있지만 JavaScript는 웹 API 및 콜백 대기열을 사용하여 비동기 작업을 효율적으로 처리합니다. 작동 방식은 다음과 같습니다.

JavaScript는 비동기 작업(예: setTimeout 또는 HTTP 요청)을 발견하면 해당 작업을 Web API로 보냅니다.
호출 스택은 나머지 코드를 계속 실행합니다.
비동기 작업이 완료되면 콜백 대기열에 추가되고 콜 스택이 비어 있을 때 실행됩니다.
Node.js는 V8 엔진과 libuv에서 제공하는 비차단 I/O 시스템을 사용하여 이 런타임을 서버측으로 확장합니다. Node.js는 다른 작업을 차단하지 않고 여러 요청을 처리할 수 있는 단일 스레드 이벤트 루프라는 아이디어를 도입했습니다.

JavaScript가 실행 컨텍스트, 호이스팅, 유형 변환 및 비동기 작업을 처리하는 방법을 이해하면 더 깔끔하고 효율적인 코드를 작성할 수 있습니다. JavaScript의 동적 특성을 통해 TypeScript와 같은 도구는 코드를 즉시 제작할 수 있도록 정적 유형 검사를 제공하여 일반적인 함정을 피하는 데 도움이 될 수 있습니다.

위 내용은 Demystifying JavaScript: 실행 컨텍스트, 호이스팅 및 유형 변환 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!