웹 시스템 개발 #JavaScript: Functions and Classes 고급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

 

이번편은 JavaScript:Functions and Classes 초급편에 이은 고급편입니다.

 

더 심화된 기초를 다루므로 이전 초급편을 읽고오시는 것을 추천드립니다.

웹 시스템 개발 #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");
}