[Javascript] 함수

함수

함수는 특정한 동작을 생성하기 위한 코드들을 그룹화한 것으로 다음 형식으로 작성합니다.

function	함수명(인수){
	내용
	}

다음 함수는 두 수의 합을 반환하는 것입니다.

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

sum(10, 2);
sum(1, 7);

12
8

위 함수 sum()은 두 개의 값을 는 전달받습니다. 이 전달 받는 값(들)을 인수를 argument, parameter 등의 용어를 사용하여 나타내기도 합니다.

함수이름은 다음의 규칙으로 지정합니다.

• 첫글자: 영문자, $, _만 허용
• 첫 글자 이후: 영문자, $, _, 숫자만 허용
• 영문의 경우 대문자와 소문자 구분
• 키워드(예약어)는 허용되지 않음
• 공백은 허용되지 않음

지역변수(Local variable)는 함수 내에 정의된 변수로서 그 작동은 함수 내로 한정됩니다. 반면에 다음 변수 b는 함수 외부에서 선언되어 함수 내부에서 사용되었으며 수정되었습니다. 이러한 변수를 전역변수(Global variable)이라 합니다.

let b=10;

function sum(){
    let a=3
    b=b+a;
    console.log(b);
}
sum();
console.log(b);

13
13

함수에 전달되는 인자의 기본값은 undefined로 지정됩니다. 다음 함수는 두개의 인수가 필요하지만 한개만 전달한 것으로 결과는 NaN(Not-A-Number)입니다. 이것은 "Number + undefined"의 결과입니다.

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

NaN

다음과 같이 인수의 기본값을 지정할 수 있습니다. 값이 지정되지 않은 인수가 먼저 위치해야 합니다.

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

30

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

NaN

자바스크립트는 함수 내부에는 arguments라는 특별한 지역변수가 내장되어 있습니다. 이 변수 때문에 필요한 인수보다 많은 인수가 전달된 경우에도 그 과잉된 부분을 무시하고 에러 없이 실행됩니다. 즉, 변수 arguments는 전달하는 인수들을 map 형식으로 정리하여 필요한 인수들만을 적용되도록 합니다.

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

30
[Arguments] { '0': 10, '1': 20, '2': 30 }

나머지 인자(...변수명)를 사용하면 지정한 인수외에 나머지 부분을 배열로 묶어 나타냅니다.

    console.log(a);
    console.log(b);
    console.log(rest);
}

argu(1,2,3,4,5)

1
2
[ 3, 4, 5 ]

함수의 결과를 반환하기 위해 retun 문을 사용할 수 있습니다. 이 경우 그 결과를 새로운 개체로 재활용할 수 있습니다.

function sum(a, b){
    return a+b
}

A=sum(12, 3);
console.log(A);

15

함수는 다음과 같이 변수와 같이 사용할 수 있습니다. 이와 같은 함수를 정의하는 방법을 표현식이라 합니다.

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

A=sum(12, 3);
console.log(A);

15

위와 같이 함수를 표현식으로 나타낼 경우 화살표 함수(arrow function)을 적용하면 더 간단하게 나타낼 수 있습니다.

const 함수이름=(인자들) => 실행코드;

위 형식과 같이 함수이름 다음에 인자들을 지정합니다. 인자가 하나일 경우 괄호를 생략할 수 있습니다. 또한 실행코드를 중괄호'{ }'로 묶을 수 있습니다. 이 경우는 return 문을 반드시 사용해야 합니다.

const sum=(a, b)=> a+b;
console.log(sum(2, 3));

const one=a=>a*10;
console.log(one(11));

const greeting=()=> 'Hello';
console.log(greeting());

const sum1=(a, b)=>{
    return a+b;
}
console.log(sum1(2,3));

5
110
Hello
5