0Pricing
Frontend Academy · 강의

함수: 선언, 표현식, 화살표 함수

세 가지 방식으로 함수를 정의하고 호이스팅을 이해하며 매개변수와 반환값을 사용하고 간결한 화살표 함수를 작성합니다.

함수: 선언, 표현식, 화살표 함수은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

함수란 무엇입니까

함수는 재사용할 수 있는 코드 블록입니다. 입력(매개변수)을 받아 로직을 실행하고, 필요에 따라 출력값을 반환합니다. 함수는 JavaScript에서 일급 값이므로 변수에 할당하거나 인수로 전달하거나 다른 함수에서 반환할 수 있습니다.

함수 선언

함수 선언은 function 키워드를 사용해 이름이 있는 함수를 만듭니다. 선언은 호이스팅되므로 코드에 나타나기 전에 호출할 수 있습니다.

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

// Can call before declaration due to hoisting:
console.log(greet('Alice')); // 'Hello, Alice!'

함수 표현식

함수 표현식은 함수를 변수에 할당합니다. 함수 표현식 자체는 호이스팅되지 않으며 변수는 undefined로 호이스팅됩니다. 함수 표현식은 이름이 없을 수도 있고 이름이 있을 수도 있습니다.

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(3, 4)); // 12

// Named function expression (name useful in stack traces):
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

화살표 함수

화살표 함수는 ES6에서 도입된 간결한 문법입니다. 자체 this를 가지지 않고 바깥쪽 범위의 this를 상속합니다. 콜백과 짧은 함수에 적합합니다.

// Standard arrow:
const add = (a, b) => a + b;

// Single parameter (no parens needed):
const double = n => n * 2;

// No parameters:
const greet = () => 'Hello!';

// Multi-line body needs {} and return:
const process = (x) => {
  const result = x * 2;
  return result + 1;
};

매개변수와 인수

매개변수는 함수 정의에 나열된 이름입니다. 인수는 함수를 호출할 때 전달하는 값입니다. 추가 인수는 무시되고, 누락된 인수는 undefined가 됩니다.

function info(name, age) {
  console.log(`${name} is ${age}`);
}
info('Alice', 30); // 'Alice is 30'
info('Bob');       // 'Bob is undefined'

기본 매개변수

ES6에서는 매개변수의 기본값을 설정할 수 있습니다. 인수가 undefined일 때(아예 전달되지 않은 경우 포함) 기본값이 사용됩니다.

function greet(name = 'World') {
  return `Hello, ${name}!`;
}
console.log(greet());        // 'Hello, World!'
console.log(greet('Alice')); // 'Hello, Alice!'

return 문

함수는 기본적으로 undefined를 반환합니다. 값을 출력하려면 return을 사용하십시오. 함수는 처음 만나는 return에서 종료되므로 그 뒤의 코드는 실행되지 않습니다.

function divide(a, b) {
  if (b === 0) return null; // early return
  return a / b;
}
console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // null

나머지 매개변수

나머지 매개변수 ...args는 남은 모든 인수를 배열로 모읍니다. 반드시 마지막 매개변수여야 합니다. 최신 코드에서는 이전의 arguments 객체를 대신합니다.

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

값으로서의 함수(일급 함수)

함수는 변수에 저장하고, 인수로 다른 함수에 전달하고(콜백), 함수에서 반환할 수 있습니다. 이를 통해 배열 메서드와 이벤트 리스너 같은 강력한 패턴을 사용할 수 있습니다.

const numbers = [3, 1, 4, 1, 5];
const sorted = numbers.sort((a, b) => a - b); // callback
console.log(sorted); // [1, 1, 3, 4, 5]

순수 함수

순수 함수는 같은 입력에 항상 같은 출력을 반환하며 부수 효과가 없습니다(DOM 변경, 네트워크 호출, 전역 상태 변경 등이 없음). 순수 함수는 테스트하고 디버깅하고 동작을 이해하기 쉽습니다.

// Pure:
const add = (a, b) => a + b;

// Impure (side effect: mutates external state):
let total = 0;
function addToTotal(n) { total += n; }

즉시 실행 함수 표현식(IIFE)

IIFE는 정의되는 즉시 실행됩니다. 과거에는 비공개 범위를 만드는 데 사용되었습니다. 오늘날에는 모듈과 블록 범위 덕분에 필요성이 줄었지만, 오래된 코드베이스에서는 여전히 볼 수 있습니다.

(function () {
  const secret = 'hidden';
  console.log('IIFE ran');
})();
// secret is not accessible here

빠른 확인

화살표 함수에 대한 설명으로 옳은 것은 무엇입니까?

복습: JavaScript 함수

함수 선언은 호이스팅됩니다. 함수 표현식과 화살표 함수는 호이스팅되지 않습니다. 화살표 함수는 간결하며 자체 this를 가지지 않습니다. 누락된 인수를 처리하려면 기본 매개변수를 사용하십시오. 함수는 일급 값이므로 자유롭게 전달할 수 있습니다.

자주 묻는 질문

“함수: 선언, 표현식, 화살표 함수” 강의는 무료인가요?

네 — “함수: 선언, 표현식, 화살표 함수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“함수: 선언, 표현식, 화살표 함수”에서 뭘 배우나요?

세 가지 방식으로 함수를 정의하고 호이스팅을 이해하며 매개변수와 반환값을 사용하고 간결한 화살표 함수를 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“함수: 선언, 표현식, 화살표 함수” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 변수: let, const, var 및 범위
  2. 데이터 유형: string, number, boolean, null, undefined
  3. 함수: 선언, 표현식, 화살표 함수
  4. 제어 흐름: if, else, switch, for, while
← Frontend Academy(으)로 돌아가기