[혼공스] 4주차_함수

이 카테고리는 한빛미디어의 혼자 공부하는 자바스크립트 교재를 학습하는 내용을 정리하는 공간입니다.

---

📌 자바스크립트 함수 정리

1. 함수(Function)란?

• 특정 작업을 수행하는 코드 블록.
• 같은 코드를 반복해서 사용하지 않도록 도와줌 (재사용성).
• 유지보수와 가독성을 높여줌.

2. 함수 선언 방식

2.1. 함수 선언문 (Function Declaration)

function sayHello() {
  console.log("Hello, World!");
}
sayHello(); // 실행 결과: Hello, World!

• function 키워드를 사용해 선언.
• 코드 실행 전에 호이스팅됨.

2.2. 함수 표현식 (Function Expression)

const sayHello = function() {
  console.log("Hello, World!");
};
sayHello(); // 실행 결과: Hello, World!

• 변수에 익명 함수를 할당.
• 선언 전에 호출할 수 없음 (호이스팅 X).

2.3. 화살표 함수 (Arrow Function)

const sayHello = () => {
  console.log("Hello, World!");
};
sayHello();

• function 키워드를 사용하지 않고 => 사용.
• this 바인딩 방식이 다름.

---

3. 함수 매개변수와 반환값

3.1. 매개변수 (Parameters)

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("Alice"); // 실행 결과: Hello, Alice!

• name이 매개변수(parameter).

3.2. 기본값 매개변수 (Default Parameters)

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // 실행 결과: Hello, Guest!

• 값이 전달되지 않으면 기본값 사용.

3.3. 반환값 (Return Value)

function add(a, b) {
  return a + b;
}
const sum = add(3, 4);
console.log(sum); // 실행 결과: 7

• return을 사용해 결과 반환.

---

4. 함수의 다양한 활용

4.1. 콜백 함수 (Callback Function)

• 함수의 인자로 전달되어 실행되는 함수.

function process(callback) {
  console.log("작업 시작");
  callback();
  console.log("작업 끝");
}
process(() => console.log("중간 작업")); 

실행 결과:

작업 시작
중간 작업
작업 끝

4.2. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

(function() {
  console.log("즉시 실행 함수!");
})();

• 함수가 정의되자마자 즉시 실행됨.

4.3. 재귀 함수 (Recursive Function)

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 실행 결과: 120

• 자기 자신을 호출하는 함수.
• 반복문 없이 반복적인 작업 수행 가능.

4.4. 클로저 (Closure)

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const counter = outer();
counter(); // 실행 결과: 1
counter(); // 실행 결과: 2

• 내부 함수가 외부 함수의 변수에 접근할 수 있음.
• 상태를 유지하는 함수 만들 때 유용.

---

5. 함수와 this 키워드

5.1. 일반 함수에서 this

function showThis() {
  console.log(this);
}
showThis(); // 실행 결과: window (strict mode에서는 undefined)

• 전역에서 호출하면 window(브라우저 환경) 또는 undefined(strict mode) 출력.

5.2. 객체 메서드에서 this

const person = {
  name: "Alice",
  greet() {
    console.log(this.name);
  }
};
person.greet(); // 실행 결과: Alice

• this는 호출된 객체를 가리킴.

5.3. 화살표 함수에서 this

const obj = {
  value: 10,
  getValue: () => {
    console.log(this.value);
  }
};
obj.getValue(); // 실행 결과: undefined

• 화살표 함수는 this를 바인딩하지 않음 (상위 스코프의 this를 그대로 사용).

---

6. 정리

• 자바스크립트의 함수는 다양한 방식으로 선언 가능 (선언문, 표현식, 화살표 함수).
• 매개변수, 반환값, 기본값을 활용할 수 있음.
• 콜백 함수, 즉시 실행 함수, 재귀 함수, 클로저 등으로 유용하게 사용됨.
• this는 함수의 호출 방식에 따라 다르게 동작함.

 

 

p.202 <윤년을 확인하는 함수 만들기>