[JavaScript] function 정리 (ES6)

  

Javascript 함수(Function)에 대해 알아보겠습니다.

아래 doSum 함수는 함수를 선언한 것이고 보시면 num1, num2 인자를 받고 그 합을 반환해줍니다. 이와 같이 선언하여 사용할 수도 있고 아니면 printSum() 변수처럼 선언하고 변수에 함수를 대입하여 표현할 수도 있습니다.

function은 Object입니다.  따라서, doSum.length, doSum.prototype 등의 프로퍼티들을 사용할 수 있습니다.

function doSum(num1, num2) { // 함수 선언식
  return num1+num2
}
doSum(1, 2); // output = 3

const printSum = function(num1, num2) { // 함수 표현식, anonymous function
	return console.log(num1+num2);
}
printSum(1, 2); // output = 3

 

 

Naming

function()에서 중요한 부분은 바로 naming입니다. 

주로 동사이며 명령어여야 합니다. 예를 들어 doSomething, createList, updateList 등

만약 createListAndArray 이런 식으로 지으셨다면 기능을 나누어서 createList, createArray 함수를 각각 만드시는 것이 바람직합니다.

 

 

Default Parameters

default function parameter를 사용하면 값이 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화할 수 있습니다.

예를 들어, 파라미터를 전부 정의하지 않으면 아래의 출력 결과처럼 undefined가 출력됩니다.

function showMessage(msg, from) {
    console.log(`${msg} by ${from}`);
}
showMessage("hi") // output = hi by undefined

 

따라서 위의 처럼 파라미터를 정의하지 않을 경우 아래의 소스처럼 코드를 작성하여서 사용하였었습니다.

function showMessage(msg, from) {
    if(from === undefined) {
    	from = 'unknown';
    }
    console.log(`${msg} by ${from}`);
}
showMessage("hi") // output = hi by unknown

 

하지만, 지금은 위의처럼 할 필요 없이 파라미터에 default 값을 입력해주시면 기본값이 정의돼서 사용됩니다.

function showMessage(msg, from = 'unknown') {
    console.log(`${msg} by ${from}`);
}
showMessage("hi") // output = hi by unknown

 

 

Rest Parameters

Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

function printAll(...args) {
    args.forEach((arg) => console.log(arg));
}

printAll("one", "two", "three"); // output = one, two, three

 

 

Local scope

function안의 블록에서 전역 변수와 지역변수를 사용할 수는 있지만, function 안에서 또 다른 자식 function을 선언하였을 때 자식 function에서는 부모 function에서 선언한 변수들을 사용할 수 있지만, 부모 function에서는 자식 function에서 선언한 변수들을 사용할 수 없습니다.

즉, 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있습니다.

let globalMessage = 'global' // global variable
function printMessage() {
    let message = 'hello'; // local variable
    console.log(message);
    console.log(globalMessage);
    
    function printAnother() {
        console.log(message) // 부모함수의 변수를 잘 가져옴
        let childMessage = 'hello'
    }

    console.log(childMessage) // 자식함수에서 선언한 변수를 가져오니 찾을 수 없다는 에러 발생
}
printMessage(); 
// output = hello 
//	    global 
//          error -- > childMessage is not defined

 

 

Callback function

콜백 함수는 다른 함수에 인수로 전달된 함수로, 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료합니다.

아래 코드를 보시면 doGame 함수의 첫 번째 파라미터 값으로 자바스크립트를 주면 printYes() 함수가 실행되게 되어있습니다.

이렇게 함수를 콜 하는 것을 콜백 함수라고 부릅니다.

const printYes = function() {
    console.log('yes!');
}
const printNo = function() {
    console.log('no!');
}

function doGame(answer, printYes, printNo) {
    if(answer === 'javascript') {
        printYes()
    }else{
        printNo();
    }
}

doGame('javascript', printYes, printNo); // output = yes!

 

 

Arrow function

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, argument, super 또는 new.target을 바인딩하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메서드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

const add = (a, b) => a+b; // 블럭을 이용하지 않을 경우 return을 적지 않아도 됨.
const add2 = (a, b) => {
    return a+b; // 블록을 작성할 경우 return을 적어야 함.
}
const printYes = () => console.log('yes!');

 

 

IIFE(Immediately Invoked Function Expression)

선언함과 동시에 호출하는 함수입니다. 함수를 () 감싸고 마지막 구문에 ()를 넣어줍니다.

(function printNo() {
    console.log('no!'); // output = no!
})();