Aloha!

수학에서 배운 함수는 대개 다음과 같다. f(x) = ax^2 + bx + c

자바스크립트도 비슷하다. 하지만 수식이 아닌 우리가 원하는 코드가 들어간다. 만약 내가 두 개의 숫자를 더하는 함수를 만들고 싶다면(a + b와 같은 함수)

function add(a, b) {
	var result = a + b;
	console.log(result);
	return result;
}

add(17, 7); // 24

이렇게 코드를 짜면 된다. 한 가지 눈 여겨 볼 점은 return이다. 앞 전의 학습 내용들에서는 return 구문을 찾아볼 수가 없다. 그래서 웹 브라우저의 console창을 이용해 함수를 실행시키면 마지막 값으로는 항상 undefined가 떴었다. 이는 function이 실행되고 나서 최종적으로 돌려받는 값이 정해져 있지 않았기 때문이다. 하지만 위처럼 return result;와 같이 return 구문을 넣어주면 최종값을 돌려받게 되고 console창도 24가 마지막 값으로 뜨는 것을 확인할 수 있다.

function add(a, b) {
	var result = a + b;
	console.log(result);
	return result;
}

위 코드를 실행시켰을 때는 아무런 값도 돌려받지 않는다. 단지 add라는 함수가 어떤 것인지 선언만 했기 때문이다. 함수를 실행시키고 싶다면 add(x, y);와 같이 실행문을 작성해야 한다.

• 중복을 줄여보자

for (let i = 1; i <= 3; i++) {
	console.log(i);
}

for (let i = 1; i <= 5; i++) {
	console.log(i);
}

for (let i = 1; i <= 7; i++) {
	console.log(i);
}

function을 배웠으니 써먹어보자. 위 코드를 보면 비효율적으로 중복을 사용하고 있다. 이러한 중복을 줄여줄 수 있는 것이 function을 사용하는 이유 중 하나다.

function repeatLog(count) {
	for (let i = 1; i <= count; i++) {
    	console.log(i);
  	}
}

repeatLog(3);
repeatLog(5);
repeatLog(7);

• Return, 반환

function doSomething() {
    var a = 3;
    var b = 2;
    
    if (a > b) {
        return;
    }

    return 3;
}

var a = doSomething();
console.log(a); // undefined

return은 함수를 종료시킴과 동시에 종료 시 어떤 값을 반환할지 결정해주는 구문이다. 위 코드를 보자면, var a = doSomething();에서 function doSomething이 실행된다. 코드는 기본적으로 위에서 아래로 읽혀 내려오는데 doSomething함수는 return 3;보다 if문을 먼저 만난다. 3 > 2로 조건을 만족해 return;이 실행되는데 이로 인해 return 3;은 실행되지 않고 doSomething 함수가 종료된다. 따라서 return;으로 아무런 값이 반환되지 않았기 때문에 a를 출력해보면 undefined가 나온다.

function foo(a, b) {
    if (a < b) {
        return a;
    }
}
const result1 = foo(10, 20);
const result2 = foo(20, 20);

console.log(result1); // 10
console.log(result2); // undefined