[Javascript] 함수 총정리 ① | 함수의 정의와 기본 사용법, 정의 종류들

1. 함수의 정의

수학에서의 함수는 입력(input)을 받아 출력(output)을 내보내는 일련의 과정을 의미합니다. 그리고 자바스크립트에서의 함수란 이러한 수학에서의 함수처럼 일련의 과정을 거쳐 결과값을 반환하거나, 반환 없이 특정 코드를 실행하는 과정이라고 정의 할 수 있습니다.
이러한 자바스크립트의 함수는 사용자가 해당 함수를 호출하면 특정 동작을 실행시키거나, 혹은 사용자로부터 입력 받은 인자를 처리하여 반환하거나 반환 없이 특정 동작을 실행하는 역할을 수행합니다.

2. 함수의 구성 요소

함수의 구성은 크게 이름, 매개변수, 실행문, 반환값으로 정의되며 이렇게 구성된 함수를 호출 할 때 사용이 가능한데, 각각의 함수 구성에 대해서 자세히 살펴보겠습니다.

• 이름 : 함수의 기본적인 이름을 정의하며 호출될 때 사용이 됩니다. 이 함수의 이름은 함수 선언문으로 선언되었느냐, 함수 표현식으로 선언되었느냐에 따라 생략 가능하며 이때의 함수를 익명 함수라고 정의합니다.

• 매개변수 : 함수 호출시에 넘겨주는 인자의 값을 저장하는 변수들 입니다. 매개변수는 해당 함수 안에서만 존재하기 때문에 함수에서 선언된 매개변수는 스코프 바깥의 다른 중복되는 변수에 영향을 받지 않습니다.

단 전달되는 인수의 순서대로 매개변수에서 그 값이 저장되며, 가령 fucntion add(x,y)로 매개변수가 정해진 함수에 add(1,2)로 인수를 넘겨주었다면 1은 x에, 2는 y에 각각 저장되는데요.

만약 변수를 인수로 넘겨준다면 변수에 저장된 값이 매개변수에 저장되는데, add 함수의 매개변수가 둘인데 넘겨주는 인수는 하나 밖에 없을때에는 나머지 못받은 매개변수의 값은 undefined가 저장되므로 주의를 할 필요가 있습니다.

만약 그럴 경우를 대비해 매개변수에 값을 대입하는 것처럼 지정을 해준다면 값을 넘겨받지 못한 경우에는 함수의 매개변수에 기본값을 지정하는 것 또한 가능하고,

인자로 넘겨주는 값을 가지고 있는 변수와 매개변수의 이름이 동일할 필요 없이 매개변수의 이름은 사용자가 자율적으로 지정이 가능합니다.

// ① 함수의 기본적인 예시) 선언한 매개변수와 인자가 동일한 경우
function add(a,b){
  console.log(a+b)
}

add(1,2)


// ② 함수의 기본적인 예시) 선언한 매개변수와 인자가 동일한 경우
function add(a,b){
  console.log(a+b) // a는 1을 전달 받으나 b는 undefined가 되므로 연산 결과인 NaN이 출력됩니다.
}

add(1)


// ③ 함수의 기본적인 예시) 선언한 매개변수에 기본값을 설정한 경우

function add(a,b=2){
  console.log(a+b) //b는 기본값이 2므로 인자를 넘겨받지 못했더라도 기본값이 설정되어 연산 결과인 3이 출력됩니다.
}

add(1) // 인자를 하나만 넘겨주더라도


④ 함수의 기본적인 예시) 선언한 매개변수에 비해 인자값이 많은 경우

function add(a,b=2){
  console.log(a+b) //a는 1이, b는 기본값이 설정 되었어도 무시되고 2가, 3은 무시되어 1+2인 3이 출력됩니다.
}

add(1,2,3) // 인자를 세 개를 넘겨줄 경우

• 실행문 : 주로 함수의 기능을 정의하는 코드문 입니다. 앞서 소개한 예시들과 같이 함수의 코드 블록 내에서 매개변수를 이용하여 값을 반환하거나, 반환하지 않고 단독으로 실행하는 과정 등으로 정의됩니다.

• 반환문 : 실행문의 결과를 반환하는대 사용되며, return 키워드를 이용해 함수 내 결과값이나 특정 값을 반환합니다.

이때 만약 반환문에 키워드인 return만 있고 무엇을 반환할지를 뒤에 작성해주지 않으면 undefined를 반환하며, 반환문 밑에 작성된 코드문들은 무시되며,

자바스크립트에는 세미콜론 자동 삽입 기능이 활성화 되어있기 때문에 return 키워드에 세미콜론을 붙이지 않고 바로 아래에 반환할 값이나 표현식을 작성하는 경우 아래의 반환할 값은 무시된 채 undefined를 반환하므로 한 줄에 return 키워드와 반환값을 작성하는 주의가 필요합니다.

3. 함수의 기본 사용법

이러한 자바스크립트의 함수의 역할은 사용자가 함수를 어떤 용도로 사용할 것인지에 그 역할이 결정되므로, 주로 사용자가 입력한 값을 토대로 반환값 없이 처리를 하거나, 반환을 해주는 두 가지 큰 틀로 구성되는데요.

이번 섹션에서는 함수의 매개변수와 인자의 유무에 따른 함수 작동법을 간단하게 살펴보도록 하겠습니다.

// 기본적인 함수의 구성

function 함수 이름(매개변수1, 매개변수2){
특정 실행문 
또는
return 반환할 값
};

함수 이름(호출 및 매개변수에 전달할 인자 기입)


// ① 함수의 기본 예제1) 매개 변수가 없고 반환값 없이 특정 코드를 실행하는 함수 선언.

let a = 1, b = 2; // 각각의 변수 선언 후

function add(){ //add 함수 선언
  console.log(a + b) //코드 블록 안에 a와 b를 더한 값을 콘솔에 출력하는 코드 작성
}
add() //add 함수 호출


② 함수의 기본 예제2) 매개 변수를 전달하고 반환값 없이 특정 코드를 실행하는 함수 선언.

function add(a,b){ // add 함수에 값을 전달 받은 매개변수 a와 b를 선언
  console.log(a + b) // 다음 작업을 수행
}
add(1,2); //add 함수에 인수로 1과 2를 전달.


③ 함수의 기본 예제3) 매개 변수를 전달하고 그 결과를 반환 받아 출력하기

function add(a,b){ //전달 된 인수를 a와 b 매개변수에 저장
  return a+b; //a와 b를 더한 값을 result에 반환
}
let result = add(1,2); //result 변수에 add 함수를 실행하여 반환된 값을 저장
console.log(result); // result의 값 출력

4. 함수 정의의 종류

지금까지는 함수의 기본 구성과 원리 동작에 대해서 살펴보았는데요. 앞서 살펴본 함수 이외에도 자바스크립트에서는 다양한 함수의 정의 종류들을 마련 해놓고 있습니다.

이번 섹션에서는 함수 정의에 대한 종류들을 알아보도록 하겠습니다.

• 함수 선언문 : 함수의 이름을 직접적으로 지정합니다. 즉 함수의 이름을 지정하지 않고 function 키워드를 단독으로 사용하는 것은 자바스크립트에서 허용되지 않으며 자바스크립트에서 함수를 생성하는 가장 기본적인 사용법 입니다.

이 방식으로 생성된 함수들은 함수의 하단에 위치 되어도 호이스팅이 작동되고, 재귀 호출에 가장 대표적으로 사용되는 특징을 가지고 있습니다.

// ① 사용 예시 1. 호이스팅

sayHello(); // 호이스팅으로 인해 정상적으로 호출 가능

function sayHello() {
    console.log("안녕하세요!");
};

// ② 사용 예시 2. 재귀 호출

function factorial(n) { // 함수를 선언하고
    if (n <= 1) { // 인자로 넘겨 받은 값이 1 이하일 경우 
        return 1; // 1을 반환하고
    } // 조건에 맞지 않은 경우, 즉 2 이상일 경우
    return n * factorial(n - 1); //n에서 자기 자신을 다시 호출(재귀) 하되 1 감소한 값을 인자로 넘겨줍니다. 참고로 이 로직은 1부터 각 n까지 재귀 함수를 호출하는 식으로 곱하는 로직입니다.
};

• 함수 표현식 : 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 함수 정의 방식입니다.

이 방식으로 생성된 함수들은 변수에 할당된 상태이므로 변수의 스코프 규칙을 따르고, 변수에 할당할 때 이름을 제외하고 function 키워드만 있는 상태로 할당하여 익명 함수 상태로 정의가 가능합니다.

let add = function(a,b){ // function 앞에 키워드를 생략해도 됩니다.
  return a+b;
};

★ 기본 개념에서 살펴볼 수 있는 호이스팅의 개념을 여기서도 접목 가능한데, 함수 선언문은 런타임 이전에 호이스팅에 의해 함수 객체로서 미리 선언이 가능하지만,

함수 표현식은 런타임 전에는 변수의 정의 부분만 호이스팅에 올라가는 상태이고, 런타임 동안에 비로소 해당 변수에 함수가 할당 되는 방식이므로 호이스팅 현상을 발생시킬 수 없는 대에 그 차이점을 둘 수 있습니다.

③ function 생성자 함수 : 자바스크립트에서 기본적으로 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수에 전달할 인자들과 함수 몸체(스코프 영역)를 문자열로 전달하면서 new 연산자와 함께 호출하여 함수 객체를 반환 받는 방법입니다.

이때 new 키워드는 생략이 가능하나, 일반적으로 잘 사용이 되지 않기 때문에 개념만 알아두셔도 됩니다.

let add = new Function('a', 'b', 'return a+b');

• 화살표 함수 : ES6에서 도입된 함수 정의 방식으로서 function 키워드 대신 화살표(=>)를 사용해 보다 간략하게 함수를 선언할 수 있습니다. 또한 이 화살표 함수는 앞서 소개한 함수 표현식을 대체하는 용도로 많이 사용되기도 합니다.

화살표 함수의 세부 사항들은 다음 장에서 세세히 살펴보도록 하겠습니다.