개발공부/Javascript

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

MyAlice 2021. 4. 27. 14:27
728x90

** 이 글은 유튜브 강의을 보고 공부하면서 스스로 콘솔로 작성하고, 따라치면서 Javascript 기초 공부를 하는 공간입니다.

 

www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5

 

// Function
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculates a value

// 1. Function decalration
// function name(param1, param2) { body... return;}
// one function === one thing 
// naming: doSomething, command, verb
// eg. createCardAndPoint -> createCard, createPoint
// functuib is object in JS

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

}
printHello();

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

//2, Parameters
// premitive parameters: passed by value
// object parameters: passed by reference

function changename(obj){
    obj.name = "alice";
}

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

//3. Default parameters ( added in ES6 )
function showmessage(message, from = 'unknown') {
    
    console.log('${message} by ${from}'); //Hi by unknown

}

showmessage('Hi!');


//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', 'ellie');

// 5. Local scope
let globalMessage = 'global';

function printMessage(){
    let message = 'hello';
    console.log(message);
    console.log(globalMessage);

    function printAnother(){
        console.log(message);
        let childMessage = 'hello';

    }
    console.log(childMessage); //error!!!!!!!!!!!!!!!!!!!!!
}

printMessage();

//6. Return a value
function sum(a,b) {
    return a+b;

}

const sum = sum(5,4);
console.log('5+4 is ${sum(5,4)}');

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

//good 
function upgradeUaseer(user) {
    if(user.point < 10){
        return;
    }
        // Long upgrade logic .......
}

// First-class Function
// functions are treated like any other variable
// can be assigend 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 decalration can be called earlier than it is defined (hoisted)
// a functuib expression is created when the execution reches it.

const print = function (){
    consile.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) {
    if (answer == 'love you') {
        printYes();
    }else{
        printNo();
    }
}

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

}

const printNo = function print(){
    console.log("no!");

}

randomQuiz('wrong', printYes, printNo);

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

const simplePrint = () => console.log('simpleprint!');
const add = (a,b) => a + b; // return a+b;

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

// 바로 호출하고 싶은경우 !!!!!!!!!!!!!!!
(function hello(){
    console.log('IIFE!');
})();
728x90