[내보내번] JavaScript - JavaScript Functions — Understanding The Basics

GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리의 내용 중 공부하고 싶은 아티클을 내가 정리할 겸 기억할 겸 작성하는 번역글이다. 33가지 중 여섯 번째인 Function Scope, Block Scope and Lexical Scope와 관련된 내용이다.

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Brandon Morelli 님이 작성하신 JavaScript Functions — Understanding The Basics 이다. 내용 중간중간 🤔이 아이콘은 본문에 나와 있지 않은 번역 하며 추가한 말이다. 함수 Invoking과 call의 구분을 두기 위해서 call은 호출로 번역하였고 invoking은 그대로 영문으로 두었다. 

JavaScript Functions — Understanding The Basics

---

함수란 무엇인가?

• 함수는 특정 임무를 수행하기 위해 고안된 서브 프로그램이다.
• 함수는 호출(call)될 때 실행된다. 이를 함수 invoking이라고 한다.
• 값은 함수로 전달되어 함수 내부에서 사용할 수 있다. 
• 함수는 항상 값을 반환한다. 자바스크립트에서 반환 값이 명시되어 있지 않으면, 함수는 undefined를 반환한다. 
• 함수는 객체이다. 

함수를 정의하기.

자바스크립트에서는 함수를 정의하는 여러 다른 방법들이 있다:

함수 선언식은 이름이 있는 함수를 정의한다. 함수 선언식을 작성하려면 function 키워드 다음에 함수의 이름 사용한다. 함수 선언식을 사용할 때, 함수 정의는 호이스팅되고, 그렇기 때문에 함수가 정의되기 전에도 해당 함수를 사용할 수 있다. 

function name(parameters){
  statements
}

함수 표현식은 이름이 있을 수도 혹은 익명의 함수일 수도 있다. 익명 함수는 이름이 없는 함수를 말한다. 함수 표현식은 호이스팅되지 않기 때문에 함수가 정의되기 이전에 사용할 수 없다. 아래의 예시에서 익명 함수 객체를 변수에 할당한다. 

let name = function(parameters){
  statements
}

화살표 함수 표현식은 함수 표현식을 위한 더 짧은 구문이다. 화살표 함수는 해당 함수 자신의 this 값을 생성하지 않는다.

let name = (parameters) => {
  statements
}

파라미터 vs. 인자

자바스크립트가 처음이라면 아마도 파라미터와 인자가 서로 바꿔서 사용되는 것을 들어보았을 것이다. 비슷하긴 하면서도, 이 두 키워드 사이에는 중요한 차이가 있다. 

파라미터는 함수를 정의할 때 사용된다. 파라미터는 함수 정의 내부에 생성되는 이름이다. 사실 함수 정의할 때, 최대 255개의 파라미터까지 넘겨줄 수 있다! 파라미터는 괄호() 안에 반점(콤마)으로 구분된다. param1과 param2 두 파라미터에 대한 예제가 있다. 

const param1 = true;
const param2 = false;
function twoParams(param1, param2){
  console.log(param1, param2);
}

인자는 반면에 함수가 실행될 때 (invoked) 각 파라미터로부터 함수가 받는 값이다. 위의 예제에서 두 인자는 true와 false이다. 

함수를 Invoking 하기

함수는 호출되면 실행한다. 이 과정이 invocation이다. 함수 이름을 언급하고 뒤에 괄호를 열고 닫음:()으로 invoke 할 수 있다. 

예제를 살펴보자.

구글 크롬을 사용하고 있자면 개발자 콘솔 창을 열어서 같이 예제를 작성해볼 수 있다. [WINDOWS]: Ctrl + Shift + J [MAC]: Cmd + Opt + J

먼저, logIt이라는 함수를 정의한다. 이 함수는 name이라는 파라미터를 하나를 받는다. 실행 시에, 함수는 콘솔에 name을 출력할 것이다:

function logIt(name){
  console.log(name);
}

함수를 invoke 하기 위해서 단일 파라미터를 전달하면서 호출한다. 여기 이 함수를 name Joe로 호출하고 있다: 

logIt('Joe');
// Joe

함수에 파라미터가 없다면 해당 함수를 빈 괄호로 invoke 할 수 있다:

function logIt2(){
  console.log('The second one');
}

logIt2();
// The second one

함수 반환

자바스크립트에서 모든 함수는 명시되어 있지 않으면 undefined를 반환한다. 

이 점에 대해 빈 함수를 생성하고 invoking 하여 테스트해보자:

function test(){};

test();
// undefined

멋지다, 예상했듯이 undefined가 반환되었다. 

이제, 사용자가 함수에서 반환하고자 하는 것을 return 키워드 뒤에 반환할 값과 함께 반환할 수 있다. 아래의 코드를 보자:

function test(){
  return true;
};

test();
// true

이 예제에서 명시적으로 함수에게 true를 반환할 것을 알려준다. 해당 함수를 invoke 하면 바로 true가 반환된다. 

그런데 왜 이 점이 중요할까?

왜냐하면 함수가 반환하는 값이 사실 그 함수를 호출한 곳으로 반환하는 것이기 때문에 중요하다. 이 코드를 보자: 

let double = function(num) {
   return num * 2;
}

이 함수 표현식은 num 파라미터의 값을 두 배로 반환하는 함수를 생성한 것이다. 해당 함수를 invoke 하고 반환 값을 변수에 저장할 수 있다: 

let test = double(3);

우리가 test 값을 출력해보면 6을 확인할 수 있다:

console.log(test);
// 6

멋지다! return은 함수에서 값을 반환할 뿐 아니라 함수를 호출한 무엇이든 그것에 값을 할당한다.

---

return 문의 다른 중요한 규칙은 함수의 실행을 즉시 중단한다는 것이다.

두 개의 return문이 있는 test 함수에 대한 예제를 고려해보자:

function test(){
  return true;
  return false;
};
test();
// true

 처음 return 문은 함수 실행을 즉각 중단하고 함수가 true를 반환하도록 한다. 세 번째 줄에: return false;는 절대 실행되지 않는다.

함수 객체

함수는 함수 객체이다. 자바스크립트에서 기본형(undefined, null, boolean, number, string)이 아닌 것은 무엇이든 객체이다. 자바스크립트에서 객체는 매우 다용도로 사용할 수 있다. 이 때문에, 우리는 함수에 다른 함수를 파라미터로 넘겨줄 수도 있다. 

함수가 다른 함수를 파라미터로 받을 때나 함수를 반환할 때, 고차 함수(higher-order function)이라는 것을 호출한다. 아마도 이미 많은 고차 함수를 심지어 무엇인지도 모른 채 사용해 보았을 것이다: Array.prototype.map, Array.prototype.filter가 고차 함수이다.(몇 개만 언급한 것이다.) 이전에 써둔 아티클들을 통해 자바스크립트의 객체와 고차 함수에 대해 알아볼 수 있다. 

주요점

소화할 내용들이 많다. 여기 중요한 것들에 대한 목록을 적어뒀다. 

• 함수는 특정 임무를 수행하기 위해 고안된 서브 프로그램이다.
• 함수 선언식은 호이스팅된다 - 함수 표현식은 그렇지 않다.
• 함수는 호출(call)될 때 실행된다. 이를 함수 invoking이라고 한다.
• 값은 함수로 전달될 수 있으며 함수 내부에서 사용될 수 있다. 그 값의 이름은 파라미터이고, 실제 값은 인자라고 부른다. 
• 함수는 항상 값을 반환한다. 자바스크립트에서 return 값이 명시되어 있지 않으면 함수는 기본적으로 undefined를 반환한다. 
• 함수는 객체이다.