[JavaScript] 함수

함수란 하나의 동작을 위한 코드 집합을 의미하며, 반복적인 동작을 처리하기 위해 작성한다. 함수를 작성할 때는 function이라는 키워드를 사용하고, 함수의 이름과 사용하려는 인자를 정의한 다음, {} 괄호 내부에 실행하고자 하는 코드를 작성한다.

function sum(a, b) {
	console.log(a + b);
    }

sum(10, 20); // 30

 

함수 명명의 규칙

• 첫 글자는 영문자, $, _만 사용할 수 있다.
• 첫 글자 이외에는 영문자, $, _, 숫자만 사용할 수 있다.
• 영문자의 소문자와 대문자를 구분한다. (a, A는 다른 변수이다)
• 자바스크립트의 예약어는 사용할 수 없다.
• 공백 문자를 포함할 수 없다.

 

함수와 변수

함수의 내부에서 선언된 변수는, 변수가 존재하는 유효 범위가 함수 내부로 제한되며, 이러한 변수를 지역 변수라고 부른다.

function a() {
	const b = 10;
    console.log(b);
    }

a();
console.log(b);

 

위 코드 예제에서 함수 a() 내부에서 선언된 b는 함수 외부에서 사용할 수 없다. 반면에 함수 외부에서 선언된 변수를 함수 내부에서 접근하는 것은 가능하다. 이때 이렇게 함수 외부에 선언된 변수를 전역 변수라고 부른다. 하지만 함수 외부에서 선언된 변수와 동일한 이름을 가진 변수가 함수 내부에서 재선언될 경우, 함수 내부에서는 재선언된 지역 변수에만 접근할 수 있다.

 

함수의 인자

위에서 우리는 함수를 정의할 때 사용할 인자를 명시하고, 함수를 호출할 때 명시된 인자의 개수에 맞춰 값이나 변수를 전달한다는 것을 배웠다. 그렇다면 지정된 인자가 개수보다 많은 인자를 전달하거나, 부족하게 전달하면 어떻게 될까?

function sum(a, b) {
	console.log(a + b);
    }
    
sum(10); // NaN

 

위 코드 예제의 함수 호출부는 분명 우리가 의도한 것과는 다른 오류 상황이지만, 자바스크립트는 오류를 발생시키지 않는다. 이와 같은 상황에서도 오류가 발생하지 않는 이유는 함수 인자의 기본 값이 undefined로 지정되기 때문이다. 즉 sum(10)의 경우, sum(10, undefined)로 호출된다.

 

인자의 기본 값

function sum(a, b = 20) {
	console.log(a + b);
    }

sum(10); // 30

 

전달 되는 함수 인자의 값이 undefined로 지정되지 않게 하려면, 매개변수 기본 값을 지정하면 된다. 위 코드처럼 함수를 정의할 때 인자 값에 b = 20과 같은 형식으로 값을 지정해 사용할 수 있다.

 

arguments

필요한 것보다 더 많은 인자를 보낼 경우에도 정상적으로 출력된다. 그 이유는 자바스크립트의 함수 내부에는 arguments라는 특별한 지역 변수가 존재하는데, 넘겨받은 인자들을 이 지역 변수 arguments에 마치 배열과 같이 저장되고, 접근하기 때문이다. 쉽게 말해서, 받아주는 저장소가 있기 때문에 초과된 인수를 무시할 뿐, 오류는 발생하지 않는다.

function sum(a, b) {
	console.log(arguments);
    }

sum(10, 20, 30);

 

함수의 반환 값

함수는 특정 동작을 수행할 뿐만 아니라, return 이라는 명령문을 사용해서 특정 값을 반환할 수도 있다. return 명령문을 사용하면, 현재 함수를 종료하고 지정한 값을 함수의 호출 지점으로 반환하게 된다.

function sum(a, b) {
	return a + b;
    }
    
 console.log(sum(10, 20)); // 30

 

함수 표현식

지금까지 우리는 함수를 선언하는 방식으로 함수를 정의했었다. 이런 함수 선언식 말고도 다른 방식으로도 함수를 표현할 수 있는데, 변수를 선언하듯 함수를 선언할 수 있으며, 이와 같은 방법을 함수 표현식이라고 부른다. 선언식과 표현식은 방식만 다를 뿐 동일하게 동작한다.

const sum = function(a, b) {
	return a + b;
    };

 

화살표 함수

화살표 함수는 함수 표현식과 비슷하지만 , 그보다 더 단순한 표현 방법으로 함수를 정의할 수 있다.

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

 

화살표 함수를 사용할 때 주의할 점이 있다. 함수의 내용을 감싸는 {} 괄호를 생략하면, return 명령문을 생략할 수 있다. 만약 인자가 하나만 필요하다면, 인자를 감싸는 () 괄호도 생략할 수 있다. 하지만 인자를 사용하지 않는 경우, 이것이 화살표 함수임을 나타내기 위해서 인자가 있을 위치에 () 괄호를 반드시 작성해야 한다. 마찬가지로 {} 괄호를 열고 함수의 내용을 작성할 경우에는 return 명령어를 사용해야 한다.