Arrow Function은 무엇인가? 함수의 선언과 표현

Function

 

함수의 모양

 

ex)

//1. Function declaration
//function name(param1, para2) { body... return; }
//one function === one thing
//naming: doSomething, command, verb
//e.g. createCardAndPoint -> createCard, createPoint
//funcion is object in JS
function printHello(){
    console.log('Hello');
}

printHello();

function log(message){
    console.log(message);
}

log('Hello@');
log(123);

 

예제 실행 화면

 

ex)

//2.Parameters
//premitive parameters: passed by value
//object parameters: passed by reference
function changeName(obj){
    obj.name = 'coder';
}

const ellie = {name: 'ellie'};
changeName(ellie);
console.log(ellie);

 

예제 실행 화면

 

ex)

//3. Defalut parameters(added in ES6)
function showMessage(message, from){
    console.log(`${message} by ${from}`);
    if(from === undefined){
        from = 'unknown';
    }
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

function showMessage2(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}
showMessage2('Hi!');

 

예제 실행 화면

 

ex)

//4. Rest parameters(added in ES6)
function printAll(...args){
    for(let i = 0; i <args.length; i++){
        console.log(args[i]);
    }
    
    for(const arg of args){
        console.log(arg);
    }

    args.forEach((arg) => console.log(arg));
}
printAll('dream','coding','han');

 

예제 실행 화면

 

ex)

//5.Local scope
//밖에서는 안을 볼 수 없고 안에서는 밖을 볼 수 있다.
let globalMessage = 'global'//global variable
function printMessage(){
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
    function printAnother(){
        console.log(message);
        let childMessage = 'hello';
    }
    //console.log(childMessage);//에러
}
//console.log(message);//에러
printMessage();

 

예제 실행 화면

 

ex)

//6. Return a value
function sum(a,b){
    return a+b;
}
const result = sum(1,2);//3
console.log(`sum: ${sum(1,2)}`);

//7. Early return, early exit
//bad
function upgradeUser(user){
    if(user.point > 10){
        //long upgrade logic...
    }
}

//good
function upgradeUser2(user){
    if(user.point <= 10){
        return;
    }
    //long upgrade logic...
}

 

예제 실행 화면

 

ex)

//First-class function
//functions are treated like any other variable
//can be assigned as a value to variable
//can be passed as an argument to other functions.
//can be returned by another function

//1.Function expression
//a function declaration can be called earlier than it is defined.(hoisted)
//a function expression is created when the execution reaches it.
const print = function(){
    //anonymous function
    console.log('print');
};
print();
const printAgain = print;
printAgain();

 

예제 실행 화면

 

ex)

//2. Callback function using function expression
function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you'){
        printYes();
    }else{
        printNo();
    }
}
const printYes = function(){
    console.log('yes!');
}

//named function
//better debugging in debugger's stack traces
//recursions
const printNo = function print(){
    console.log('no!');
    //print();
}
randomQuiz('wrong',printYes,printNo);
randomQuiz('love you',printYes,printNo);

 

예제 실행 화면

 

ex)

//Arrow function
//always anonymous
const simplePrint = function(){
    console.log('simplePrint!');
}

const simplePrint2 = () => console.log('simplePirnt!');
const add = (a,b) => a+b;
const simpleMultiply = (a,b) =>{
    //do something more
    return a*b;
};

//IIFE: Immediately Invoked Function Expression
(function hello(){
    console.log('IIFE');
});