학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.
부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.
이번편은 JavaScript:Functions and Classes 초급편에 이은 고급편입니다.
더 심화된 기초를 다루므로 이전 초급편을 읽고오시는 것을 추천드립니다.
Closure
클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다.
다시 말해, 클로저는 함수 내부에서 선언된 변수에 접근할 수 있는 특별한 함수입니다.
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const increment = outer();
increment(); // 1
increment(); // 2
함수가 선언될 때의 범위를 기준으로 변수를 해석합니다. 위의 클로저 예시에서 'inner'함수는 'outer'함수의 변수에 접근할 수 있습니다.
IIFE (Immediately Invoked Function Expression)
IIFE는 정의되자마자 즉시 실행되는 함수입니다.
이 패턴은 주로 스코프를 제한하기 위해 사용됩니다.
(function() {
const temp = "IIFE Example";
console.log(temp); // "IIFE Example"
})();
// temp is not defined outside of the IIFE
Function Scope
함수 내에서 선언된 변수는 해당 "함수 내"에서만 접근 가능합니다.
function funcScope() {
let x = 10;
console.log(x); // 10 출력
}
funcScope();
// console.log(x); // 오류
호이스팅(Hoisting)
호이스팅은 변수와 함수의 선언이 그들의 포함된 스코프의 상단으로 끌어올려지는 JavaScript의 동작입니다.
"var" 선언은 초기화와 함께 호이스팅되지만, "let"과 "const"는 초기화 없이 호이스팅됩니다.
console.log(x); // undefined
var x = 5;
console.log(x); // 5
console.log(y); // ReferenceError //let과 const는 호이스팅 되지만 TDZ에 있음
let y = 10;
console.log(myFunction()); // "Hello"
function myFunction() {
return "Hello";
}
함수 호이스팅
함수 선언은 호이스팅되며, 함수 전체가 끌어올려집니다. 즉, 함수 선언 전에도 함수를 호출할 수 있습니다.
// 함수 선언 전에 호출 가능
helloWorld(); // Output: "Hello, world!"
function helloWorld() {
console.log("Hello, world!");
}
"함수 표현식"은 호이스팅되지 않습니다. 정확히 말하면, 변수가 호이스팅되지만 함수로 초기화되는 것은 호이스팅되지 않습니다.
// 이렇게 하면 에러가 발생합니다.
helloWorld(); // TypeError: helloWorld is not a function
const helloWorld = function() {
console.log("Hello, world!");
};
TDZ (Temporal Dead Zone)
TDZ는 let과 const로 선언된 변수가 "선언되기 전까지" 접근할 수 없는 코드 영역을 나타냅니다.
이러한 제한은 변수의 무분별한 사용을 방지하고, 코드의 안정성을 높이기 위함입니다.
console.log(a); // ReferenceError: Cannot access 'a' before initialization TDZ상태에 있다.
let a = 5;
function example() {
console.log(b); // ReferenceError //함수 내 TDZ
let b = 10;
}
example();
for(let i = 0; i < 5; i++) {
console.log(j); // ReferenceError on first iteration //반복문 내 TDZ
let j = i * 2;
}
예외 처리 (try and catch)
try와 catch, finally를 사용하여 예외를 처리할 수 있습니다.
try {
const age = -1;
if (age < 0) {
throw new Error("Age cannot be negative");
}
} catch (error) {
console.log("An error occurred:", error.message);
}
try {
console.log("Trying to execute this block");
throw new Error("Oops! Error occurred");
} catch (error) {
console.log("Caught an error:", error.message);
} finally {
console.log("This block will always execute");
}