[JS] 함수

개발이란 당면한 어떤 문제를 해결하기 위해서 새로운 것을 만드는 것을 의미한다. 따라서 개발이란, 해결해야 할 문제도 찾고, 어떻게 해결할지에 대해서 고민하는 과정을 포함한다. 함수는 이러한 문제 해결을 위한 과정을 체계적으로 잘 구성한 하나의 작은 기능이다. 만약 아래와 같은 형태의 계산기를 만들어야 한다면 몇 가지의 기능이 필요할까?

 

• 연산 기능(+, -, *, /)
• 숫자를 입력하는 기능
• 결과를 화면에 표시하는 기능
• 브라우저에 계산기를 어떻게 보여줄지 결정하는 기능

 

크게 분류해도 이 정도의 기능이 필요하다. 이와 같은 기능 하나 하나가 모두 함수로 이루어져 있다고 할 수 있다. 즉, 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위이다.  

function sum(num1, num2) { // sum이라는 이름의 함수는 함수 외부로부터 두 개의 숫자(num1, num2)를 입력 받습니다.
  let result; // 변수 result 선언합니다.
  result = num1 + num2; // result에 외부에서 전달 받은 두 개의 숫자의 합을 할당합니다.
  return result; // result에 할당한 값을 함수 외부로 반환합니다.
}

let output = sum(1, 2); // 함수 sum에 차례대로 num1에는 숫자 1, num2에는 숫자 2를 전달하여 나온 결과를 변수 output에 할당합니다.
console.log(output); // 변수 output에 할당된 값을 출력합니다. -> 결과: 3

 

인스타그램이나 유튜브, 카카오톡 같은 애플리케이션도 이렇게 작은 함수를 모아서 만들었다. 이렇게 함수를 하나 만든 것은 이미 작은 단위의 개발을 마쳤다고 볼 수 있다. 👏🏻

 

 

 

 

 

함수 정의

 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음이다.

 

 

먼저, 함수 외부에서 특정한 입력값을 전달하여 호출할 수 있다. 함수가 호출되면 함수의 내부의 코드가 실행된다.  함수의 실행결과는 다시 함수 외부로 반환(return)할 수 있다.

 

 

예를 들어, 함수 외부에서 x는 2, y는 3이라는 입력값이 주어졌다고 했을 때, 함수 내부에는 x와 y를 더하여 함수 외부로 반환하도록 코드가 작성되어 있다. x와 y를 더한 값은 5이기 때문에, 이 함수는 5를 반환하게 된다. 정리하자면, 함수를 사용한다는 것은 특정한 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것을 의미한다. 그리고 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 ‘함수를 정의한다.’고 한다.

 

함수선언문과 함수표현식

JavaScript에서 함수를 정의하는 방법은 여러 가지가 있는데 그중에서 가장 대표적인 함수 정의 방법은 함수선언문과 함수표현식이다.

 

함수선언문

// 함수선언문으로 정의한 함수
function greeting () { 
	console.log('hello world') 
};

 

변수를 선언할 때 let키워드를 사용하듯, 함수를 정의 할 때는 function 키워드를 사용한다. function 키워드 다음에는 함수명을 지정해 준다. 위 예제에는 greeting이라는 함수명을 사용했다. 그 뒤에는 소괄호(())를 입력한다. 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있다. 다음으로, 실행할 코드를 코드블록({}) 내부에 넣어주면 된다. 코드블록 안에는 문자열 ‘hello world’를 출력하는 코드가 있다. **함수는 호출 되었을 때만 코드블록 내부의 코드가 실행된다.** 

 

함수표현식

// 함수표현식으로 정의한 함수
let greeting = function () {
	console.log('hello world')
};

 

함수표현식은 변수를 선언할 때 사용했던 let 키워드를 사용해서 변수를 선언하고, 함수를 할당하는 형태로 코드를 작성한다. 이때, 함수선언문과는 달리, 함수에는 특별한 식별자를 지정할 필요가 없다. JavaScript에서는 이처럼 함수를 변수에 할당하는 것이 가능하다. 그리고 이렇게 변수에 함수를 할당한 것과 같은 형태로 함수를 정의하는 것을 함수표현식이라고 한다.

다시말해 함수선언문은 function이라는 함수 선언 키워드를 사용했고, 함수표현식은 변수 선언 키워드로 변수를 선언한 후, 함수를 할당하는 형태로 함수를 정의했습니다. 변수를 선언하듯 함수 선언 키워드인 function 키워드를 사용하여 함수를 선언하는 방식을 함수선언문, 함수 선언 키워드가 아닌 변수 선언 키워드를 사용하여 함수를 ‘표현’한 방식을 함수표현식이라고 기억하면 이 두 가지 함수 정의 방법을 잘 기억하실 수 있을 겁니다.

함수 호출

함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같다.

function greeting () { 
  console.log('hello world')
};

greeting() // 'hello world'

 

이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있다. 함수표현식으로 정의한 함수는 선언한 변수명에 소괄호를 붙여주면 된다.

let greeting = function () {
  console.log('hello world')
};

greeting() // 'hello world'

 

매개변수와 전달인자

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급된다. 함수를 정의할 때 소괄호(())에 매개변수를 추가할 수 있으며, 이렇게 추가된 매개변수는 함수 내부에서 마치 변수와 같은 역할을 하게 된다.

function greeting (name) {
	console.log('hello ' + name);
}

 

greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있다. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있다. 그렇다면 이 매개변수 name에 값을 할당하기 위해서는 전달인자를 사용하면 된다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

 

함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있는데 이것을 바로 전달인자라고 합니다. 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있다.

 

매개변수를 여러 개 사용하는 것도 가능하다. 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달된다.

function greeting (user1, user2) {
	console.log('hello ' + user1);
	console.log('hello ' + user2);
};

greeting('kimcoding', 'parkhacker');

 

그렇다면 만약 매개변수의 수보다 적은 전달인자가 전달되면? 또는 매개변수보다 많은 전달인자가 전달된다면 ?

아무것도 전달되지 않은 매개변수는 undefined로 초기화 되어 있다. (아무것도 할당하지 않은 변수가 undefined로 초기화 되어 있듯)

또 매개변수는 함수 내부에서만 사용이 가능하다. 함수 내부에서 선언한 변수도 마찬가지로 함수 내부에서만 사용이 가능하다.

function getUser (number) {
	let userName = 'kimcoding';
};

console.log(number); // Uncaught ReferenceError: number is not defined
console.log(userName); // Uncaught ReferenceError: userName is not defined

 

이처럼 매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정된다. 변수가 유효한 범위를 스코프라고 부른다.

 

return문

지금까지는 주로 함수 내부에서 console.log()를 사용하여 값을 콘솔창에 출력하는 방식으로 확인을 했다. 그런데 외부에서 값을 전달받았듯 함수의 실행결과를 외부로 반환할 수는 없을까? (여기서 반환한다는 것은 함수 외부에서 함수의 결과값을 사용할 수 있다는 의미)

function add (x, y) {
	return x + y; // 반환문
}

 

이 함수는 두 수를 입력받아 합을 리턴하는 함수이다. 여기서 주목해야 할 것은 return이라는 키워드인데, 지금까지 사용했던 ‘반환한다’라는 표현도 return을 번역한 표현이라고 보면 된다.  

 

return문은 아래와 같은 중요한 역할을 한다.

• 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료된다. (return문 뒤에 나오는 코드는 실행되지 않는다.)
  function add (x, y) { return x + y; // 반환문 console.log('실행되지 않습니다'); }
• return문에 작성된 코드를 실행 후 결과를 함수 외부로 리턴한다. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있다.
  function add (x, y) { return x + y; // 반환문 } console.log(add(3, 2)); // 5
• 또는 함수 호출의 결과를 변수에 할당하는 것도 가능하다.
  function add (x, y) { return x + y; // 반환문 } let result = add(3, 2); console.log(result); // 5

앞서 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 반환하는 일련의 과정의 묶음이고, 함수는 반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용할 수 있다. 함수는 JavaScript에서 사용 가능한 모든 값을 반환할 수 있기 때문에 굉장히 다양한 방법으로 활용이 가능하다.