[JavaScript] 자바스크립트 | Arrow Function

Javascript

[JavaScript] 자바스크립트 | Arrow Function | 함수의 선언과 표현

@leem 2025. 3. 18. 23:48

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.

1. 함수란? (Function)

✅ 함수(Function)

함수는 특정 작업을 수행하거나 값을 계산하는 코드 블록입니다.
프로그래밍에서 가장 중요한 요소 중 하나이며, 재사용 가능하기 때문에 코드의 효율성을 높여줍니다.

✅ 왜 함수를 사용할까?

코드의 재사용
- 같은 기능을 여러 번 작성하지 않고 한 번 정의한 함수를 반복해서 사용할 수 있음.
가독성 향상
- 코드가 모듈화되어 구조가 깔끔해지고 이해하기 쉬워짐.
유지보수 용이
- 함수로 분리하면 특정 기능을 쉽게 수정 가능.

2. 함수 선언과 호출 (Function Declaration & Call)

✅ 함수 선언하기

JavaScript에서 함수를 선언하는 기본적인 방법입니다.

function printHello() {
  console.log('Hello');
}

function 키워드를 사용하여 함수를 선언.
함수 이름 printHello는 함수의 역할을 설명하는 것이 좋음.
{} 안에 실행할 코드를 작성.

✅ 함수 호출하기

printHello(); // "Hello"

함수는 호출해야 실행됨.
printHello();를 실행하면 "Hello"가 출력됨.

3. 매개변수와 반환값 (Parameters & Return)

✅ 함수의 입력: 매개변수 (Parameter)

함수는 입력값을 받아서 처리할 수 있음.

function log(message) {
  console.log(message);
}
log('Hello@'); // "Hello@"
log(1234); // 1234

log 함수는 message라는 매개변수(Parameter)를 받음.
log('Hello@')를 실행하면 message = 'Hello@'로 전달됨.
결과적으로 console.log('Hello@');가 실행됨.

✅ 함수의 출력: 반환값 (Return)

function sum(a, b) {
  return a + b;
}
console.log(sum(2, 3)); // 5

return 키워드를 사용하면 함수의 결과를 반환할 수 있음.
sum(2, 3)을 호출하면 2와 3을 더한 값(5)이 반환됨.

4. 기본 매개변수 (Default Parameters)

함수를 호출할 때 매개변수를 전달하지 않으면 기본값을 설정할 수 있음.

function showMessage(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // "Hi! by unknown"
showMessage('Hello', 'Ellie'); // "Hello by Ellie"

from = 'unknown' → 기본값을 설정하여 from이 전달되지 않으면 "unknown"으로 자동 지정됨.

5. 나머지 매개변수 (Rest Parameters)

매개변수의 개수를 미리 알 수 없을 때, 여러 개의 값을 배열로 저장할 수 있음.

function printAll(...args) {
  args.forEach(arg => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

...args → 여러 개의 인자를 배열로 저장.
printAll('dream', 'coding', 'ellie');를 실행하면 "dream", "coding", "ellie"가 각각 출력됨.

6. 지역 변수와 전역 변수 (Local & Global Scope)

✅ 변수의 범위 (Scope)

변수는 어디에서 선언되었느냐에 따라 접근할 수 있는 범위가 달라짐.

let globalMessage = 'global'; // 전역 변수
function printMessage() {
  let message = 'hello'; // 지역 변수
  console.log(message); // "hello"
  console.log(globalMessage); // "global"
}
printMessage();
console.log(globalMessage); // "global"

전역 변수(Global Variable): 어디에서든 접근 가능 (globalMessage).
지역 변수(Local Variable): 함수 내부에서만 접근 가능 (message).

7. 화살표 함수 (Arrow Function)

✅ 화살표 함수 기본 형태

ES6에서 도입된 간결한 함수 표현 방법.

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

function 키워드 없이 =>를 사용하여 함수를 정의.
한 줄 코드에서는 {}와 return 생략 가능.

✅ 여러 줄일 경우

const multiply = (a, b) => {
  return a * b;
};
console.log(multiply(2, 3)); // 6

{}를 사용하면 반드시 return을 명시해야 함.

8. 콜백 함수 (Callback Function)

✅ 콜백 함수란?

함수의 인자로 전달되어 특정 시점에서 실행되는 함수.

function randomQuiz(answer, correct, wrong) {
  if (answer === 'love you') {
    correct();
  } else {
    wrong();
  }
}

const printYes = () => console.log('Yes!');
const printNo = () => console.log('No!');

randomQuiz('love you', printYes, printNo); // "Yes!"
randomQuiz('wrong', printYes, printNo); // "No!"

printYes와 printNo는 콜백 함수로 randomQuiz 함수에 전달됨.
randomQuiz('love you', printYes, printNo); → "Yes!" 출력.

9. 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

✅ 즉시 실행 함수란?

정의되자마자 즉시 실행되는 함수.

(function hello() {
  console.log('IIFE');
})(); // "IIFE"

함수를 ()로 감싸고 즉시 호출하여 실행.
전역 변수 오염을 방지하는 데 유용함.

10. Fun Quiz

function calculate(command, a, b) {
  switch (command) {
    case 'add':
      return a + b;
    case 'subtract':
      return a - b;
    case 'multiply':
      return a * b;
    case 'divide':
      return a / b;
    case 'remainder':
      return a % b;
    default:
      throw Error('Unknown command');
  }
}
console.log(calculate('add', 2, 3)); // 5

입력된 command에 따라 연산을 수행하는 함수.
calculate('add', 2, 3) → 5 반환.

✅ 함수는 코드의 재사용을 가능하게 해줌
✅ 매개변수와 반환값을 활용하면 더 유용한 함수 작성 가능
✅ 화살표 함수는 간결한 문법을 제공
✅ 콜백 함수는 특정 조건에서 실행됨
✅ 즉시 실행 함수(IIFE)는 전역 변수 오염을 방지