[1주차] 함수 정리

프로그래밍에서 함수(function)는 특정한 작업을 수행하는 코드를 의미한다. 함수를 미리 만들어 두면 원할 때 실행 해 정해진 작업을 수행하게 할 수 있다.

 

1. 함수 선언하기

함수를 만들 때는 보통 function 예약어를 사용하거나 화살표 기호(=>)를 사용한다. 함수에는 기본적으로 이름이 없으므로 다른 곳에서 사용할 수 없다. 이런 이름이 없는 함수는 특별히 익명 함수라고 한다.

function() {};
() => {};

 

함수는 이름을 붙여야 다른 곳에서 사용할 수 있다.

function a() {}
const b = function() {};
const c = () => {};

세 함수에 a, b, c라고 이름을 붙였는데, 함수 a()만 상수에 대입하지 않았다. 이처럼 함수를 상수에 대입하지 않고 function 뒤에 함수의 이름을 넣는 방식을 함수 선언문이라고 한다.

function 이름() { 실행문 }

두 번째와 세 번째 함수는 각각 상수 b와 c에 대입했다. 이렇게 대입하면 상수 또는 변수의 이름의 함수의 이름이 된다. 이 중에 함수 b()와 같이 함수를 상수나 변수에 대입하는 방식을 함수 표현식이라고 한다.

이름 = function() { 실행문 }

그리고 함수 c()처럼 화살표 기호를 사용한 함수는 화살표 함수라고 한다.

() => { 실행문 }
// 또는
() => 반환식

변수와 마찬가지로 함수를 만드는 행위도 선언한다라고 표한한다.

 

왜 함수 a 뒤에는 세미콜론을 안 붙이나?
: 붙여도 되고 안 붙여도 됨. if문, for문, while문, 함수 선언문의 중괄호 뒤에는 세미콜론을 붙이지 않음.

 

2. 함수 호출하기

함수를 사용하는 행위를 프로그래밍에서는 호출한다(call)고 표현한다.

함수 a()를 선언한 후 함수 이름인 a 뒤에 ()를 붙이면 함수가 실행된다. 지금은 함수 내부에 어떤 작업도 정의하지 않아서 결과에 undefinded만 나옴.

function a() {}
a();
< undefined

 

지금까지 console.log()나 parseInt() 같은 명령 뒤에 ()를 붙여 사용했다. 즉, console.log()와 parseInt()도 함수라는 의미이다.

이번에는 함수 안에 실행문을 넣어보겠다. 중괄호 안에 코드를 작성하면 된다.

function a() {
	console.log('Hello');
	console.log('Function');
}
a();

Hello
Function

console.log()도 함수라고 했다. 이처럼 함수 안에서 다시 함수를 호출할 수도 있다. 함수 a()를 호출하니 내부에서 다시 console.log() 함수가 호출된다.

코드를 함수로 만들어 두면 코드를 재사용하기 쉽다.

 

3. return 문으로 반환값 지정하기

function a() {}
a();
< undefined

함수를 호출하면 항상 결과 값이 나오는데, 이를 반환값(return value)이라고 한다. 예제에서 함수 a()를 호출하니 undefined만 나온다. 즉, 함수 a()의 반환값은 undefined이다.

console.log() 함수를 호출할 때마다 undefined가 출력되던 것도 바로 반환값이 undefined여서 그렇다.

변수를 선언할 때 값을 대입하지 않으면 기본으로 값이 undefined가 된다. 함수에서도 반환값을 지정하지 않으면 기본으로 undefined가 된다. 이후 반환값으로 나오는 undefined는 생략하겠다.

반환값을 직접 정할 수도 있다. return 문을 추가하면 된다.

function a() {
	return 10;
}
a();
< 10

함수를 호출하면 반환값으로 undefined 대신 10이 나온다.

명시적으로 return 문을 사용하지 않았다면 항상 함수 실행문 끝에 return undefined;가 있다고 생각하면 된다.

// 예제 1 - 다음 두 함수는 의미가 같음
function a() {}
function a() {
	return undefined;
}

// 예제 2 - 다음 두 함수도 의미가 같음
function a() {
	console.log('a');
}
function a() {
	console.log('a');
	return undefined;
}

 

반환값도 값이므로 다른 식이나 문에 넣어 사용할 수 있다.

function a() {
	return 10;
}
console.log(a());
10

함수의 반환값을 상수나 변수에 대입할 수 있다. 함수의 반환값도 값이라는 점을 기억해야 된다.

function a() {
	return 10;
}
const b = a();
b;
< 10

 

 

return 문에는 역할이 하나 더 있다. 바로 함수의 실행을 중간에 멈추는 역할이다.

function a() {
	console.log('Hello');
	return;
	console.log('Return');
}
a();
Hello;

console.log('Return');보다 return;이 더 위에 있기 때문에 Hello만 콘솔에 출력된다. return 문이 실행되면 그 아래 코드는 아예 실행되지 않는다.

function a() {
	if (false) {
		return;
	}
	console.log('실행됩니다.');
}
a();
실행됩니다.

조건문이 false이므로 return 문도 당연히 실행되지 않아 if 문 아래에 있는 console.log()는 정상적으로 호출된다.

 

4. 매개변수와 인수 사용하기

console.log() 함수를 호출할 때 소괄호 안에 값을 넣었었다. 그렇게 넣은 값을 console.log() 함수가 받아서 콘솔에 출력한다. 이때 알 수 있는 것은 함수에 원하는 값을 넣을 수도 있다는 점이다. 여기서 매개변수와 인수의 관계가 나온다.

function a(parameter) {
	console.log(parameter);
}
a('argument');
argument

선언 - parameter - 매개변수
호출 - argument - 인수

이 예제를 이해하려면 함수 a()를 호출했을 때 소괄호에 넣은 'argument' 문자열에 어떻게 사용되는지 파악해야 한다. 'argument' 문자열은 함수 a()를 선언할 때 소괄호에 넣은 parameter와 연결된다. 따라서 parameter는 'argument'를 값으로 가진다. 즉, parameter = 'argument'와 같다. 실제로 parameter는 변수와 같은 특성을 가진다.

함수가 하나의 매개변수와 하나의 인수만 가지는 것은 아니다. 각각 여러 개를 가질 수 있고, 심지어 매개변수와 인수의 개수가 일치하지 않아도 된다.

 

function a(w, x, y, z) {
	console.log(w, x, y, z);
}
a('Hello', 'Parameter', 'Argument');
Hello Parameter Argument undefined

z에 대응되는 인수가 없을 때는 undefined 값이 대입된다. 그래서 결과에 매개변수 z의 값이 undefined로 나온다.

예제처럼 매개변수의 인수의 개수가 일치하지 않을 수 있다. 따라서 변수의 개수로 인수의 개수를 추정할 수 없다. 인수가 몇 개인지 궁금하다면 arguments라는 값을 사용해 알아낼 수 있다.

function a(w, x, y, z) {
	console.log(w, x, y, z);
	console.log(arguments);
}
a('Hello', 'Parameter', 'Argument');
Hello Parameter Argument undefined
Arguments(3) ['Hello', 'Parameter', 'Argument']

 

function a(w, x) {
	console.log(w, x);
}
a('Hello', 'Parameter', 'Argument');
Hello Parameter

매개변수의 개수를 인수보다 적게 선언해보았는데, 남은 'Argument'는 어떤 매개변수에 대응되지 않으므로 'Argument'는 사용되지 않고 버려진다.

 

function add(x, y) {
	return x + y;
}
add(3, 5)
< 8
add(8, 7)
< 15

 

5. 다른 변수 사용하기

함수 안에서 변수나 상수를 선언할 수 있다. 다음 예제는 함수 안에 상수 a를 선언한 후 return 문에서 사용한다.

function minus1(x, y) {
	const a = 100;
	return (x - y) * a;
}
minus1(5, 3)
< 200

 

함수 바깥에 위치한 변수나 상수를 함수 안에서 사용할 수 있다.

const a = 100;
function minus2(x, y) {
	return (x - y) * a;
}
minus2(5, 3)
< 200

이렇게 함수는 자신의 매개변수나 함수 내부에 선언한 변수 또는 상수가 아니더라도 접근할 수 있다. 다만, 모든 상수나 변수에 접근할 수는 없고 스코프에 따라 접근 여부가 달라진다.

minus1() 함수처럼 자신의 매개변수나 내부 변수(또는 상수)만 사용하는 함수를 순수 함수라고 하고, minus2() 함수는 외부 변수(또는 상수)에 접근하므로 순수 함수가 아니다.