정의

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다.

1. 함수의 이름

2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

3. 중괄호({})로 둘러싸인 자바스크립트 실행문

필수 : 함수 이름
옵션 : 매개 변수, 반환결과

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅 영향을 받지 않는다.

문법

function 함수이름(매개변수1, 매개변수2,...) {

    함수가 호출되었을 때 실행하고자 하는 실행문;

}

ex)
function addNum(x, y) { // x, y는 이 함수의 매개변수임.
return x + y;
}

document.write(addNum(2, 3));
//addNum() 함수에 인수로 2와 3을 전달하여 호출함. 값은 5가 출력됨.

함수 이름짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것입니다. 따라서 함수의 이름은 대개 동사입니다. 함수 이름은 가능한 한 간결하고 명확해야 합니다. 함수가 어떤 동작을 하는지 설명할 수 있어야 하죠. 코드를 읽는 사람은 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 합니다.

함수가 어떤 동작을 하는지 축약해서 설명해주는 동사를 접두어로 붙여 함수 이름을 만드는 게 관습입니다. 다만, 팀 내에서 그 뜻이 반드시 합의된 접두어만 사용해야 합니다.

"show"로 시작하는 함수는 대개 무언가를 보여주는 함수입니다.

이 외에 아래와 같은 접두어를 사용할 수 있습니다.

• "get…" – 값을 반환함
• "calc…" – 무언가를 계산함
• "create…" – 무언가를 생성함
• "check…" – 무언가를 확인하고 불린값을 반환함

위 접두어를 사용하면 아래와 같은 함수를 만들 수 있습니다.

• showMessage(..) // 메시지를 보여줌
• getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
• calcSum(..) // 합계를 계산하고 그 결과를 반환함
• createForm(..) // form을 생성하고 만들어진 form을 반환함
• checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함

접두어를 적절히 활용하면 함수 이름만 보고도 함수가 어떤 동작을 하고 어떤 값을 반환하는지 쉽게 알 수 있습니다.

함수는 동작 하나만 담당해야 합니다.

함수는 함수 이름에 언급되어있는 동작을 정확히 수행해야 합니다. 그 이외의 동작은 수행해선 안 됩니다.

독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 합니다.
한 장소에서 두 동작을 동시에 필요로 하는 경우라도 말이죠(이 경우는 제3의 함수를 만들어 그곳에서 두 함수를 호출합니다).

개발자들이 빈번히 하는 실수를 소개해 보겠습니다.

• getAge 함수는 나이를 얻어오는 동작만 수행해야 합니다. alert 창에 나이를 출력해주는 동작은 이 함수에 들어가지 않는 것이 좋습니다.

• createForm 함수는 form을 만들고 이를 반환하는 동작만 해야 합니다. form을 문서에 추가하는 동작이 해당 함수에 들어가 있으면 좋지 않습니다.

• checkPermission 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야 합니다. 승인 여부를 보여주는 메시지를 띄우는 동작이 들어가 있으면 좋지 않습니다.

위 예시들은 접두어의 의미가 합의되었다고 가정하고 만들었습니다.
본인이나 본인이 속한 팀에서 접두어의 의미를 재합의하여 함수를 만들 수도 있긴 하지만, 아마도 위 예시에서 사용한 접두어 의미와 크게 차이가 나진 않을 겁니다.
어찌 되었든 접두어를 사용하여 함수 이름을 지을 땐, 해당 접두어에 어떤 의미가 있는지 잘 이해하고 있어야 합니다.
해당 접두어가 붙은 함수가 어떤 동작을 하는지, 어떤 동작은 하지 못하는지 알고 있어야 하죠.
접두어를 붙여 만든 모두 함수는 팀에서 만든 규칙을 반드시 따라야 합니다.
팀원들은 이 규칙을 충분히 이해하고 있어야 하며, 팀원들 사이에 이 규칙이 잘 공유되어야 합니다.

아주 짧은 이름

정말 빈번히 쓰이는 함수 중에 이름이 아주 짧은 함수가 있습니다.

jQuery 프레임워크에서 쓰이는 함수 $와 Lodash 라이브러리의 핵심 함수 _ 말이죠.

이 함수들은 지금까지 소개한 함수 이름짓기에 관련된 규칙을 지키지 않고 있습니다. 예외에 속하죠. 함수 이름은 간결하고 함수가 어떤 일을 하는지 설명할 수 있게 지어야 합니다.

함수 호출

arguments[0] 및 [1]은 호출 값 자리이다. (0번째 숫자, 1번째 숫자..)

함수 반환

자바스크립트에서 함수는 반환(return)문을 포함할 수 있습니다.

이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있습니다.

반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환합니다.

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있습니다.

ex)

function multiNum(x, y) {

    return x * y;         // x와 y를 곱한 결과를 반환함.

}

var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.

document.write(num);

값으로서의 함수

자바스크립트에서 함수는 문법적 구문일뿐만 아니라 값(value)이기도 합니다.

따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있습니다.

다음 예제는 함수를 변수에 저장하여 사용하는 예제입니다.

예제
unction sqr(x) { // 제곱의 값을 구하는 함수 sqr를 정의함.

return x * x;

}

var sqrNum = sqr; // 변수 sqrNum에 함수 sqr을 대입함.

document.write(sqr(4) + "<br>"); // 함수 sqr을 호출함.

document.write(sqrNum(4)); // 변수 sqrNum를 함수처럼 호출함.

재귀 함수

콜백 함수

넘기는 함수를 콜백함수, 콜백함수를 실행하는 함수를 고차함수라 한다.

call by

• call by value :

  b의 값에 a 값을 넣어주므로써 b는 2가 됨.
  a는 영향을 받지않고 그대로 1임.
  각각 다른 메모리 영역이므로 b가 업데이트 되어도 a에 영향을 미치지 않음
  이걸 값에 대한 복사라고 한다.

• call by reference

  함수가 호출될 때, 메모리 공간 안에서는 함수를 위한 별도의 임시 공간이 생성된다. (예: stack frame) 함수가 종료되면 해당 공간은 사라진다.
  call-by-reference 참조에 의한 호출방식은 함수 호출시 인자로 전달되는 변수의 레퍼런스를 전달한다. (해당 변수를 가르킨다.)
  `따라서 함수 안에서 인자의 값이 변경되면, 아규먼트로 전달된 객체의 값도 함께 변경된다.

연습문제

즉시실행함수

함수 표현(Function expression)은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거칩니다. 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다. 함수를 정의하자마자 바로 호출하는 것을 즉시 실행 함수라고 이해하면 편할 것 같습니다.

블럭 스코프를 흉내내는 새로운 스코프를 만들어냄.

문법

즉시 실행 함수의 기본 형태는 아래와 같습니다.

(function () {
    // statements
})();

ex)

(function (num) {
  console.log(num);
})(1);    // 1 출력

화살표함수

ex)

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

• 그런데 평가해야 할 표현식이나 구문이 여러 개인 함수가 있을 수도 있습니다. 이 경우 역시 화살표 함수 문법을 사용해 함수를 만들 수 있습니다. 다만, 이때는 중괄호 안에 평가해야 할 코드를 넣어주어야 합니다. 그리고 return 지시자를 사용해 명시적으로 결괏값을 반환해 주어야 합니다.

아래와 같이 말이죠.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

• 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.

예시:

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

• 인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.

let sayHi = () => alert("안녕하세요!");

sayHi();

,

(() => {console.log("HI");})();   // HI 출력

• 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.
  아래 예시와 같이 함수를 동적으로 만들 수 있습니다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  function() { alert("안녕!"); } :
  function() { alert("안녕하세요!"); };

welcome(); 

이것은 아래와 같이 바꿀 수 있습니다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

화살표 함수 요약

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;