[자바스크립트 14일 완전정복] 4일차 - 함수와 스코프

 

자바스크립트 공부 4일차! 오늘은 프로그래밍에서 가장 중요한 개념 중 하나인 함수를 배워볼 거예요.
함수는 코드의 재사용성을 높이고 유지보수를 쉽게 해주는 필수 요소예요.
특히, 함수 선언식과 표현식의 차이, 매개변수와 기본값 설정, 화살표 함수, 함수와 블록 스코프(var, let, const의 차이), 그리고 클로저(Closure) 개념을 정확히 이해하면 자바스크립트를 더 깊이 있게 활용할 수 있어요!

 

 

---

 

1. 함수 선언식 vs 표현식

자바스크립트에서 함수를 선언하는 방법에는 **함수 선언식(Function Declaration)**과 함수 표현식(Function Expression) 두 가지가 있어요.

✅ 함수 선언식 (Function Declaration)

함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방식이에요.

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // Hello, Alice!

• 선언적 방식이라 코드 어디에서든 호출할 수 있어요 (호이스팅 가능).
• 가독성이 좋아 함수의 역할을 명확히 나타낼 때 적합해요.

 

✅ 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식이에요.

const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet("Bob")); // Hello, Bob!

• 변수에 함수를 할당하므로 호이스팅이 불가능해요.
• 익명 함수(Anonymous Function)를 사용할 수도 있어요.

💡 차이점 정리

함수 선언식 함수 표현식

호이스팅 O	호이스팅 X
코드 어디서든 사용 가능	선언 이후부터 사용 가능
가독성 좋음	콜백 함수에 유용

 

---

 

2. 매개변수와 기본값 설정

함수를 호출할 때 인수를 전달하지 않으면 undefined가 반환돼요. 이를 방지하려면 **기본값(Default Parameter)**을 설정할 수 있어요.

✅ 기본값 설정

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

console.log(greet()); // Hello, Guest!
console.log(greet("Charlie")); // Hello, Charlie!

• name 값이 없을 경우 "Guest"가 기본값으로 사용돼요.

💡 매개변수 기본값을 활용하면 함수의 안정성을 높일 수 있어요.

 

3. 화살표 함수 (Arrow Function)

ES6에서 추가된 **화살표 함수(Arrow Function)**는 더 간결하게 함수를 작성할 수 있어요.

✅ 기본 문법

const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

• 중괄호 {} 없이 한 줄로 작성하면 return을 생략할 수 있어요.

const square = (x) => x * x;
console.log(square(5)); // 25

• 매개변수가 하나면 괄호 ()도 생략 가능.

const sayHello = () => console.log("Hello!");
sayHello(); // Hello!

• 매개변수가 없을 땐 ()를 사용해야 해요.

 

✅ 화살표 함수 vs 일반 함수 차이

화살표 함수는 this 바인딩이 다르다는 특징이 있어요.

const obj = {
    name: "Alice",
    regularFunc: function() {
        console.log("Regular:", this.name);
    },
    arrowFunc: () => {
        console.log("Arrow:", this.name);
    }
};

obj.regularFunc(); // Regular: Alice
obj.arrowFunc(); // Arrow: undefined

• 일반 함수는 this가 호출된 객체(obj)를 가리켜요.
• 화살표 함수는 this를 상위 스코프에서 가져와서(window 또는 undefined) 적용하기 때문에 obj.name이 아닌 undefined가 출력돼요.

💡 화살표 함수는 this가 필요한 경우 사용하면 안 돼요!

 

---

 

4. 함수 스코프와 블록 스코프 (var, let, const의 범위 차이)

변수의 범위(Scope)는 어디에서 접근할 수 있는지를 결정하는 중요한 개념이에요.

✅ 함수 스코프 (Function Scope)

var 키워드로 선언된 변수는 함수 내부에서만 유효해요.

function test() {
    var x = 10;
    console.log(x); // 10
}
console.log(x); // ❌ 오류 (x is not defined)

 

 

✅ 블록 스코프 (Block Scope)

let과 const는 블록 {} 내부에서만 유효해요.

if (true) {
    let a = 20;
    const b = 30;
    console.log(a, b); // 20, 30
}
console.log(a, b); // ❌ 오류 (a, b is not defined)

💡 정리

• var: 함수 스코프 (함수 내부에서만 접근 가능)
• let, const: 블록 스코프 (중괄호 {} 내부에서만 접근 가능)

 

---

 

5. 클로저(Closure) 개념

클로저는 함수 내부에서 선언된 변수가 외부 함수 실행이 끝난 후에도 유지되는 현상을 의미해요.

✅ 클로저 예제

function outer() {
    let count = 0; // 외부 함수의 변수

    return function inner() {
        count++;
        console.log(`현재 카운트: ${count}`);
    };
}

const counter = outer(); // outer() 실행 후 inner() 함수 반환
counter(); // 현재 카운트: 1
counter(); // 현재 카운트: 2

• inner 함수는 count 변수에 접근할 수 있어요.
• outer() 실행이 끝났지만, count는 inner 함수 내부에서 계속 유지돼요.

💡 클로저는 데이터를 은닉하거나(캡슐화) 상태를 유지할 때 유용해요.

 

---

 

 

✅ 함수 선언식과 표현식의 차이: 함수 선언식은 호이스팅이 가능하지만, 함수 표현식은 불가능해요.
✅ 매개변수 기본값을 설정하면 함수 호출 시 안전하게 값을 처리할 수 있어요.
✅ 화살표 함수(=>)는 this를 상위 스코프에서 가져오므로 사용 시 주의해야 해요.
✅ var는 함수 스코프, let과 const는 블록 스코프를 가지므로 let과 const를 사용하세요.
✅ 클로저(Closure)는 내부 함수가 외부 함수의 변수를 유지하는 개념으로, 상태 유지 및 캡슐화에 활용할 수 있어요.

이제 함수와 스코프 개념을 확실히 이해했으니, 다음 강의에서는 객체(Object)와 배열(Array)을 배워볼 거예요! 🚀