Javascript - function

안녕하세요, 오늘은 Javascript의 function(함수)에 대해 정리해 보겠습니다. 함수는 프로그램을 이루고 있는 블럭과 같은 역할을 하며 일을 수행하거나 값을 계산하는 등의 역할을 수행합니다. 추가로 function을 정의할 때 조건이 있다면 조건을 만족 못할 때 최대한 빨리 return 하여 나가는 것이 좋습니다! 만약 조건이 길다면 해당 조건문은 최대한 뒤에 두는 것이 효율적입니다.

 

◆ 함수 특성

1. Function declaration (함수 정의) : function name(param1, param2) { body ... return;}

하나의 함수는 하나의 동작만 하도록 정의하는 것이 좋습니다. 앞서 variable을 정의할 때 설명드렸다시피, 함수를 변수로 할당할 수도 있고 리턴할 수도 있습니다.

function printHello() {
    console.log('Hello');
}
printHello(); // Hello 출력

function log(message) {
    console.log(message);
}
log('Hellllllo'); // Hellllllo 출력
log(12345); // 12345 출력

2. Parameters : 함수의 인자로써 premitive parameter와 object parameter가 있습니다. premitive parameter는 값으로서 전달이 되는 것이고, object parameter는 reference에 의해 전달이 되는 것입니다. object 값을 변경할 경우 변경된 값이 메모리에 저장이 됩니다. 아래 예시에서 확인 가능하듯 hoon이라는 객체 생성하며 name을 hoon으로 지정하였지만 chageName 함수를 통해 name이 coder로 변경이 되고, 이후에 출력 시에 coder가 출력이 되게 됩니다.

function changeName(obj) {
    obj.name = 'coder';
}

const hoon = { name: 'hoon' }; // hoon이라는 객체는 name을 hoon으로 설정
changeName(hoon); // changeName 함수를 이용하여 name을 coder로 변경
console.log(hoon); // 함수에 의해 coder로 변경되었기 때문에 coder가 출력

3. Default parameters : 기본 인자를 설정할 수 있습니다. parameter를 2개 받아야하는 함수가 있는데 인자를 하나만 지정해주면 나머지는 기본 인자가 들어가게 됩니다. 설정 방법은 함수 정의 시에 parameter 뒤에 =을 붙여 설정이 가능합니다.

// from parameter의 default값으로 'unknown'을 설정
function showMessage(message, from = 'unknown') {
    console.log(`${message} by ${from}`);
}

showMessage('Hello!'); // from값은 없기 때문에 'unknown'이 자동으로 들어간다 <출력 : Hello! by unknown>

4. Local scope : 밖에서는 안이 안보이고 안에서는 밖을 볼 수 있다. 즉, 함수 내에서 선언한 변수(지역 변수)는 함수 안에서만 사용이 가능하고 함수 내부에서는 함수 외부의 변수에 접근이 가능합니다. 

let globalMessage = 'global'; // global variable
function printMessage() {
    let message = 'hello';
    console.log(message); //local variable로 같은 함수 안에서 지정한 message이므로 'hello'출력
    console.log(globalMessage); //global variable이라 사용가능 'global' 출력 
    function printAnother() {
        console.log(message); // printAnother 함수 기준으로 message는 밖에있으므로 접근이 가능 'hello' 출력
        let childMessage = 'hello';
    }
    printAnother(); 
}
printMessage();

5. Return a value : 특정 값을 return할 수 있습니다. (출력하는 것은 아닙니다!)

만약 return 문이 없거나 return 지시자만 있다면 undefined 값이 반환됩니다.

function sum(a,b) {
    return a + b;
}
const result = sum(1,2); // return으로 인해 3이 반환됨
console.log(`sum: ${sum(1,2)}`); // sum: 3 출력


function doNothing() { /* empty */ } // return문이 없으므로 undefined값 반환

alert( doNothing() === undefined ); // true

function doNothing() {
  return;
} // return 지시문만 있는 경우에도 undefined값 반환

alert( doNothing() === undefined ); // true

◆ 함수 표현

1. Function Expression : 함수 표현식으로 구문 구성 내부에서 함수를 정의합니다. 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 반대로 위에 예제들에 나온 방식을 함수 선언문이라고 하는데요, 이것은 함수 선언문에 실행 흐름이 안 왔을 때에도 호출할 수 있습니다. 즉, 스크립트의 어디에 있든 상관없이 어디에서든 사용 가능합니다. 추가로 함수 함수 선언문은 코드 블록 내에서 생성되면 함수는 블록 내 어디서든 접근 가능하지만 블록 밖에서는 접근이 불가능합니다. 아래 예시를 보며 추가로 살펴보겠습니다.

let age = 16; // 16을 저장했다 가정합시다.

if (age < 18) {
  welcome();              // 실행됨 (welcome 함수가 코드블럭({}) 안에서 선언되었기 때문에)        
  function welcome() {     
    alert("안녕!");        
  }                        
  welcome();              // 실행됨 (welcome 함수가 코드블럭({}) 안에서 선언되었기 때문에)
} else {
  function welcome() {
    alert("안녕하세요!");
  }
}

welcome(); // 코드블럭 밖이기 때문에 실행이 안된다!! Error

위의 코드에서는 마지막에 코드 블록 밖의 welcome()이 동작을 안하는데요, 함수 표현식을 사용하면 코드블럭 밖에서도 호출이 가능해져서 문제가 해결이 됩니다. if문 밖에서 welcome을 변수로 선언한 후 조건에 따라 함수 표현식의 함수로 할당이 됩니다!

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

  welcome = function() {
    alert("안녕하세요!");
  };

}

welcome(); // 밖이지만 제대로 동작합니다. (정의는 입력되는 조건에 따라 정의가 됨)

 

추가로 function의 이름을 설정 안 할 수도 있는데요 이러한 함수를 anonymous function이라고 합니다. 반대로 function을 정의할 때 이름을 설정해 주는 것을 named function이라고 합니다. anonymous function은 디버그 및 재귀적 표현을 나타낼 때 유용하게 사용 가능합니다. 실제 사용은 아래 Callback function에서 조금 더 확인해 보겠습니다.

// 함수 표현식
const print = function () { //anonymous function(함수에 이름없이 필요한 부분만 할당하여 작성 가능)
    console.log('print');
}
print();
const printAgain = print; 
printAgain(); // print를 할당하여 함수로 사용 가능
const sumAgain = sum; // sum은 위에서 정의한 함수
console.log(sumAgain(1,3)); // 4가 출력

2. Callback function : 함수를 값처럼 전달하여 parameter로 함수를 사용할 수 도 있습니다. 아래 코드 예시에서 printYes와 printNo를 콜백 또는 콜백 함수라고 합니다.

function randomQuiz(answer, printYes, printNo) {
    if (answer === 'love you') {
        printYes();
    } else {
        printNo();
    }
}

// anonymous function (함수의 이름 없음)
const printYes = function () {
    console.log('Yes');
};

// named function (함수의 이름 있음)
// better debugging in debugger's stack traces (디버그에 효율적)
// recursions(재귀)
const printNo = function print() {
    console.log('NO!');
};


randomQuiz('wrong', printYes, printNo); // No!가 출력
randomQuiz('love you', printYes, printNo); // Yes가 출력

3. Arrow function : 화살표 함수로 좀 더 간단히 함수를 정의할 수 있습니다. 코드를 살피며 보여드리겠습니다.

simplePrint와 simplePrint2를 비교하면 동일하게 한 문장을 출력하는 함수이지만 2가 훨씬 간단히 표현된 것을 확인할 수 있습니다. 만드는 방법으로는

1. function을 생략해 줍니다

2. () 오른쪽에 '=>'를 붙여줍니다

3. {}를 생략하고 body 내용을 적어주면 끝입니다!(만약 body의 내용이 길면 {}를 붙이고 return을 꼭 사용해줘야 합니다!)

const simplePrint = function () {
    console.log('simple Print!');
};
// 간결!!!
const simplePrint2 = () => console.log('simple Print2');
const add = (a,b) => a + b;
// body쪽이 길다면 block 사용가능 =>> 꼭! return 이 있어야함!
const simpleMultiple = (a,b) => {
    // do somthing more
    return a * b;
};

 

이상으로 자바스크립트 함수에 대해 정리해보았습니다. 다음에는 object에 대해 정리해보겠습니다.