함수 (Function)

JavaScript에서 함수란? 다른 객체처럼 속성 및 method를 가질 수 있기에 일급(first-class) 객체이며 인자를 가질 수 있는 코드 블록이다. 함수는 자체 범위를 가진다. JavaScript에서 함수는 프로그램의 매우 중요한 특징이며, 특히 부모 함수의 지역 변수에 접근할 수 있다(이를 closure라고 한다).

1. 함수를 사용하는 이유

• 코드를 재사용할 수 있다. (코드를 한 번 정의하고, 여러 번 사용)
• 다른 인자를 사용하여 동일한 코드를 여러 번 사용할 수 있으며, 다른 결과를 도출할 수 있다.

2. 함수의 특징

• 변수안에 담길 수 있다. (함수가 값이기 때문)
• 객체의 속성안에 method로 담길 수 있다.
• 다른 함수의 인자값을 전달될 수 있다.
• 함수의 return값으로도 사용할 수 있다.
• 배열의 값으로도 사용할 수 있다.

3. 함수 구문

function name (parameter1, parameter2,...) {
	// Execution statement
}

• 함수 내에 선언된 변수는 함수의 지역변수가 된다. 지역 변수는 함수 내에서만 접근할 수 있으며 함수가 시작될 때 생성되고 함수가 완료되면 삭제된다.
• 함수 이름에는 문자, 숫자, 밑줄 및 달러 기호 (변수와 동일한 규칙)가 포함될 수 있다.
• 괄호에는 쉼표로 구분된 매개 변수 이름이 포함될 수있다.
  (parameter1, parameter2, ...)
• 함수가 실행할 코드는 중괄호 ({})안에 있다.

3.1 함수 선언식

function addOne(x) {
  var y = x + 1;
  return y;
}

3.2 함수 표현식

변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 한다.

var addOne = function(x) {
  var y = x + 1;
  return y;
};

함수 선언식과 함수 표현식의 차이로는 호이스팅이라는 현상의 차이가 있다.

함수 표현식과 함수 선언문의 차이

함수 선언문

• 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
• 함수 선언문이 정의되기 전에도 호출 가능하다.

함수 표현식

• 함수는 표현식이나 구문 구성 내부에 생성된다.
• 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

위와 같이 가능한 이유는 JavaScript 내부의 알고리즘 때문이다.

JavaScript는 Script를 실행하기 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성한다. 즉, Script가 진짜 실행되기 전 '초기화 단계'에서 함수 선언 방식으로 정의한 함수가 생성되는 것이다.

Script는 함수 선언문이 모두 처리된 이후에서야 실행된다. 따라서 Script 어디서든 함수 선언문으로 선언된 함수에 접근할 수 있다.

4. 함수 이름 지정

함수의 이름은 가능한 짧고 정확하게 함수의 기능을 설명해야 한다.

• show.. : 무언가를 보여준다.
• get.. : 값을 반환한다.
• calc.. : 무언가를 계산한다.
• create.. : 무언가를 만든다.
• check.. : 무언가를 확인하고 불리언 등을 반환한다.

사용예시

showMessage(..)		// shows a message
getAge(..)			 // returns the age (gets it somehow)		
calcSum(..)			// calculates a sum and returns the result
createForm(..)		 // creates a form (and usually returns it)
checkPermission(..)	// checks a permission, returns true/false

5. 함수 선언

// 함수 선언
function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

위 코드 예제는 add라는 이름의 함수를 선언하는 코드이다. 즉, add라는 단어의 의미가 저 함수가 되도록 설정한다는 뜻이다. 기본적으로 자바스크립트에서 add라는 단어는 아무런 의미가 없는 단어지만 저 함수를 선언해줌과 동시에 우리는 add라는 단어를 사용할 수 있게 되고, JavaScript 실행 엔진도 add라는 단어가 곧 저 함수를 의미한다는 것을 알게 된다.

6. 함수 호출

선언해 놓은 함수는 아래와 같이 소괄호를 이용하여 호출할 수 있다.
함수를 호출한다. = 함수 내부의 코드가 실행된다.

add(3, 5);

함수를 호출하기 전까지는 함수 내부의 코드 구문들은 실행되지 않는다.

7. 즉시 실행 함수 (IIFE)

(function() {
	statements
})();

IIFE는 함수가 선언되자마자 호출되는 함수 표현식이다.

매개 변수

function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

add(3, 5);  // 함수 실행

// 결과 : 8

첫번째 줄의 x, y를 매개변수라고 부른다. 우리가 작성하는 함수에 필요한 요소들을 "정의" 하는 거라 생각하면 된다.

함수를 선언하고 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않는다. 매개 변수의 정확한 값은 함수를 호출하는 순간에 결정된다.

실행하는 소괄호 안에 3, 5를 쉼표로 구분하여 넣었다. 3과 5처럼 함수를 호출할 때 함수가 받는 값을 인자(argument)라고 부른다.

var result = x + y;
console.log(result);
return result;

1.result 변수가 선언된다.
2.x + y를 연산하고 8이라는 결과를 얻는다.
3.8이라는 결과값을 result 변수에 할당한다.
4.콘솔에 result 변수의 값을 로그한다.
5.result 변수의 값을 반환(return)한다.

Return 명령문

return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.

3.1 Return의 기능 - 함수 종료

함수 내부에서 return 명령문이 실행될 경우, 해당 함수가 종료된다.

function doSomething () {
  console.log('start!');
  var a = 3;
  var b = 2;

  if (a > b) {
    console.log('a is bigger than b!');
    return;
  }

  console.log('I am the last console.log!');	//실행되지 않음
}

doSomething();

// 결과 : start!, a is bigger than b!

if 구문 내부가 실행되면서 return 명령문이 실행됐기 때문에 return 명령문은 해당 함수를 종료시키게 된다. 현재 return 명령문이 속해있는 함수는 doSomething이기 때문에 doSomething함수의 모든 코드 실행이 종료됨으로 세번째 콘솔 메시지는 나타나지 않는다.

3.2 Return의 기능 - 값 반환

return은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 해준다.

var a = 1;
consol.log(a);

// 결과 : 1

a라는 변수에 1이라는 값을 담아서 콘솔에 나타나도록 로그하였다. 위 코드는 아래와 같이 표현할 수 있다.

function getA () {
  return 1;
}

var a = getA();
console.log(a);

// 결과 : 1

위 예제에서 우리는 getA라는 함수를 선언했다. 그리고 변수 a를 선언하고 getA()라는 값을 대입해주었다. 그렇다면 getA()라는 표현의 값은 무엇일까?

getA()라는 함수 실행문을 살펴보자면 getA가 함수여야 한다. 실제로 우리 예제 코드에서는 getA라는 함수가 존재한다.

함수 실행문이 있는 자리는 해당 함수의 return값으로 대체된다.

return이라는 단어 뒤에 어떤 값을 작성해주게 된다면 해당 값이 함수에서 반환된다. 따라서 현재 getA라는 함수의 return값은 1이다.

function doSomething () {
  var a = 3;
  var b = 2;

  if (a > b) {
    return;
  }

  return 3;
}

var a = doSomething();
console.log(a);

// 결과 : undefined

return이라는 단어 뒤에 어떤 값도 지정해주지 않은 경우, 기본적으로 undefined가 반환되게 된다. 이와 마찬가지로 return되는 값을 지정해주지 않고 종료되는 함수 또한 기본적으로 undefined가 반환되게 된다.

참고사이트

• Functions - W3Schools
• Functions - Learn-js
• Functions - Javascript Info
• Functions - MDN
• Functions - Eloquent Javascript
• Vanilla Coding