TIL - 20251205

juni·2025년 12월 5일

TIL

목록 보기

198/317

1205 JavaScript 기초 복습 (3/4): 함수 심화, 스코프, 비동기

✅ 1. 함수 심화 (Function)

함수는 코드의 재사용성을 높이는 가장 중요한 요소입니다. JavaScript에서는 함수를 다양한 방식으로 정의하고 활용할 수 있습니다.

➕ 1-1. 함수 표현식 (Function Expression)과 화살표 함수 (Arrow Function)

함수 표현식: 변수에 함수를 할당하는 방식. 익명 함수(이름 없는 함수)를 사용할 수 있습니다.
```
const greet = function(name) {
  return 'Hello, ' + name;
};
```

화살표 함수 (Arrow Function - ES6+): function 키워드와 return 키워드를 생략하여 코드를 매우 간결하게 만들 수 있습니다. this 바인딩 방식도 일반 함수와 다릅니다.

// 매개변수 1개, 반환문 1개일 경우 중괄호와 return 생략 가능
const greet = name => 'Hello, ' + name;

// 매개변수 여러 개, 반환문 여러 줄일 경우
const add = (a, b) => {
  const result = a + b;
  return result;
};

➕ 1-2. 고차 함수 (Higher-Order Function)

개념: 함수를 인자로 받거나(매개변수), 함수를 반환(return)하는 함수를 의미합니다.
예시: Array.prototype.map, filter, forEach 등 배열 메서드들은 모두 고차 함수입니다. 이 메서드들은 콜백 함수(Callback Function)를 인자로 받습니다.
```
// map은 콜백 함수(element => element * 2)를 인자로 받음
const numbers =;
const doubled = numbers.map(num => num * 2); //
```

✅ 2. 스코프 (Scope)

스코프란 변수, 함수 등 식별자(Identifier)에 접근할 수 있는 유효 범위를 의미합니다. 스코프를 이해하는 것은 변수 이름 충돌을 방지하고 코드를 안전하게 작성하는 데 매우 중요합니다.

➕ 스코프의 종류

전역 스코프 (Global Scope): 코드의 어디에서든 접근 가능한 범위. 최상위 레벨에서 선언된 변수.
함수 스코프 (Function Scope): var 키워드로 선언된 변수의 유효 범위. 함수 내부 어디에서든 접근 가능.
블록 스코프 (Block Scope): let, const 키워드로 선언된 변수의 유효 범위. {} 블록 내부에서만 접근 가능.

호이스팅 (Hoisting): JavaScript는 코드를 실행하기 전에, var로 선언된 변수와 함수 선언문을 스코프의 최상단으로 끌어올려 미리 등록하는 특징이 있습니다. let, const는 호이스팅은 되지만, 초기화 전에 접근하면 ReferenceError가 발생합니다.

console.log(globalVar); // "I am global" (전역 스코프)

function testScope() {
  var functionScopedVar = "I am function scoped";
  if (true) {
    let blockScopedVar = "I am block scoped";
    console.log(functionScopedVar); // 접근 가능
    console.log(blockScopedVar);    // 접근 가능
  }
  // console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined (블록 스코프 벗어남)
}
testScope();

✅ 3. 클로저 (Closure)

클로저란 "함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)의 조합"입니다.
간단히 말해: 함수가 자신의 스코프 외부의 변수에 접근할 수 있는 능력입니다. 함수가 생성될 때의 환경(스코프 체인)을 기억하고 있다가, 나중에 호출될 때도 그 환경에 접근할 수 있습니다.

작동 방식: 함수가 생성될 때, 해당 함수는 자신이 생성될 당시의 외부 변수들에 대한 참조를 함께 저장합니다. 이 참조를 통해 나중에 함수가 다른 스코프에서 호출되더라도, 원래의 외부 변수 값에 접근할 수 있습니다.

function outerFunction(outerVariable) {
  // innerFunction은 outerFunction의 스코프에 있는 outerVariable에 접근 가능
  return function innerFunction(innerVariable) {
    console.log('Outer:', outerVariable); // 클로저에 의해 outerVariable 접근 가능
    console.log('Inner:', innerVariable);
  };
}

const myFunction = outerFunction('Hello'); // outerFunction 실행, innerFunction 반환
myFunction('World'); // innerFunction 호출, 'Hello'와 'World' 출력

활용: 이벤트 핸들러, 콜백 함수, 부분 적용(Partial Application) 등 다양한 곳에서 유용하게 사용됩니다.

✅ 4. 비동기 프로그래밍 (Asynchronous Programming)

동기(Synchronous): 작업이 순차적으로, 한 번에 하나씩 실행되는 방식. 이전 작업이 완료될 때까지 다음 작업은 대기합니다. (e.g., 일반적인 함수 호출)
비동기(Asynchronous): 작업이 순차적으로 실행되지 않고, 시간이 오래 걸리는 작업(e.g., 네트워크 요청, 파일 읽기)을 백그라운드에서 실행시킨 후, 결과를 기다리지 않고 즉시 다음 코드를 실행하는 방식입니다. 나중에 작업이 완료되면 콜백 함수나 Promise 등을 통해 결과를 처리합니다.

➕ 비동기 처리 방식

콜백 함수 (Callback Function): 비동기 작업이 완료된 후 실행될 함수를 미리 전달하는 방식. 콜백 함수가 중첩되면 "콜백 지옥(Callback Hell)"이 발생하여 코드가 복잡해집니다.
Promise: 비동기 작업의 "미래의 결과"를 나타내는 객체. then()과 catch() 메서드를 사용하여 비동기 작업의 성공/실패를 처리합니다. 콜백 지옥을 개선합니다.

async/await (ES8+): Promise를 기반으로, 비동기 코드를 동기 코드처럼 보이게 작성할 수 있게 해주는 문법 설탕(Syntactic Sugar)입니다. async 함수 내에서 await 키워드를 사용하면, Promise가 완료될 때까지 기다렸다가 그 결과를 반환합니다. 코드가 훨씬 읽기 쉽고 간결해집니다.

// async/await 예시
async function fetchData() {
  try {
    const response = await fetch('api/data'); // 비동기 요청 (await로 결과 기다림)
    const data = await response.json();      // 응답 파싱 (await로 결과 기다림)
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData(); // 함수 호출

📌 요약

함수는 JavaScript 코드의 기본 구성 단위이며, 화살표 함수는 간결한 문법을 제공합니다.
스코프는 변수의 유효 범위를 결정하며, let/const는 블록 스코프를 가집니다.
클로저는 함수가 자신의 외부 변수에 접근할 수 있는 능력을 말하며, 비동기 처리 등에서 유용하게 사용됩니다.
비동기 프로그래밍은 시간이 오래 걸리는 작업을 백그라운드에서 처리하여 애플리케이션의 응답성을 높이며, async/await 문법은 이를 가장 현대적이고 가독성 좋게 작성하는 방법입니다.