자바스크립트 1급 함수 정리

샨티(shanti)·2022년 9월 10일
0

Study

목록 보기
5/11
post-thumbnail

자바스크립트(JavaScript) 강의를 들으면서 1급 함수라는 단어를 스치듯 들었는데,
콜백 등등 개념을 검색하게 되면서 1급 함수를 간략하게 정리해야 겠다는 생각이 들었다.

1급 시민, 1급 객체, 1급 함수, 콜백, 클로져 등. 아직은 잘 모르는 내용이고 명확하지 않지만 정리하면서 공부하면 또 새롭게 알게되는 점이 있겠지!

1급 함수에 대한 MDN 정의

MDN 문서는 우리나라 언어로도 번역되어 있는 페이지가 꽤 있기도 하고, 어떤 개념을 확인하거나 HTML, CSS, Javascript 등의 정보를 확인할 때 아주 신뢰할만한 페이지라서 자주 들어가는 편이다. 하지만 주의해야 할 점은, 간혹 한글로 된 페이지가 업데이트가 되지 않은 경우들이 있어서 영문 페이지와 정보가 상이할 때가 있다.

한글로 번역된 페이지가 나오지 않는다면 언어를 영어로 바꾸어 확인하고, 좀 어렵다 싶으면 차라리 구글 번역기를 돌려서 내용을 얼추 이해하는 것이 더 나을수도.

MDN 페이지에서는 1급 함수(First-class Function)의 정의와 특징을 아래 예시와 함께 보여준다.

1급 함수.
해당 프로그래밍 언어에서 함수를 여타 '변수(variable)'처럼 취급한다면 이를 1급 함수라고 말한다.
예를 들어, 함수를 다른 함수의 인자(argument)로 주거나, 다른 함수의 리턴값이 되거나(함수의 반환값이 또다른 함수가 됨), 또는 어떤 변수에 할당(assigned)할 수 있다면 이는 해당 언어에서 함수를 1급 함수로 취급한다 할 수 있다.

1급이라는 단어 때문에 '엥.. 이게 뭐지?' 하는 생각이 들었는데, 이를 잘 풀어낸 블로그 글이 있는 것 같아 덧붙인다.

뭐 엄청 특별하게 등급별로 무언가가 있는 것은 아닌 듯 하고. 그냥 아-주 오래 전, 투표권을 쟁취하기 위해 목숨을 걸고 싸워야 하던 그 시절에 1급 시민(first class citizen)들이 누리던 수많은 권리들을 마치 자바스크립트의 함수가 누리고 있기에 그런 의미에서 네이밍을 한 것 같다.

참고로 1급 함수 뿐만 아니라 1급 객체(first class object)라는 단어도 있다. 나도 현재 자바스크립트를 배우는 과정이고 처음 배운 언어가 마침 strict한 자바이다 보니 객체나 함수를 마치 변수처럼 취급하는 자바스크립트를 보며 '이 언어는 진짜 미쳤나봐...' 싶을 만큼 헉 스럽고 적응이 안되고 있는데 ㅎㅎ. 쨌든.

1급 객체 역시 앞에서 말한 1급 함수의 특징을 그대로 가지고 있다. 즉 1급 시민이 누리는 권리를 동일하게 누리는 것이다.
마치 variables처럼 함수의 인자가 되기도 하고, 함수의 리턴값이 되기도 하고, 변수에 할당되기도 한다.

예시

아래 예시들은 MDN 홈페이지에 나온 예시들을 변형하여 활용하였음

  1. 변수에 함수를 할당하기(assigning a function to a variable)
// fruit라는 변수에 함수를 할당(arrow function을 사용)
const fruit = () => {
  console.log('Apple');
}

// 적절한 표현은 아니나, fruit이라는 변수의 '함수화'
// (자바스크립트에서는 변수의 타입을 따로 설정하지 않기 때문에 적절한 표현이 아님)
// 출력결과: Apple
fruit();

  1. 함수를 다른 함수에 인자로 전달하기(passing a function as an argument)
// sayHello 함수 선언과 정의
function sayHello() {
  return 'Hello, ';
}

// greeting 함수에 helloMessage, name 두 개의 인자가 전달
// console.log() 괄호 안 내용을 통해 helloMessage가 함수임을 알 수 있음
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}

// greeting 함수의 첫번째 인자로 sayHello() 함수 전달
//출력 결과: Hello, world!
greeting(sayHello, 'world!');

다른 함수의 인자로 전달된 sayHello() 함수를 콜백 함수(callback function)라고 한다.
콜백 함수는 중요한 개념이기도 하고 내가 따로 연습해야 할 부분이 있는 것 같아 별도로 정리하고자 한다.


  1. 함수를 반환하기(returning a function)
// fruit라는 함수를 선언 및 정의
function fruit() {
  return () => {
    console.log('Apple');
  }
}

나도 아직 arrow function이 익숙치 않아서 위와 같은 내용을 보면 멀뚱 멀뚱... 싶을 때가 있는데. 애로우 펑션(함수명이 없어서 익명함수라고 부르기도 함. 화살표 함수/애로우 펑션은 익명 함수로만 사용 가능)은 함수이므로 위와 같은 형태로 표현할 수 있다.

또 이처럼 함수가 함수를 반환하는 것을 고차 함수(HOF. higher-order function)라고 하니 참고. HOF는 결국 filter, map, reduce와 밀접한 연관이 있는 것 같은데 이 부분도 내용이 많으니 별도로 정리해야 하겠지..?

이번 1급 함수를 정리하면서 느낀 것은, 1급 함수가 무엇이다!를 아는 것이 중요하다기 보다는 이 개념을 근간으로 하여 파생되는 여러가지 기능과 함수들(arrow function, filter, map, reduce, callback function, closure)이 중요하다는 것이었다.

이건 그냥 관문에 지나지 않는군....ㅎㅎ

그래도 그 관문에 대한 정의를 좀 나름대로 정리했으니 이제 진짜들을 만나볼 엄두가 생긴다.
틈날 때마다 정리하고 공부하자.


참고 문서

profile
가벼운 사진, 그렇지 못한 글

0개의 댓글