함수

1. 함수

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록으로, 필요할 때 이름을 호출해서 반복적으로 사용할 수 있는 구조입니다. 함수를 사용하면 같은 코드를 여러 번 작성하지 않고 재사용할 수 있어 코드가 더 효율적이고 깔끔해집니다. 함수는 function 키워드를 사용하여 정의하며, 괄호 안에는 함수에 전달할 매개변수(입력값)를 넣을 수 있고, 내부에서 return 키워드를 사용해 결과값(출력값)을 반환할 수 있습니다. 함수는 자바스크립트에서 반복되는 작업을 모듈화하고 재사용하기 위한 핵심 도구입니다. 자바스크립트에서는 함수를 만드는 두 가지 방법이 있습니다. 기본 함수 선언식과 함수 표현식인데 비슷해 보이지만 중요한 차이점이 있습니다.

 

1. 기본 함수 선언식 (Function Declaration)

function sayHello() {
  console.log("안녕하세요!");
}

• function 키워드로 시작하고, 이름을 붙여 정의합니다.
• 독립적으로 선언된 함수입니다.
• 전역적으로 자주 호출할 함수로 작성
• 호이스팅 덕분에 선언 전에 호출해도 정상작동

 

2. 함수 표현식 (Function Expression)

const sayHello = function() {
  console.log("안녕하세요!");
};

• 함수 자체는 익명 함수(이름 없는 함수)이고,
• 이것을 const, let, var 같은 변수에 저장한 형태입니다.
• 필요한 순간에만 쓰는 함수

 

호이스팅

자바스크립트가 코드를 실행하기 전에, 변수와 함수 선언을 "끌어올리는" 동작을 말합니다. 즉, 변수나 함수가 코드의 아래쪽에 있어도, 위쪽에 있는 것처럼 동작하는 현상입니다.

 

 

2. 자바스크립트 실행 과정

자바스크립트는 코드를 실행할 때 2단계 과정으로 처리합니다

 

1. 소스 코드 준비 단계 (메모리 생성 단계 / 변수 선언 단계)

• 코드를 실행하기 전에 자바스크립트 엔진은 전체 코드를 한 번 훑습니다.
• 이 과정에서 변수(식별자)를 메모리에 등록(선언)하고 함수 선언식은 전체 함수 내용까지 메모리에 저장합니다. 단, 값의 할당은 아직 하지 않음 (변수는 undefined로 초기화됨)

✅ 이게 바로 호이스팅의 정체입니다!!

 

2. 실행 단계 (코드 한 줄씩 실행)

• 선언이 끝난 후에야 코드가 위에서부터 한 줄씩 실행됩니다.
• 이때 변수에 값이 할당되고, 함수가 호출됩니다.

 

 

3. 다양한 함수의 형태

1. 매개변수가 없는 함수

매개변수가 없고, 정해진 코드만 실행합니다.

function showMessage() {
  console.log("환영합니다!");
}

showMessage();

 

2. 매개변수가 있는 함수

매개변수를 받아서 동적으로 동작합니다.

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("김사과");

 

3. 리턴이 있는 함수

결과를 return으로 반환해서 다른 곳에서 사용할 수 있습니다.

function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result);

 

4. 기본값이 있는 함수 (Default Parameters)

매개변수를 안 넣으면 기본값이 사용됩니다.

function greet(name = "게스트") {
  console.log("안녕하세요, " + name + "님!");
}

greet();
greet("김사과");

 

5. 가변 매개변수 함수 (Rest Parameter)

매개변수가 몇 개인지 몰라도 받을 수 있습니다. (... 사용)

function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2));
console.log(sum(1, 2, 3, 4));

 

6. 즉시 실행 함수 (IIFE)

정의하자마자 바로 실행되는 함수입니다. 한 번만 실행되는 초기화 코드 등에 사용됩니다.

(function() {
  console.log("이건 즉시 실행 함수입니다!");
})();

 

7. 함수 안에 함수 (중첩 함수)

함수 내부에서 또 다른 함수를 정의할 수 있습니다.

function outer() {
  function inner() {
    console.log("안쪽 함수 실행!");
  }
  inner();
}

outer();

 

8. 함수에서 함수 반환 (고차 함수)

함수가 다른 함수를 리턴할 수 있습니다.

function createGreeting(message) {
  return function(name) {
    console.log(message + ", " + name + "님!");
  };
}

const hello = createGreeting("안녕하세요");
hello("김사과");