자바스크립트

자바스크립트 - 함수, 순수함수, 일급함수, 호이스팅, var 호이스팅

judyshin 2024. 3. 29. 14:19

 

앞선 글에서 변수에 대해서 알아보았습니다

이번에는 좀 더 많은 일을 할 수 있게 해주는 함수에 대해 알아보도록 하겠습니다

함수란?

어떤 목적을 위한 일을 수행하는 코드의 집합입니다

함수를 쓰는 이유

  • 코드의 재사용성: 동일한 함수를 여러 곳에서 호출하여 사용할 수 있습니다
  • 모듈화: 프로그램을 더 작은 단위로 나눠서 복잡성을 줄일 수 있습니다
  • 유지보수성: 유지보수를 하기 용이합니다
  • 코드의 가독성: 함수의 이름을 보고 기능을 직관적으로 이해할 수 있습니다
  • 테스트 용이성: 개별 테스트를 하기 용이합니다

함수 작성 방법

함수는 외부에서 변수를 넘겨받아 함수 내부에서 수행되는 연산에 사용할 수 있습니다

이때 넘겨 받는 변수를 매개 변수, 혹은 인자라고 합니다

더하기 함수라면 두개의 숫자를 인자로 넘겨받아 더하기 연산을 수행한 결과값을 return을 통해 반환하게 됩니다

함수 작성 방법에는 세 가지가 있습니다 

함수 선언문

// 선언   이름  인자
function eat(food) {
	return `I'm eating, ${food}`;
}

console.log(eat('cookie')); // 함수 호츨의 결과값을 출력

*넘겨받은 인자인 food를 템플릿 리터럴을 통해 `` 안에 ${food}로 넣어줍니다

  • 가장 기본적인 함수 작성 방법입니다. function 으로 함수를 선언한다는 것을 알려줍니다
  • 그리고 함수의 이름을 적고 괄호 안에는 함수 안에서 쓰일 매개 변수를 적습니다

함수 표현식 

//    이름      선언    인자
const eat = function(food) {
	return `I'm eating ${food}`;
}
console.log(eat('cookie')); // 출력: I'm eating cookie
  • 함수 표현식은 함수를 변수에 할당하는 방식입니다
  • 변수를 선언하고 function 키워드를 통해 함수를 할당합니다

화살표 함수

//    이름     인자
const eat = (food) => `I'm eating, ${food}`;

console.log(eat('cookie'));
  • 함수표현식에서 파생된 단축 표현입니다
  • return을 쓰지 않아도 반환이 됩니다

세가지 방법은 문법적 차이 뿐만 아니라 내부 동작에서도 차이를 가지고 있습니다

호이스팅이란?

자바스크립트는 변수와 함수 선언을 현재 스코프의 최상단으로 끌어올리는 것처럼 보이게 처리합니다

실제 코드가 이동하는 것은 아니지만 자바스크립트 엔진이 코드를 해석하는 방식입니다

 

함수 선언문으로 선언된 함수는 호이스팅에 의해 스코프 내 어느 곳이든 호출이 가능합니다

함수 표현식과 화살표 함수는 호이스팅은 발생하지만 선언부만 올려지고 할당부는 제자리에 있기 때문에 할당 전까지는 호출할 수 없습니다

var 호이스팅

var로 선언된 변수의 경우, 선언은 호이스팅되지만 할당은 호이스팅되지 않습니다

var 호이스팅은 아래 코드와 같이 의도하지 않은 결과를 가져올 수 있습니다

console.log(lunch);  // 출력: undefined

var lunch = "hamburger";

TDZ*가 있는 const, let은 ReferenceError 가 나지만 var을 사용하는 경우 에러가 나지 않습니다

*Temporal Dead Zone: const, let 키워드로 변수를 선언하고 나서 초기화 되기 직전까지의 구간

var는 선언과 동시에 undefined로 초기화 되고 실제 값은 나중에 할당되기 때문입니다

따라서 var 사용 시 주의가 필요합니다

순수 함수와 일급 함수

자바스크립트에서 함수는 순수 함수와 일급 함수로 나누어 집니다

순수 함수

  • 순수 함수란 동일한 입력값이 주어졌을 때 동일한 출력값을 반환하는 함수입니다
  • 함수의 출력은 오직 입력에 의해서만 결정이 됩니다 / 입력값만으로 계산을 합니다

순수 함수의 장점

  1. 결정적 동작: 주어진 입력이 동일하다면 동일한 결과값을 보장합니다. 외부 변수나 상태의 변경에 의존하지 않습니다
  2. 부작용 없는 코딩: 연쇄적으로 발생할 수 있는 부작용을 원칙적으로 차단합니다

일급 함수(First-Calss Function)

  • 함수를 변수와 동일하게 다루는 방식입니다
  • 함수를 다른 함수의 인자로 넘겨주거나 함수의 결과값으로 반환할 수 있습니다

일급 함수의 장점 

  1. 콜백 함수를 통한 비동기 프로그래밍: 비동기 작업을 처리할 때 일급 함수의 개념을 사용해 콜백 함수를 넘겨 비동기 작업이 완료된 후에 작업을 실행할 수 있습니다
  2. 함수를 반환하는 함수: 특정 데이터를 외부로부터 보호할 수 있고 독자적인 흐름을 가질 수 있습니다
  3. 함수 컴포지션: 두 함수를 조합해 새로운 조합을 수행하는 함수를 만들 수 있습니다