초코의 풀스택 도전기 20: 자바스크립트(JavaScript) 함수로 코드를 더 효율적으로 관리하기
이번에는 자바스크립트에서 가장 중요한 개념 중 하나인 함수에 대해 배워보자. 코드를 더 깔끔하고 재사용 가능하게 만들어 주는 것이 바로 함수거든. 초코는 함수에 대해 배우면서 조금 더 효율적인 코드를 작성하는 방법을 배워보기로 했다.
1. 함수란 무엇일까?
"멘토님, 함수가 뭔가요?"
초코는 궁금한 듯 물었다.
"함수는 간단히 말해, 여러 코드의 묶음을 하나의 이름으로 정의하는 거야. 예를 들어, 자주 쓰는 코드를 반복해서 작성하지 않고, 함수로 만들어두면 필요할 때마다 그 함수만 호출하면 되지. 함수는 프로그래밍에서 반복적인 작업을 줄이고 코드를 깔끔하게 정리할 수 있는 아주 중요한 도구야."
2. 함수 선언과 호출
멘토는 가장 기본적인 함수 선언 방식부터 알려주었다.
function greet() {
console.log("안녕하세요, 초코!");
}
"여기서 function 키워드로 greet이라는 이름의 함수를 만들었어. 이 함수는 호출되면 '안녕하세요, 초코!'를 출력하게 돼. 이제 이 함수를 호출해볼까?"
greet();결과:
안녕하세요, 초코!
초코는 고개를 끄덕였다. "아, 함수를 선언해놓고 나중에 필요할 때 greet();처럼 호출하면 되는 거군요."
"그렇지. 함수를 한 번 정의해 놓으면, 그걸 여러 번 호출할 수 있어. 재사용성이 아주 높은 기능이지."
3. 매개변수와 반환값
초코는 함수가 조금 더 유연하게 동작할 수 있기를 바랐다. 멘토는 초코에게 매개변수와 반환값을 설명하기로 했다.
"초코, 함수는 입력값을 받아서 그에 맞는 결과를 반환할 수도 있어. 이런 입력값을 매개변수라고 해. 그리고 함수가 어떤 결과를 계산한 뒤 그 결과를 반환값으로 돌려줄 수도 있지."
매개변수가 있는 함수
function greet(name) {
console.log(`안녕하세요, ${name}!`);
}
"이 함수는 name이라는 매개변수를 받아. 호출할 때 매개변수에 값을 넣어주면, 그 값이 출력되지."
greet("초코");
결과:
안녕하세요, 초코!
"이렇게 하면 함수가 각기 다른 사람에게 인사할 수 있지. 매개변수를 통해서 함수를 좀 더 유연하게 만들 수 있어."
반환값이 있는 함수
"그럼 이번에는 함수가 어떤 결과를 계산하고, 그 결과를 반환하는 경우를 볼까?"
function add(a, b) {
return a + b;
}
"이 함수는 두 숫자를 더한 값을 반환해. return 키워드로 결과를 반환하지."
let result = add(3, 5);
console.log(result);결과:
8
"여기서 add(3, 5)는 3과 5를 더한 값을 반환하고, 그 값을 result라는 변수에 저장하지. 그리고 그 결과를 출력할 수 있어."
초코는 신기해하며 말했다. "아, 함수가 값을 계산해서 돌려줄 수도 있군요! 그럼 이걸로 여러 작업을 처리할 수 있겠네요."
4. 화살표 함수 (Arrow Functions)
멘토는 이제 조금 더 간단한 문법으로 함수를 선언할 수 있는 화살표 함수에 대해 설명해주었다. "자바스크립트에는 함수를 선언하는 또 다른 방법이 있어. 바로 화살표 함수라는 거야. 이건 코드가 짧고 간결할 때 자주 사용하지."
화살표 함수 기본 형태
const greet = (name) => {
console.log(`안녕하세요, ${name}!`);
};
"이 함수는 이전에 배운 function 키워드 대신 화살표 함수 문법을 사용했어. 이렇게 쓸 수 있는 거지."
greet("초코");결과:
안녕하세요, 초코!
"코드가 훨씬 짧아지죠!" 초코는 감탄했다.
더 간결한 화살표 함수
"게다가, 화살표 함수는 함수의 내용이 한 줄일 때는 중괄호 {}와 return을 생략할 수 있어. 더 간단하게 쓰려면 이렇게도 할 수 있어."
const add = (a, b) => a + b;
"여기서는 a + b라는 계산식을 바로 반환하지. 중괄호도 없고, return도 생략된 거야. 그리고 이 함수도 똑같이 작동하지."
let result = add(3, 5);
console.log(result);결과:
8
"이렇게 화살표 함수를 사용하면 짧고 간단한 함수를 훨씬 쉽게 만들 수 있어. 익숙해지면 아주 유용한 기능이지."
마무리하며
초코는 오늘 함수에 대해 많은 것을 배웠다. "함수를 사용하면 코드를 더 깔끔하게 관리할 수 있고, 재사용성도 높아지겠네요!" 초코는 말했다.
"맞아, 초코! 함수는 프로그래밍에서 핵심적인 도구야. 오늘 배운 함수 선언, 호출, 매개변수, 반환값, 그리고 화살표 함수는 앞으로 자주 쓰일 거야. 이제 다양한 문제를 해결할 수 있는 도구가 하나 더 생긴 거지."