JAVASCRIPT 20 Functions

자바스크립트의 function에 대해 알아보자! 

함수는 값을 담아 두는 변수처럼 코드 문장들을 담아두고 재 사용 할 수 있게 하는 역할을 한다.

function logger() {

    console.log("My name is Jonas");

}

위의 코드로 함수를 정의해 보았다.

logger() 은 함수의 이름이다. 변수 선언과 비슷한 느낌이다. 그리고 {} 안에 실행 시킬 코드를 적어 보았다.

logger();

logger();

logger();

코드를 실행 시키면 함수 logger 안의 코드가 실행되고 My name is Jonas 문장이 세 번 반복될 것이다.

이때 calling / running / invoking functions 의 뜻은 함수를 실행 시킨다는 의미이다.

function fruitProcessor(apples, oranges) {

    console.log(apples, oranges);

    const juice = `juice with ${apples} apples and ${oranges} oranges.`;

    return juice;

}

함수의 기본적인 기능에 대한 코드를 적어봤다.

함수 선언 () 안에 apples 그리고 oranges 라는 변수가 있다. 이는 매개 변수로써 뒤에 설명할 인자(Argument) 에서 값이 전달된다.

마지막으로 return juice; 에서 return은 juice의 값을 함수에게 반환 시켜주는 역할을 한다.

fruitProcessor(5, 0);

함수를 다음과 같이 작동해 보았다.

인수 5 는 매개변수 apples 에 전달되고 인수 0 도 마찬가지로 전달된다.

하지만 나오는 값은 5,0 뿐이다. return juice의 값은 어디로 가게 된건지 헷갈린다.

const appleJuice = fruitProcessor(5, 0);

console.log(appleJuice);

위 코드 두 줄을 실행시키면 그제서야 juice 값이 나온다.

5,0   juice with 5 apples and 0 oranges

함수를 실행시키면 내부의 코드를 실행한다고 했다. 따라서 5,0 은 함수를 먼저 실행시켰으므로 값이 일찍 나온다. 그리고 juice의 값을 applejuice 변수에 저장했는데 반환 값이 함수 자체에 반환된 거다. 따라서 appleJuice 에 return 값이 저장되었고 실행시켜 나오게 된 것이다.

주의점으로 함수안에서 return 명령이 실행되면 즉각적으로 함수는 종료된다. return뒤의 코드는 무시된다는 점을 유의 하자.