[JavaScript] 자바스크립트 함수(Function) 이해하기

 

프로그램을 작성하다 보면 일정한 동작들을 여러 번 반복해야 될 때가 있다.

한 순간에 똑같은 동작을 반복해야한다면 반복문을 활용하면 되지만,

특정한 지점에서 필요할 때 순간순간 동작하길 원한다면 함수를 활용하면 된다.

 

그동안 계속해서 사용하던 console.log도 함수인 것이다.

 

함수 선언

함수선언은 다음과 같이 하면 된다.

function 함수명(매개변수) {
    함수본문
}

1. function이라는 선언자를 작성한 다음

2. 함수 이름을 작성하고 
3. 소괄호를 열어서 매개변수를 작성한다. (매개변수 생략해도 되지만, 소괄호는 반드시 열고 닫아야 한다.)

4. 마지막으로 중괄호를 열어서 함수 본문을 작성하면 된다.

 

함수 호출

이렇게 선언한 함수는 함수 이름 뒤에 소괄호를 붙여 호출할 수 있다.

// 함수 선언
function sayHi() {
    console.log('Hi!');
}

// 함수 호출
sayHi(); // Hi!

 

매개 변수 (parameter)

함수를 선언할 때 매개 변수를 작성하면 함수를 호출할 때 임의의 값을 함수 내부로 전달할 수 있다.

 

함수를 선언할 때 소괄호 내부에 매개 변수 이름을 작성한 다음,
함수 본문에서 이 매개변수를 활용한 동작을 작성하고

함수를 호출할 때 함수 이름 뒤에 붙는 소괄호 내부에 값을 전달하는 방식이다.

function sayHello(name) {
    console.log(`안녕하세요. ${name}님! :)`);
}

sayHello('Bigtop'); // 안녕하세요. Bigtop님! :)

그동안 계속 사용하던 console.log에 소괄호를 열어서 작성하던 값들이 모두 매개변수였던 것이다!

 

매개변수는 여러 개를 작성할 수도 있다. 
2개 이상의 매개변수가 필요한 경우에는 쉼표로 구분해서 작성하면 되고,

호출 시에는 선언할 때의 순서에 맞춰서 값을 전달하면 된다.

function gangCheck(name, count) {
    console.log(`안녕하세요 ${name}님! :)`);
    console.log(`당신은 오늘 1일 ${count}깡 하셨습니다.`);
}

gangCheck('bigtop', 3); // 안녕하세요 bigtop님! :)
			// 당신은 오늘 1일 3깡 하셨습니다.

undefined의 개념을 잘 이해하고 있다면 당연하게 느껴질 수도 있겠지만, 아무튼 매개변수의 기본 값은 undefined다.

만약, 함수를 선언할 때 매개변수를 작성했으나 호출할 때 아무 값도 전달하지 않는다면 매개변수는 undefined 값을 가지고서 동작한다.

function sayHello(name) {
    console.log(`안녕하세요. ${name}님! :)`);
}

sayHello(); // 안녕하세요. undefined님! :)

 

그렇기 때문에 필요에 따라 undefined 값을 원하지 않을 경우에는 매개변수의 기본값을 할당하면 된다.

방법은 간단한데, 함수를 선언할 때 매개변수 부분에서 바로 값을 할당하면 된다.

function sayHello(name = 'Bigtop') {
    console.log(`안녕하세요. ${name}님! :)`);
}

sayHello(); // 안녕하세요. Bigtop님! :)
sayHello('Kim'); // 안녕하세요. Kim님! :)

이렇게 매개변수의 기본값을 할당하면, 말 그대로 함수 호출 시 값을 할당받지 않았을 때의 기본값 부분을 제어할 수 있다.

 

한 가지 주의해야 할 부분은 매개변수의 기본값은 항상 마지막부터 작성해줘야 한다는 것이다.

직접 작성하고 사용해보면 느낄 수 있겠지만, 함수를 호출할 때 소괄호 안에 작성한 값이 함수를 선언할 때 작성한 매개 변수의 가장 왼쪽부터 순서대로 매치되어서 전달되기 때문이다.

function gangCheck(name = 'Bigtop', count) {
    console.log(`안녕하세요 ${name}님! :)`);
    console.log(`당신은 오늘 1일 ${count}깡 하셨습니다.`);
}

gangCheck(3); // 안녕하세요 3님! :)
              // 당신은 오늘 1일 undefined깡 하셨습니다.

위 코드처럼 name에 기본값을 줬기 때문에, 호출할 때 전달한 3이 count로 갈거라 착각하지만 절대 그렇지 않다.

결과에서도 확인할 수 있듯 3은 name으로 전달되고, count는 아무 값도 전달받지 못했기 때문에 undefined값으로 처리된 것이다.

 

반환 값 (return value)

함수는 여러 가지 복잡한 동작들을 미리 정의하고 필요할 때 언제든 쉽게 사용할 수 있게 하는 것이 기본이지만

함수를 호출한 지점에 함수를 호출한 결과로 어떤 특정한 값이 대체되게 할 수도 있다.

이때 이 값을 반환 값 또는 리턴 값(return value)이라고 부른다.

반환 값은 함수 내에서 return이라는 선언자를 활용한다.
그리고 이를 활용해 return값을 연산하는 문장을 return문이라고 부른다.

function getArtist() {
    return '비 (Rain)';
}

console.log(getArtist()); // 비 (Rain)

getArtist 함수를 살펴보면 '비 (Rain)'이라는 문자열을 그냥 return 하고 있다.

함수를 선언한 곳에서 작성된 return값은 함수를 호출한 곳에 그대로 전달되는데,
결국 console.log 안에서 getArtist()는, '비 (Rain)'이라는 문자열로 대체되어 콘솔에 출력되는 것이다.

 

그러나 위에서도 확인했듯, return을 작성하지 않아도 함수는 정상적으로 동작한다.

당연히 return을 따로 작성하지 않은 함수의 기본 반환 값은 undefined다.

function getArtist() {
    // ..return문이 없는 함수본문..
}

console.log(getArtist()); // undefined

 

추가적으로 알아야 할 부분은 return문 반환 값을 전달하는 기능과 더불어 함수 자체를 종료하는 기능도 있다는 것이다.

return문이 작성되면 return문 아래의 선언들은 모두 무시된다.

function sayMyBestSong() {
    console.log('제가 가장 좋아하는 노래는 비의 La Song 입니다.');
    return;
    console.log('La Song하니까 생각이 나는건데, 제가 미국 LA에 있을 때...');
}

sayMyBestSong(); // 제가 가장 좋아하는 노래는 비의 La Song 입니다.

위 코드에서 알 수 있듯이, return 아래의 TMI 코드는 무시된다.

그렇기 때문에 상황에 따라 return문은 그냥 함수를 종료할 목적으로 활용하기도 하고,

당연히 목적에 따라서 함수 본문 내에서 여러 개의 return문이 등장하기도 한다.

function checkAge(age) {
    if (age > 19) {
        return '성인입니다.'
    } else {
        return '미성년자입니다.'
    }
}

console.log(checkAge(345)); // 성인입니다.

 

끝으로, 아주 간단한 실수 하나를 언급하자면

처음 함수를 배우게 되면 눈으로 출력된 결과를 확인해야 하다 보니

함수 내부에서 console.log함수를 쓰는 것을 

return 하는 것으로 착각하는 경우가 있는데,
사실 시간과 경험이 금방 해결해줄 일 이긴 하지만,

둘은 엄연히 다르다는 것을 꼭 인지해야 한다.

function sayName() {
    console.log(`제 이름은 bigtop입니다! :)`);
}

function getName() {
    return 'bigtop';
}

sayName(); // 제 이름은 bigtop입니다! :)
console.log(`제 이름은 ${getName()}입니다! :)`);  // 제 이름은 bigtop입니다! :)