[자바스크립트 15] 함수(익명함수,화살표함수)

오늘은 익명함수와 화살표 함수에 대해 물어보았다.

익명 함수와 화살표 함수는 자바스크립트에서 두 가지 중요한 함수 형태입니다. 각각에 대해 알아봅시다.

 

익명 함수 (Anonymous function)

익명 함수는 이름이 없는 함수입니다. 보통 이벤트 핸들러, 콜백 함수 또는 즉시 실행 함수 등과 같이 한 번 사용되거나 재사용할 필요가 없는 경우에 사용됩니다. 익명 함수는 변수에 할당되거나 다른 함수의 인수로 전달될 수 있습니다.

// 변수에 할당된 익명 함수
const myFunction = function() {
  console.log('Hello, anonymous function!');
};

myFunction(); // 출력: Hello, anonymous function!

// 익명 함수를 인수로 사용
setTimeout(function() {
  console.log('Execute later after 1 second');
}, 1000);

// 그렇다. 이런 것들이 익명 함수인 것이었다.

// 그렇다면 즉시 실행 함수란?

(function(){
	console.log('즉시실행함수입니다')
})(); //괄호로 감싸고, 뒤에 () 붙여줌

// 이렇게 하면 선언과 동시에 실행된다.

 

화살표 함수 (Arrow function)

화살표 함수는 ES6 (ECMAScript 2015)에서 도입된 새로운 함수 구문입니다.

화살표 함수는 간결한 구문을 제공하며, this 키워드에 대한 바인딩이 일반 함수와 다릅니다.

화살표 함수는 다음과 같은 구문을 사용합니다.

const functionName = (parameters) => {
  // 함수 내 코드
};

 

매개변수가 한 개인 경우 괄호를 생략할 수 있으며,

함수 내 코드가 한 줄인 경우 중괄호와 return 문을 생략할 수 있습니다.

// 그렇다 이게 다임 짧고 그래서 편하고 좋음

// 매개변수가 한 개인 경우 괄호 생략
const square = x => {
  return x * x;
};

console.log(square(5)); // 출력: 25

// 함수 내 코드가 한 줄인 경우 중괄호 및 return 문 생략
const multiply = (a, b) => a * b;

console.log(multiply(3, 4)); // 출력: 12

 

화살표 함수의 주요 차이점 중 하나는 this 키워드의 바인딩입니다.

일반 함수에서는 this가 호출 컨텍스트에 따라 결정되지만, 화살표 함수에서는 상위 범위의 this를 상속합니다.

이로 인해 화살표 함수가 객체 메서드나 이벤트 핸들러로 사용되었을 때 this의 바인딩이 예상과 다를 수 있습니다.

이런 상황에서는 일반 함수를 사용하는 것이 더 적절할 수 있습니다.

 

// 이건 또 무슨 말일까..

// this에 대해 미리 좀 알아보자

let obj = { 
  name : 'kim', 
  function : function(){
   console.log(this)
  }
} // 이 obj.function() 와

let obj = { 
  name : 'kim', 
  function : () => {
   console.log(this)
  }
} // 이 obj.function() 에서 this 의 차이는?

 

각 객체에 있는 함수에서 this의 값은 함수가 어떻게 정의되었는지에 따라 달라집니다.

첫 번째 예제에서는 일반 함수를 사용했고, 두 번째 예제에서는 화살표 함수를 사용했습니다.

이 차이로 인해 this의 값이 다르게 나타납니다.

 

첫 번째 예제에서 함수는 일반 함수로 정의되었습니다.

이 경우, 함수가 객체의 메서드로서 호출되면 this는 해당 함수를 호출한 객체를 가리킵니다.

따라서 첫 번째 예제에서 this는 obj 객체를 가리키게 됩니다.

 

let obj = {
  name: 'kim',
  function: function() {
    console.log(this);
  },
};

obj.function(); // 출력: { name: 'kim', function: [Function: function] }

두 번째 예제에서 함수는 화살표 함수로 정의되었습니다. 화살표 함수의 this는 상위 범위에서 상속됩니다.

즉, 화살표 함수가 정의된 위치에서 this의 값을 가져옵니다.

 

이 경우, 상위 범위는 전역 객체가 됩니다.

따라서 두 번째 예제에서 this는 전역 객체를 가리키게 됩니다.

let obj2 = {
  name: 'kim',
  function: () => {
    console.log(this);
  },
};

obj2.function(); // 출력: 전역 객체 (브라우저에서는 Window 객체)

이 차이로 인해 객체의 메서드나 이벤트 핸들러에서는 화살표 함수를 사용할 때 주의해야 합니다.

이러한 상황에서는 일반 함수를 사용하는 것이 this 바인딩에 문제가 없어 더 적절할 수 있습니다.

 

// 좀 헷갈린다.

// 요약정리 :

// 일반함수에서의 this == 함수를 호출한 객체(자기자신이 속한 객체 라고 보면 됨)

// 화살표함수에서의 this == 상위 범위에서 상속된 객체(object안에 object 이런게 아니라면, 일반적으로는 window 객체)