Unit2-[JavaScript] 함수

📌 함수 개요

현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있습니다. 복잡한 문제를 해결하기 위해서는 반대로 작고 간단한 문제를 하나씩 해결하고, 마지막에는 크고 복잡한 문제를 해결합니다. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결합니다.함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위입니다. 논리적인 일련의 작업을 하는 하나의 단위를 함수라고 합니다.

💡 함수를 사용하는 이유 - 크고 복잡한 문제를 해결하기 위해 작은 문제 부터 해결하듯이 이런 하나의  작은 과정을 컴퓨터는 함수로 표현 할 수 있다. 즉 복잡한 문제를 해결하기 위한 논리적인 일련의 작업을 하는 하나의 단위를 함수라 한다. 또한 반복적인 동작을 묶어놨다가 사용하기에도 편리하다.

 

📌 함수 정의

✏️ 함수 정의

이번 시간에는 JavaScript에서 매우 중요한 개념인 함수에 대해서 배워보도록 하겠습니다. 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음입니다.

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

예를 들어, 함수 외부에서 x는 2, y는 3이라는 입력값이 주어졌다고 해보겠습니다. 함수 내부에는 x와 y를 더하여 함수 외부로 반환하도록 코드가 작성되어 있습니다. x와 y를 더한 값은 5이기 때문에, 이 함수는 5를 반환하게 됩니다. 만약 함수외부에서 x와 y에 2와 3이 아닌 다른 값을 전달했다면, 다른 결과가 나왔을 거라는 것을 유추할 수 있을 겁니다.

정리하자면, 함수를 사용한다는 것은 특정한 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것을 의미합니다. 그리고 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 ‘함수를 정의한다.’고 합니다.

 

✅  함수선언문과 함수표현식

JavaScript에서 함수를 정의하는 방법은 여러 가지가 있습니다. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배워보도록 하겠습니다.

먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해 보겠습니다.

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

변수를 선언할 때 let키워드를 사용하듯, 함수를 정의 할 때는 function 키워드를 사용합니다. function 키워드 다음에는 함수명을 지정해 줍니다. 위 예제에는 greeting이라는 함수명을 사용했습니다. 그 뒤에는 소괄호(())를 입력해야 합니다. 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있습니다. 매개변수와 관련된 내용은 뒤에서 따로 학습하도록 하겠습니다. 다음으로, 실행할 코드를 코드블록({}) 내부에 넣어주면 됩니다. 코드블록 안에는 문자열 ‘hello world’를 출력하는 코드를 작성했습니다.

이번에는 직접 함수선언문으로 함수를 정의해 보겠습니다.

 

💻 실습1)

문자열 ‘함수선언문’을 출력하는 declared라는 이름의 함수를 함수선언문으로 정의해 보세요.

 

💡 실습1 - 정답)

// 문자열 '함수선언문'을 출력하는 declared라는 이름의 함수를 함수선언문으로 정의해 보세요.
function declared () {
	console.log('함수선언문');
}

그런데 신기하게도, 지금까지와 달리 터미널에 `node index.js`를 입력해도 ‘함수선언문’이라는 문자열이 출력되지 않는다는 것을 발견하셨을 겁니다. 위에서 언급한 것처럼, **함수는 호출 되었을 때만 코드블록 내부의 코드가 실행됩니다.** 

이번에는 함수표현식으로 똑같은 함수를 정의해 보겠습니다.

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

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

💻 실습2)

문자열 ‘함수표현식’을 출력하는 expression이라는 이름의 함수를 함수표현식으로 정의해 보세요.

 

💡 실습2 - 정답)

// 문자열 '함수표현식'을 출력하는 expression이라는 이름의 함수를 함수선언문으로 정의해 보세요.
let expression = function () {
	console.log('함수표현식');
}

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

💡 함수를 정의하는법 - 함수도 어찌보면 하나의 변수이다. 동작(코드)을 값으로 받는 변수라 생각할 수  있다. 반복적인 동작을 쉽고 편리하게 사용(호출)하기 위해 함수선언문과 함수표현식을 사용하는 것이다. 

📌 함수 호출

✅ 함수 호출

 

지난 챕터에서 함수를 정의하는 방법을 학습하고 실습까지 진행해 보았습니다. 그런데 지금까지 해왔던 실습과 한 가지 다른 점이 있습니다. 이전까지의 실습은 console.log()로 콘솔에 우리가 입력한 내용이 출력되는지 확인하는 방식이었습니다. 그러나 이번에는 함수를 정의하는 코드를 작성했음에도 콘솔에 아무것도 출력되지 않습니다. 함수 내부에 있는 console.log()가 실행되지 않고 있는 건데요. 왜 그런 걸까요?

그 이유는 바로, 함수 내부에 있는 코드는 함수를 호출 했을 때만 실행되기 때문입니다. 다시 말해, 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같습니다. 함수선언문으로 정의한 함수를 호출해 보겠습니다.

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'

함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있습니다. 이것을 바로 전달인자라고 합니다. 호출할 때 전달한 'kimcoding'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것을 확인할 수 있습니다. 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있습니다. 지금까지 배운 내용을 활용해서 구구단 n단을 출력하는 함수를 정의하고 호출해 볼까요?

 

💻 실습1

구구단 n단을 출력하는 함수를 정의하고 호출하세요.

 

💡 실습1 - 정답)

function multiplication (n) {
	for(let i = 1; i <= 9; i++) {
		console.log(n * i);
	}
}

multiplication (3)

매개변수를 여러 개 사용하는 것도 가능할까요? 물론 가능합니다. 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달됩니다.

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

greeting('kimcoding', 'parkhacker');

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

function getUserName (user1, user2) {
	console.log(user1);
	console.log(user2);
};

getUserName('kimcoding'); // 'kimcoding' undefined

아무것도 전달되지 않은 매개변수는 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)하려면 어떻게 해야할까요? 다음 영상에서 배워보도록 하겠습니다.

 

📌 return문

✅ return문

 

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

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

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

 

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

 

1️⃣ 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료됩니다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않습니다.

function add (x, y) {
	return x + y; // 반환문
	console.log('실행되지 않습니다');
}

2️⃣ return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴합니다. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있습니다.

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

 console.log(add(3, 2)); // 5

3️⃣ 또는 함수 호출의 결과를 변수에 할당하는 것도 가능합니다.

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

let result = add(3, 2);
console.log(result); // 5

4️⃣ 조금만 더 응용해 본다면, 함수의 호출 결과끼리의 연산도 가능합니다.

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

let result = add(3, 2) + add(5, 7);
console.log(result); // 17

 

💻 실습1)

두 수를 입력 받아 두 수의 곱을 리턴하는 함수를 정의하세요.

 

💡 실습1 - 정답)

function subtraction(num1, num2) {
  return num1 * num2;
}

console.log(subtraction(30, 20));
console.log(subtraction(50, 10));

함수의 활용 목적에 대해서 다시 한 번 생각해 보겠습니다. 앞서 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 반환하는 일련의 과정의 묶음이라고 설명했습니다. 함수는 반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용할 수 있습니다.

함수는 JavaScript에서 사용 가능한 모든 값을 반환할 수 있기 때문에 굉장히 다양한 방법으로 활용이 가능합니다. 함수를 응용하는 다양한 방법에 대해 계속해서 학습하겠습니다.

 

💡 return문을 사용하는이유 - 함수 외부로 값을 전달해야 함수외부에서도 값을 사용할 수 있다.