[JavaScript] 함수(Function)

 

수학에서 함수는 수학에서 두 집합 사이의 관계를 설명하는 논리적 개념으로, 정의역의 원소마다 공역의 원소가 하나씩 대입되는 관계를 의미한다. (출처 - 나무위키 함수 https://namu.wiki/w/%ED%95%A8%EC%88%98)

함수 - 나무위키

함수

 

 

프로그래밍에서 함수는 수학적 함수와 목적은 비슷하지만, 쉽게 말해 하나의 기능을 하는 묶음이다.

 

 

위에서 보이는 함수는 입력된 값에 4를 더하는 기능을 하는 함수이다.

 

 

 

 

 

JavaScript에서의 함수 사용

Javascript에서도 함수라는 것을 사용하는데, 주로 한 기능을 하는 함수를 만들어두고 필요할 때마다 함수를 호출하여 사용하기 위해 함수를 정의하고 사용한다.

function 함수이름(매개변수){
    실행할 코드
    return 반환할 값
}

 

일반적인 함수의 형태는 위와 같다.

매개변수와 반환할 값은 있어도 되고, 없어도 상관없다.

 

예를 들어, 

function sayhi(){
    console.log('HI!');
}

sayhi();

 

위처럼 HI라는 문장을 출력하는 함수를 만들었다고 하자.

HI라는 말을 출력하는 데에는 아무런 매개변수가 필요없다. 

출력만 하면 되기에 반환값도 필요하지 않다.

따라서 매개변수와 반환값이 존재하지 않는 함수가 위와 같이 만들어진다.

 

결과

 

 

위처럼 함수로 만들어둔다면 sayhi()를 통해 필요할 때 언제든지 호출하여 해당 기능을 사용할 수 있다는 것이 장점이다.

 

 

 

위 그림의 4를 더하는 함수를 예시로 만들어 보겠다.

function addfour(val){
    return (val+4);
}

addfour(3); // 출력되지 않음
console.log(addfour(3)); // 출력하기 위해 console.log에 넣어준다.

 

마지막 줄에 addfour(3)으로 함수를 호출하며 매개변수르 3이라는 값을 넘겨줬다.

addfour 함수에서는 val이라는 변수에 3을 저장하여 return으로 val + 4의 값을 반환한다.

 

addfour 함수는 매개변수와 반환값을 모두 가지고 있다. 

출력을 하는 것이 아니라 결과값을 반환하는 함수이므로 addfour(3) 과 같은 형식으로 함수를 호출하면 아무 일도 일어나지 않는다.

반환값이 반환된 후 그 값을 이용하여 무엇을 하라는 지시가 없으므로 반환된 상태에서 아무 실행도 하지않는 것이다.

 

하지만, console.log(addfour(3))은 addfour(3)을 통해 받아온 7라는 반환값을 콘솔에 출력하라는 뜻이므로 콘솔에 7이라는 값이 출력되게 된다.

 

결과

 

 

 

여러 함수의 형태를 나열해보겠다.

 

 

1. 매개변수 X, 반환값 X 

function sayhi(){
    console.log('HI!');
}

sayhi();

 

결과

 

 

 

2. 매개변수 O, 반환값 X

function multipletwo(a){
    console.log(a*2);
}

multipletwo(6);

 

매개변수로 입력된 수에 2를 곱하는 함수이다.

 

결과

 

 

 

3. 매개변수 X, 반환값 O

function returntwo(){
    return 2;
}

console.log(returntwo());

 

2를 반환하는 함수이다. 

매개변수가 없지만 반환값이 있는 함수는 많지 않다.

 

결과

 

 

 

 

4. 매개변수 O, 반환값 O

function multipletwo(a){
    return a*2;
}

console.log(multipletwo(15));

 

매개변수로 받은 a에 2를 곱하여 반환해주는 함수이다.

 

 

결과

 

 

 

 

JavaScript에서 함수의 또다른 표현방식

Javascript에서는 기존의 방식과, Javascript에서만 되는 방식을 둘 다 사용할 수 있다.

JavaScript에서 주로 사용하는 함수 선언법은 함수명을 먼저 선언하고 "=" 을 통해 함수와 매개변수를 선언하는 것이다.

형식은 아래와 같다.

let 함수이름 = function (매개변수){ // 필요에 따라 let을 var, const로 변경 가능
    함수 내용;
}

 

 

위를 응용하여 multipletwo를 다시 작성해보겠다. 

새로운 방식으로 선언한 것이 multipletwo2 이다.

function multipletwo(a){ // 기존 방식의 함수 선언법
    return a*2;
}

let multipletwo2 = function(a){ // Js에서 사용하는 함수 선언법
    return a*2;
}


console.log(multipletwo(15));

console.log(multipletwo2(10));

 

결과는 30 그리고 20이 정상적으로 출력될 것이다.

 

결과