[JS] 자바스크립트 함수

안녕하세요! 이번 포스팅에서는 자바스크립트의 함수(Function)에 대해 다뤄 보겠습니다. 자바스크립트를 제대로 이해하려면 함수의 개념을 확실히 알고 있어야 합니다. 그럼 함수가 뭔지, 어떻게 쓰는지, 다양한 함수의 형태를 차근차근 알아보도록 하겠습니다.

 

 

자바스크립트 함수 - 커버 이미지

 

 

자바스크립트(JavaScript)의 함수

 

자바스크립트의 함수

 

1. 함수란?

2. 함수 선언 방법

3. 다양한 함수 형태

4. 매개변수와 인자

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

함수란?

함수는 하나의 작업을 수행하는 코드의 묶음입니다. 특정 작업을 여러 번 반복하거나 값을 계산할 때 사용하는 도구라고 생각하시면 됩니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다. 덕분에 코드의 재사용성을 높이고, 가독성을 높이는 데 큰 도움이 됩니다.

/* 두 수의 합을 출력하는 함수 */
function sum(x, y) {
  console.log(`x + y = ${x + y}`)
}

console.log(1 + 2)
console.log(2 + 3)
console.log(3 + 4)

sum(1, 2)
sum(2, 3)
sum(3, 4)

 

 

함수 선언 방법

1. 함수 선언식
   가장 기본적인 함수 선언 방법입니다. function 키워드를 사용해 함수의 이름과 함께 정의합니다.
   

   function hello(name) {
   	return `Hello ${name}!`;
   }
   
   console.log(hello('dev-hpk') // Hello dev-hpk

   
   
2. 함수 표현식함수 표현식은 변수에 함수를 할당하는 방법입니다. 이름 없는 익명 함수를 만들어 변수에 동적으로 할당할 때 주로 사용합니다.
   

   const hello = function(name) {
     return `Hello ${name}!`;
   }
   
   console.log(hello('dev-hpk'); // Hello dev-hpk!

3. 화살표 함수
   ES6부터 등장한 화살표 함수는 함수를 간결하게 작성할 수 있는 문법입니다. 콜백 함수에서 많이 사용되며, 문법이 짧아 가독성이 좋아집니다. 또, 화살표 함수는 this의 바인딩 방식이 일반 함수와 달라서, 객체나 클래스에서 많이 활용됩니다.
   

   const hello = (name) => {
     return `Hello ${name}`;
   }
   
   console.log(hello('dev-hpk')); // Hello dev-hpk

   
   
   

다양한 함수 형태

자바스크립트에서 함수는 매우 유연하게 다양한 형태로 작성할 수 있습니다. 그 중 자주 사용되는 몇가지를 알아보겠습니다.

 

1. 즉시 실행함수 (IIFE : Imediately Invoked Function Expression)함수를 선언함과 동시에 실행하는 방식입니다. 주로 한 번만 실행하는 코드나, 지역 변수를 만들어 다른 코드와 충돌을 피할 때 사용합니다.
   

   (function() {
     console.log('즉시 실행 함수');
   })();

2. 콜백 함수 (Callback Function)
   함수는 객체 타입이기 때문에 다른 함수의 인자로 전달 될 수 있습니다. 이렇게 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 합니다. 주로 비동기 처리에 사용됩니다.
   

   function callbackFunction(callback) {
     const name = 'dev-hpk';
     callback(name);
   }
   
   callbackFunction(function(name) {
     console.log(`Hello ${name}`);
   });

3. 고차 함수 (Higher Order Function)
   고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수입니다. 자바스크립트에서는 배열 메서드인 map, filter, reduce 등이 고차 함수의 예입니다.
   

   function hello() {
     return function() {
       console.log('Hello!');
     }
   }
   
   const helloFunc = hello();
   helloFunc(); // Hello!

매개변수와 인자

함수를 호출할 때 데이터를 전달받아 처리할 수 있습니다. 이때 매개변수(Parameters)와 인자(Arguments)의 개념을 알고 있어야 합니다.

• 매개변수 (Parameters)
  함수를 정의할 때 사용하는 변수로, 함수가 받을 값을 미리 지정해 놓는 역할을 합니다.
  
  
• 인자 (Argumnets)
  함수를 호출할 때 실제로 전달하는 값입니다.
  

  function hello(name) { // name : 매개변수
   console.log(`Hello ${name}!`);
  }
  
  hello('dev-hpk'); // 'dev-hpk' : 인자

• 기본 매개변수
  매개변수에 값을 전달하지 않았을 때 기본값을 설정하는 기능도 있습니다. 이를 기본 매개변수라고 합니다. ES6부터는 함수 선언할 때 기본값을 바로 지정할 수 있습니다.
  

  function hello(name = 'dev') {
    console.log(`Hello ${name}!`);
  }
  
  hello(); // Hello dev!
  hello('dev-hpk'); // Hello dev-hpk!

 

 

 

자바스크립트에서 함수는 매우 중요한 역할을 합니다. 함수 선언식, 표현식, 화살표 함수, 그리고 다양한 함수 패턴을 이해하고 적절히 활용하면, 더 깔끔하고 유지보수하기 좋은 코드를 작성할 수 있습니다.

이번 포스팅을 통해 함수에 대한 이해가 좀 더 명확해졌길 바라며, 다음 포스팅에서는 함수 스코프, 클로저, this 등 더 심화된 주제를 다루겠습니다. 😊

 

 

추천글

 

2024.09.12 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트의 자료형

[JS] 자바스크립트의 자료형