본문 바로가기
코딩/JavaScript

자바스크립트 함수: 초보자를 위한 가이드

by tomsdaily 2024. 6. 23.
반응형

자바스크립트(JavaScript)에서 함수는 코드의 재사용성을 높이고, 프로그램을 모듈화하는 데 중요한 역할을 합니다. 이번 글에서는 자바스크립트 함수의 기초 개념부터 다양한 함수 정의 방법까지 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. 함수란 무엇인가?

함수는 특정 작업을 수행하는 코드 블록입니다. 함수를 사용하면 동일한 코드를 여러 번 반복해서 작성하지 않고, 필요할 때마다 함수를 호출하여 사용할 수 있습니다.

2. 함수 정의하기

기본 함수 정의

자바스크립트에서 가장 기본적인 함수 정의 방법은 function 키워드를 사용하는 것입니다.

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

위 예제에서 sayHello라는 이름의 함수를 정의했습니다. 이 함수는 호출될 때마다 "안녕하세요!"를 출력합니다.

함수 호출하기

정의한 함수를 호출하려면 함수 이름 뒤에 괄호를 붙이면 됩니다.

sayHello(); // 출력: 안녕하세요!

매개변수와 인자

함수는 매개변수를 받아서 다양한 작업을 수행할 수 있습니다.

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

greet("철수"); // 출력: 안녕하세요, 철수님!
greet("영희"); // 출력: 안녕하세요, 영희님!

위 예제에서 greet 함수는 name이라는 매개변수를 받아서 이를 이용해 인사말을 출력합니다.

반환값

함수는 return 키워드를 사용하여 값을 반환할 수 있습니다.

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

let sum = add(2, 3);
console.log(sum); // 출력: 5

add 함수는 두 매개변수 a와 b를 더한 값을 반환합니다.

3. 함수 표현식

함수를 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다.

let sayGoodbye = function() {
    console.log("안녕히 가세요!");
};

sayGoodbye(); // 출력: 안녕히 가세요!

4. 화살표 함수

ES6(ECMAScript 2015)부터는 화살표 함수라는 새로운 함수 정의 방법이 추가되었습니다. 화살표 함수는 더 간결하게 함수를 정의할 수 있게 해줍니다.

let multiply = (a, b) => {
    return a * b;
};

console.log(multiply(2, 3)); // 출력: 6

화살표 함수는 중괄호와 return 키워드를 생략할 수도 있습니다. 단일 표현식일 경우 다음과 같이 작성할 수 있습니다.

let multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 출력: 6

5. 기본 매개변수

함수의 매개변수에 기본값을 설정할 수도 있습니다.

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

greet(); // 출력: 안녕하세요, 손님님!
greet("철수"); // 출력: 안녕하세요, 철수님!

위 예제에서 name 매개변수에 값이 전달되지 않으면 기본값으로 "손님"이 사용됩니다.

결론

자바스크립트 함수는 코드의 재사용성을 높이고, 프로그램을 모듈화하는 데 매우 유용합니다. 이번 글에서는 기본적인 함수 정의 방법부터 매개변수, 반환값, 함수 표현식, 화살표 함수, 기본 매개변수까지 다양한 내용을 다뤘습니다. 자바스크립트 함수를 이해하고 활용하는 데 도움이 되길 바라며, 궁금한 점이 있다면 언제든지 댓글로 남겨주세요!

반응형