[JavaScript 문법 ] 6일차: 함수 기초

함수란?

함수는 특정 작업을 수행하는 코드 블록입니다. 코드를 재사용하고, 코드의 구조와 가독성을 개선하는 데 도움이 됩니다.

함수 선언

함수 선언은 function 키워드를 사용하여 함수를 정의하는 방법입니다.

 

기본 문법

function 함수이름(매개변수1, 매개변수2, ...) {
  // 실행될 코드
}

예제

function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice'); // 'Hello, Alice!'

함수 표현식

함수 표현식은 함수를 변수에 할당하는 방법입니다.

 

기본 문법

const 함수이름 = function(매개변수1, 매개변수2, ...) {
  // 실행될 코드
};

예제

const greet = function(name) {
  console.log('Hello, ' + name + '!');
};

greet('Bob'); // 'Hello, Bob!'

 

화살표 함수

화살표 함수는 ES6에서 도입된 함수 선언 방식으로, 간결한 문법을 제공합니다.

 

기본 문법

const 함수이름 = (매개변수1, 매개변수2, ...) => {
  // 실행될 코드
};

예제

const greet = (name) => {
  console.log('Hello, ' + name + '!');
};

greet('Charlie'); // 'Hello, Charlie!'

 

매개변수와 인수

함수는 매개변수를 통해 입력을 받고, 인수를 통해 실제 값을 전달받습니다.

 

예제

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

let result = add(3, 4); // 7
console.log(result); // 7

 

기본 매개변수

ES6에서는 기본 매개변수를 설정할 수 있습니다. 기본 매개변수는 인수가 전달되지 않을 때 사용됩니다.

 

예제

function greet(name = 'Guest') {
  console.log('Hello, ' + name + '!');
}

greet(); // 'Hello, Guest!'
greet('David'); // 'Hello, David!'

 

반환값

함수는 return 키워드를 사용하여 값을 반환할 수 있습니다. 반환된 값은 함수 호출 위치로 전달됩니다.

 

예제

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

let result = multiply(5, 3); // 15
console.log(result); // 15

 

함수 호이스팅

함수 선언은 호이스팅(hoisting)되어, 선언 위치와 상관없이 코드에서 호출할 수 있습니다. 그러나 함수 표현식은 호이스팅되지 않습니다.

 

예제: 함수 선언 호이스팅

console.log(add(2, 3)); // 5

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

 

예제: 함수 표현식 호이스팅

console.log(add(2, 3)); // 오류: add는 함수가 아님

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

 

익명 함수

익명 함수는 이름이 없는 함수입니다. 주로 함수 표현식이나 콜백 함수로 사용됩니다.

 

예제

const greet = function(name) {
  console.log('Hello, ' + name + '!');
};

greet('Emily'); // 'Hello, Emily!'

 

즉시 실행 함수 (IIFE)

즉시 실행 함수는 선언되자마자 즉시 실행되는 함수입니다. 주로 스코프를 제한하기 위해 사용됩니다.

 

예제

(function() {
  console.log('This function runs immediately!');
})();

 

함수 스코프

함수는 자신의 스코프를 가지며, 함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.

 

예제

function test() {
  let message = 'Hello, world!';
  console.log(message);
}

test(); // 'Hello, world!'
// console.log(message); // 오류: message는 정의되지 않음

 

결론

함수는 JavaScript에서 중요한 역할을 하며, 코드의 재사용성과 가독성을 높이는 데 도움이 됩니다. 이번 글에서는 함수 선언, 함수 표현식, 화살표 함수, 매개변수와 인수, 기본 매개변수, 반환값, 함수 호이스팅, 익명 함수, 즉시 실행 함수, 함수 스코프에 대해 배웠습니다. 다음 글에서는 스코프와 클로저에 대해 알아보겠습니다.

다음 글에서 만나요!