함수와 화살표 함수
Source: Dev.to
함수란 무엇인가요?
간단히 말하면, 함수는 JavaScript의 주요 구성 요소 중 하나입니다. 코드를 더 작고 재사용 가능한 조각으로 조직하여 같은 로직을 반복해서 작성하는 일을 피할 수 있게 해줍니다. 이 글에서는 함수가 무엇인지, 어떻게 사용하는지, 일반 함수와 화살표 함수의 차이점이 무엇인지 살펴보겠습니다.
함수가 왜 존재할까요?
근본적으로 함수는 반복 가능한 작업을 저장해 일관성을 유지하도록 하는 방법입니다. 작은 기계라고 생각하면 됩니다; 입력을 주면 작업을 수행하고 결과를 내보냅니다.
이는 핵심 프로그래밍 원칙 중 하나인 DRY (Don’t Repeat Yourself) 원칙과 연결됩니다. 간단히 말해, 같은 과정을 여러 번 반복해야 할 경우 매번 코드를 다시 작성하는 대신 그 과정을 함수로 감싸 필요할 때마다 함수를 호출하면 됩니다.
이렇게 하면 코드를 읽기 쉽고, 유지보수가 쉬우며, 나중에 디버깅하기도 편해집니다. 커피 머신을 떠올려 보세요: 머신을 한 번 갖추면 커피를 마실 때마다 새 머신을 만들거나 다시 조립할 필요 없이 버튼만 누르면 됩니다.
함수 선언하기
함수를 작성하는 가장 일반적인 방법은 function 키워드를 사용하는 것입니다:
/* Function with no arguments */
function showGreet() {
return `Hello world!`;
}
/* Function with argument name */
function showPersonalizedGreeting(name) {
return `Hello, ${name}!`;
}함수 이름은 자유롭게 정할 수 있지만, 코드베이스를 깔끔하게 유지하려면 일관된 규칙을 따르는 것이 중요합니다. 이름이 모호하면 버그가 발생할 수 있습니다.
함수 명명 모범 사례
- 선호하는 명명 규칙을 유지하세요; 흔히 쓰이는 선택은 camelCase입니다.
- 함수는 보통 동작을 수행하므로 이름은 동사구 형태가 일반적입니다 (예:
calculateTotal,filterResults,checkValidation). - 이름은 설명적이어야 합니다 (
doSomething이나myAmazingFunction같은 모호한 이름은 피하세요).
함수 목적을 나타내는 일반적인 접두사:
get: 데이터를 조회 (예:getUser)set: 데이터를 수정 (예:setUserName)handle: 이벤트를 처리 (예:handleFormSubmission)is,has,can: 불리언을 반환하는 판별 함수 (예:canLogin,isNumber,hasRequiredFlag)
가독성을 유지하려면 명확하지 않은 약어 사용을 피하세요.
함수 호출하기
함수를 사용하려면 호출하면 됩니다:
/* Function with no arguments */
function showGreet() {
return `Hello world!`;
}
/* Function with argument name */
function showPersonalizedGreeting(name) {
return `Hello, ${name}!`;
}
/* Call function to store the value in a variable */
let simpleGreeting = showGreet(); // "Hello world!"
let greeting = showPersonalizedGreeting('Friend'); // "Hello, Friend!"
/* Call function directly in a console */
console.log(showPersonalizedGreeting('Friend')); // "Hello, Friend!"인수 전달하기
인수를 통해 외부에서 데이터를 함수에 전달하여 처리할 수 있습니다:
const width = 15;
const height = 20;
let area;
function calculateArea(_width, _height) {
return _width * _height;
}
area = calculateArea(width, height); // area = 300반환값
함수는 return 키워드를 사용해 결과를 반환할 수 있습니다. 명시적으로 반환값을 지정하지 않으면 함수는 undefined를 반환합니다.
함수 표현식
함수를 직접 선언하는 대신 변수에 할당할 수 있습니다:
const multiply = function (a, b) {
return a * b;
};
console.log(multiply(4, 2)); // 8이는 함수 표현식이라고 합니다. 함수 표현식은 함수를 값으로 전달하고 싶을 때, 예를 들어 다른 함수에 인수로 넘길 때 유용합니다.
화살표 함수
ES6에서 도입된 화살표 함수는 함수 표현식을 더 짧게 쓸 수 있게 해줍니다:
const divide = (a, b) => {
return a / b;
};주요 차이점:
function키워드가 없습니다.- 매개변수와 본문 사이에 “화살표”
=>를 사용합니다. - 매개변수가 하나뿐이면 괄호를 생략할 수 있습니다:
const square = x => x * x;암시적 반환
함수 본문이 단일 표현식이면, 화살표 함수는 return 키워드 없이도 자동으로 반환합니다:
const add = (a, b) => a + b;언제 화살표 함수를 사용해야 할까요?
일반적으로 화살표 함수는 짧은 함수에 적합하며 다음과 같은 경우에 많이 사용됩니다:
map,filter같은 콜백이나 이벤트 리스너.- 클래스 내부에서
this바인딩을 별도로 지정하고 싶지 않을 때.
화살표 함수를 피해야 할 때
- 특정 컨텍스트에
this를 바인딩해야 할 경우. - 함수가 길고 복잡할 때; 간결한 문법이 가독성을 떨어뜨릴 수 있습니다.
한눈에 보기
마무리
함수를 사용하면 코드를 깔끔하고 재사용 가능하게 유지할 수 있고, 화살표 함수는 현대 JavaScript에서 특히 유용한 간결한 문법을 제공합니다. this 접근이 필요하거나 명확성이 중요한 경우 일반 함수를, 간결함이 필요할 때는 화살표 함수를 사용하세요.
함수를 어떻게 사용하는지 알게 되었으니, 같은 로직을 여러 번 작성하고 있다면 함수를 만들어 감싸는 것이 좋다는 점을 기억하세요.
다음 단계
이제 함수를 만들고 어떤 변수 타입을 사용할지 알게 되었으니, 로직을 추가해 볼 차례입니다! 다음 글 **“JavaScript 101 – Control Flow Basics”**에서는 if, else if, else를 통해 코드 흐름을 제어하는 가장 기본적인 방법을 살펴보겠습니다.