JS/드림코딩앨리

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

배워도끝이없네 2021. 4. 21. 10:07
//Function
//-fundamental building block in the program
//-subprogram can be used multiple items
//-performs a task or calculates a value;

//Function declaration
//하나의 함수는 하나의 일만 하도록 작성해야한다.
//함수의 이름은 동사형태로 적어야한다 꼭!!!
//만일 createCardAndPoint라는 함수명이 있다면 -> createCard 함수와 CreatePoint함수를 만들자...
//function 은 object이다!! <<그래서 변수에 할당가능

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

function log(message){
    console.log(message);
}
log('hello@');
log(1234);

//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);

//3. Default parameters
function showMessage(from, message ='unknown'){ //parameter가 없을때는 default로 둘 수 있다.)
    console.log(`${message} by ${from}`)
}

let message = 'god';
showMessage(message);

//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);
    }
}
printAll('dream','conding','ellie');

//5. Local scope
let globalMessage = 'global'; //global variable
function printMessage(){
    let message = 'hello';
    console.log(message); //lcal variable
    console.log(globalMessage);
    function printAnother(){
        console.log(message);
        let childMessage = 'hello';
    }
}
printMessage();

//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 upgradeUser(user){
    if(user.point >10){
        return;
    }
    //long upgrade logic
}

//first- class function
//펑션은 변수에 할당될 수 있으며
// 함수의 인자로 넣을수도 있고
// 리턴될수도 있다.

// 1. Function expression
const print = function(){ //익명함수 anonymous function
    console.log('print');
};
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1,3));

// 2. Callback function using function expression
function randomQuiz(answer, printYes, printNo){ //상황이맞으면 실행하는 함수를 callback function이라고 한다.
    if(answer ==='love you'){
        printYes();
    }else{
        printNo();
    }
}

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

const printNo = function print(){ //named function은 나중에 deburging할때 이름이 나오게 할때 쓰기위해서 이름을 선언하거나 재귀함수를 호출할때 사용한다.
    console.log('no!');
}
randomQuiz('wrong',printYes,printNo);
randomQuiz('love you', printYes, printNo);

//arrow function
//항상 anonymous function이다
const simplePrint = function(){
    console.log('simplePrint!!');
};

const simplePrints = () => console.log('simplePrint!!');
const add = (a,b)=> a+b; //arrow function은 한줄일때는 블록이 없이 써도 되지만
const simpleMultiply = (a,b)=>{  // 여러줄일때는 block을 만들고 return을 반드시 적어주어야 한다.
    return a*b;
};

// IIFE: Immediatley Invoked Function Expression
(function hellp(){
    console.log('IIFE');
})();  //<< 함수를 생성과 동시에 호출할 수 있다.

//quiz
function calculate(command, a, b){
    let result;
    switch(command){
        case '/':
            result= a / b;
            break;
        case '+':
            result=a + b;
            break;
        case '*':
            result=a * b;
            break;
        case '%':
            result=a % b;
            break;
        case '-':
            result=a - b;
            break;
    }
     console.log(result);   
}

calculate('%',10,3);
​