💡 JavaScript에서 유연하게 함수를 사용하는 법
자바스크립트에서 함수는 매우 유연하게 선언되고 사용된다. 이번 글을 통해 함수 선언과 함수 표현식, 값으로서의 함수 활용, 그리고 화살표 함수까지 자바스크립트의 다양한 함수 활용법에 대해 알아보며 상황에 맞게 javascript내에서 유연하게 함수를 만들고 사용할 수 있는 법에 대해 알아보자.
📚 JavaScript에서 함수를 만드는 법
1. 함수 선언과 함수 표현식
함수 선언
함수 선언은 function 키워드를 사용해 이루어지며, 가장 전통적인 방식이다.
function sayHi() {
console.log('Hi!');
}함수 표현식
함수 표현식은 함수를 변수에 할당하는 방식으로, 함수 선언을 값처럼 사용하는 방식이다. 이와 같은 방식은 함수도 값으로 취급될 수 있다는 자바스크립트의 특징을 잘 보여준다.
const sayHi = function () {
console.log('Hi!');
};함수 선언 vs 함수 표현식
함수 선언과 함수 표현식은 호이스팅, 그리고 스코프에서 각각 다른 차이점을 보인다.
먼저, 함수 선언 방식은 이전글에서 언급한 호이스팅 개념이 적용된다는 특징이 있다. 반면, 함수 표현식은 변수 특성상 선언 이전에 접근이 불가능하다.
둘째로, 함수 선언은 var 키워드처럼 함수 스코프를 가진다. 반면, 함수 표현식은 할당된 변수에 따라 스코프가 결정된다. 예로, 만일 let 혹은 const 키워드에 함수 표현식을 할당하게 된다면, 해당 함수 표현식은 블록 스코프를 가지게 된다.
함수 선언과 함수 표현식 중 무엇을 사용할까?
함수 선언과 함수 표현식 중 어떤 것을 사용해야 하는지에 대한 의견은 분분한 것 같다. 변수와 함수를 명확히 구분하고, 자유로운 위치에서 함수 선언이 가능하다는 점에서 함수 선언식을 지향하는 사람들도 있고, 반드시 선언 이후 함수를 사용할 수 있다는 점이 오히려 코드의 흐름 파악에 더욱 도움이 된다는 이유로 함수 표현식을 지향하는 사람들도 존재하는 것 같다. 이에, 둘 중 각각의 장단점을 기준으로 각 상황에 맞게 어느 방식을 선택하는 것은 크게 문제되지는 않으나, 둘은 호이스팅과 스코프 측면에서 명확한 차이점을 가지고 있으니, 가급적 하나의 방식을 선택 후 일관된 방식으로 함수를 만들고자 하는 자세는 지향할 필요가 있다고 여겨진다.
2. 값으로서의 함수 활용
자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 함수 표현식이 가능했던 이유도 이와 같은 이유다. 조금 더 깊게 들어가보자. console.dir을 이용해 함수를 출력해보면, 자바스크립트에서 함수가 객체 타입의 값으로 평가된다는 사실을 알 수 있다. 그렇다면 이러한 특징을 더 넓혀 어떤 식으로 활용 가능할까?
자바스크립트에서 함수는 객체 타입으로 평가되기 때문에, 아래 예와 같이 객체 안의 메소드로 사용 가능하다.
const obj = {
greet: function(name) {
console.log(`Hello ${name}`);
}
};
obj.greet('Tags of TT') // Hello Tags of TT또한 이와 같은 이유로 DOM 이벤트를 다룰 때 파라미터를 전달하는 부분에서 함수를 선언하는 것도 가능한 것이다.
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
console.log("You clicked me!");
});
cf> 콜백 함수(Callback Function)
위와 같이 다른 함수의 파라미터에 전달된 함수를 콜백 함수라고 부른다.
3. 화살표 함수(Arrow Function)
ES6에서 등장한 화살표 함수는 이름이 없는 익명 함수이기 때문에 일반적으로 어떤 이름을 가진 변수에 할당하거나, 다른 함수의 아규먼트를 선언할 때 주로 사용된다.
특히, 콜백 함수로 많이 사용되며, this와 arguments 객체의 동작 방식에서 기존 함수와 차이점을 가지고 있다.
화살표 함수는 기존 function 키워드를 사용하던 방식을 좀 더 간결하게 표현하고자 등장했기 때문에 짧은 표기에 중점을 두고 있다. 기본적인 Arrow Function은 아래와 같은 형태를 취한다.
// 함수 표현식
const sum = function(a, b) {
return a + b;
};
// 화살표 함수 (arrow function)
const sum = (a, b) => {
return a + b;
};이 때, 이보다도 더 간결하게 표현할 수 있는 경우가 있다. 만일 함수 내부의 동작 부분이 return문 하나로만 이루워져 있다면 중괄호와 함께 return 키워드도 생략할 수 있다.
// 함수 표현식
const sum = function(a, b) {
return a + b;
};
// 화살표 함수 (arrow function)
const sum = (a, b) => a + b;Arrow Function 활용
Arrow Function은 자바스크립트에서 특별한 규칙을 따르는 함수이기 때문에 처음에는 어색하고 불편할 수 있다. 그럼에도 불구하고, 그러나 익숙해지면 더 간결하고 가독성이 높다는 것이 느껴질 것이며, 현재 많은 개발자들 또한 Arrow Function을 많이 사용중이니, 아직 Arrow Function이 익숙치 않다면, 의도적으로 이를 많이 활용하고자 노력하는 것도 좋을 것 같다.
📚 Outro
자바스크립트의 함수는 선언, 표현식, 그리고 다양한 활용 방법을 통해 코드의 유연성과 확장성을 극대화할 수 있다. 이러한 특성을 잘 이해하고 활용하면 더 효율적이고 가독성 높은 코드를 작성할 수 있을 것이다. 또한 함수의 특성을 제대로 파악함으로써, 복잡한 문제를 해결할 때 더 직관적이고 효율적인 방식으로 접근할 수 있을 것으로 기대된다.
