자바스크립트(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 매개변수에 값이 전달되지 않으면 기본값으로 "손님"이 사용됩니다.
결론
자바스크립트 함수는 코드의 재사용성을 높이고, 프로그램을 모듈화하는 데 매우 유용합니다. 이번 글에서는 기본적인 함수 정의 방법부터 매개변수, 반환값, 함수 표현식, 화살표 함수, 기본 매개변수까지 다양한 내용을 다뤘습니다. 자바스크립트 함수를 이해하고 활용하는 데 도움이 되길 바라며, 궁금한 점이 있다면 언제든지 댓글로 남겨주세요!
'코딩 > JavaScript' 카테고리의 다른 글
자바스크립트 조건문: 완벽 가이드 (0) | 2024.06.23 |
---|---|
자바스크립트의 연산자 (0) | 2024.06.23 |
자바스크립트의 변수 명명 규칙 (0) | 2024.06.23 |
자바스크립트의 변수 (0) | 2024.06.23 |
자바스크립트(JavaScript)의 특징과 장단점 (0) | 2024.06.23 |