4일차: 함수와 스코프

개발/Javascript

4일차: 함수와 스코프

꿈꾸는법사 2025. 1. 30. 14:45

이번 4일차에서는 자바스크립트의 함수와 스코프(Scope) 개념을 배웁니다. 함수는 코드의 재사용성을 높이고, 특정 작업을 모듈화하는 데 유용한 중요한 개념입니다. 스코프는 변수나 함수가 접근할 수 있는 범위를 정의하며, 자바스크립트의 변수 생명 주기 및 가시성을 이해하는 데 중요합니다.

함수 기본 개념

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 선언 후 호출하여 여러 번 사용할 수 있습니다.

함수 선언과 호출

함수는 function 키워드를 사용하여 선언합니다. 선언한 후에는 함수 이름을 통해 호출할 수 있습니다.
- 함수 선언:
```
function greet() {
    console.log("Hello, world!");
}
```
- 함수 호출:
```
greet();  // "Hello, world!" 출력
```
함수 매개변수와 반환값

함수는 입력값(매개변수)을 받아 특정 작업을 수행하고, 그 결과를 반환값으로 돌려줄 수 있습니다.
- 매개변수:
  함수는 매개변수를 사용하여 외부에서 값을 전달받을 수 있습니다.
```
function add(a, b) {
    return a + b;
}
console.log(add(3, 5));  // 8 출력
```
- 반환값:
  return 키워드를 사용하여 함수에서 값을 반환할 수 있습니다.
```
function multiply(a, b) {
    return a * b;
}
let result = multiply(4, 3);
console.log(result);  // 12 출력
```
함수 표현식 (익명 함수)

함수 표현식은 함수 선언 대신 변수에 함수를 할당하는 방법입니다. 익명 함수는 이름이 없는 함수로, 주로 일시적인 함수가 필요할 때 사용됩니다.
- 익명 함수 (함수 표현식):
```
const greet = function() {
    console.log("Hello, world!");
};
greet();  // "Hello, world!" 출력
```
- 즉시 실행 함수 표현식 (IIFE):
  함수 선언과 동시에 실행하는 방법으로, 주로 모듈화에서 사용됩니다.
```
(function() {
    console.log("I am an IIFE!");
})();  // "I am an IIFE!" 출력
```

스코프(Scope)

스코프는 변수가 유효한 범위(즉, 접근할 수 있는 범위)를 결정합니다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있으며, let, const, var를 사용할 때 각기 다른 스코프를 가집니다.

전역 스코프와 지역 스코프

전역 스코프:
전역 스코프에 선언된 변수는 전체 프로그램에서 접근 가능합니다.

let globalVar = "I am global";  // 전역 변수

function display() {
    console.log(globalVar);  // "I am global"
}
display();

지역 스코프:
지역 스코프에 선언된 변수는 함수 내에서만 접근할 수 있습니다.

function localScope() {
    let localVar = "I am local";  // 지역 변수
    console.log(localVar);  // "I am local"
}
localScope();
console.log(localVar);  // 오류: localVar는 지역 변수이므로 접근할 수 없음

let, const와 var의 스코프 차이

var:
var로 선언된 변수는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 var 변수는 함수 내 어디에서든 접근할 수 있습니다.

function testVar() {
    if (true) {
        var x = 10;  // 함수 내에서 선언된 변수
    }
    console.log(x);  // 10 (블록 밖에서도 접근 가능)
}
testVar();

let과 const:
let과 const는 블록 스코프를 가집니다. 즉, 중괄호 {} 내에서만 유효하며, 그 밖에서는 접근할 수 없습니다.

function testLetConst() {
    if (true) {
        let y = 20;  // 블록 스코프 변수
        const z = 30;  // 블록 스코프 상수
    }
    console.log(y);  // 오류: y는 블록 밖에서 접근 불가
    console.log(z);  // 오류: z는 블록 밖에서 접근 불가
}
testLetConst();

클로저(Closure)

클로저는 함수와 함수가 선언될 때의 환경(즉, 변수들)을 기억하는 함수입니다. 이는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해주는 특징을 가집니다.
- 클로저 예시:
```
function outer() {
    let counter = 0;
    return function inner() {
        counter++;
        console.log(counter);
    };
}

const increment = outer();
increment();  // 1 출력
increment();  // 2 출력
increment();  // 3 출력
```
여기서 inner 함수는 outer 함수의 변수인 counter에 계속 접근할 수 있습니다. 이는 클로저 덕분에 가능하며, counter 변수는 increment 함수가 실행될 때마다 증가합니다.

실습

간단한 함수를 작성하고, 매개변수를 활용한 계산 함수 만들기

목표: 함수에 매개변수를 전달하여 계산하고, 결과를 반환하는 함수를 만들어 봅니다.

예시:

// 두 숫자의 합을 구하는 함수
function add(a, b) {
    return a + b;
}
console.log(add(5, 10));  // 15 출력

// 두 숫자의 곱을 구하는 함수
function multiply(a, b) {
    return a * b;
}
console.log(multiply(3, 4));  // 12 출력

클로저 실습:

내부 함수가 외부 함수의 변수에 접근할 수 있는 클로저를 활용한 예시입니다.

function createCounter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter();  // 1 출력
counter();  // 2 출력
counter();  // 3 출력

정리

오늘 4일차에서는 함수와 스코프에 대해 배웠습니다. 함수는 코드를 재사용할 수 있게 해주며, 매개변수와 반환값을 통해 다양한 작업을 할 수 있습니다. 또한, 스코프를 이해하면 변수가 어디에서 유효한지 파악하고, 클로저를 활용하여 변수의 생명 주기와 접근을 효율적으로 관리할 수 있습니다. 실습을 통해 함수를 작성하고, 매개변수를 활용한 계산 함수와 클로저 개념을 익혔습니다.

저작자표시