드림코딩 : JS -5. 함수 선언, 매개 변수, scope, return, callback함수, arrow함수

//Function
//-프로그램을 설정하는 기본적인 빌딩 블록
//-서브 프로그램. 여러번 재사용 가능
//-task 수행하거나 값을 계산한다
 
//1. Function declaration (함수 선언)
//function name(param1, param2){ body... return; }
//하나의 함수는 한가지 일만 한다
//이름짓기 : 동사, 하는것, 명령 형태
//e.g. createCardAndPoint -> createCard, creatPoint (두개의 함수로 나눌 수 있을지 고민)
//자바스크립트에서 function은 객체이다 = 함수이름.속성 사용 가능
function printHello(){
    console.log('Hello');
}
printHello(); //함수 호출
 
function log(message){
    console.log(message);
}
log('Hello'); //함수 호출하면서 원하는 메시지 입력
 
 
 
//2. Parameters(매개 변수)
//premitive parameters(원시 매개변수): 값(value) 전달된다
//object parameters(객체 매개변수): 참조(reference)가 전달된다
function changeName(obj){
    obj.name = 'coder';  //obj의 이름을 coder로 한다
}
const sigcho = {name: 'sigcho'};
changeName(sigcho);  //obj에 sigcho를 넣는다
console.log(sigcho); //coder값 나온다, sigcho가 coder로 바뀐다
 
 
 
//3. Default parameters(기본값 매개 변수) (added in ES6)
function showMessage(message, from='unknown'){  //기본값을 매개 변수에 미리 지정
    console.log(`${message} by ${from}`);
}
showMessage('Hi!'); //Hi! by undefined 출력
 
 
 
//4. Rest parameters (added in ES6)
function printAll(...args){       //...을 쓰면 배열형태로 저장
    for(let i=0; i<args.length; i++){   //dream
        console.log(args[i]);           //coding
    }                                   //sigcho 이렇게 3줄로 출력된다
 
    for(const arg of args){      //위 함수와 같은 의미
        console.log(arg);
    }
 
    arg.forEach((arg) => console.log(arg));
} 
printAll('dream', 'coding', 'sigcho');
 
 
 
//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); //밖=상위에서 출력하면 에러
}
printMessage();
console.log(message); //밖에서는 에러 발생
 
 
 
//6. Return a value (undefined or 결과값)
function sum(a,b){
    return a+b;
}
const result = sum(1,2);   //3
console.log(`sum: ${sum(1,2)}`);
 
 
 
//7. Early return, early exit
//안 좋은 예시
function upgradeUser(user){
    if(user.point>10){
        //긴 로직...
    }
}
//좋은 예시
function upgradeUser(user){
    if(user.point <=10){
        return;   //조건이 맞지 않을 때, 빨리 return을 해서 종료한다
    }
        //긴 로직...,이후 필요한 로직 실행한다
}
 
 
 
 
 
 
//First-class function
//함수는 다른 변수와 마찬가지로 다뤄진다
//함수는 변수값으로 할당 된다
//함수는 함수의 매개변수로 전달된다
//함수는 리턴값으로도 된다
 
//1. Function expression
// function declaration는 함수가 선언 되기 이전에 호출해도 된다(hoisted), 자바스크립트가 선언된 것을 가장 위로 올려준다
// function expression는 할당된 다음부터 호출이 가능하다
const print = function(){  //anonymous function 이름없는 함수
    console.log('print');  //함수를 변수print에 할당한다
};
print();  //변수 print를 호출한다, print출력
const printAgian = print;
printAgian(); //호출한다, print출력
const sumAgain = sum;  //sum함수를 변수sumAgain에 할당한다
console.log(sumAgain(1,3));  //4출력
 
 
 
//2. Callback function (function expression 사용)
function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you'){
        printYes();
    }else{
        printNo();
    }
}
//anonymous function
const printYes = function(){
    console.log('yes!');  
};
//named function
//디버깅의 stack trace에 더 잘 나오게 하기 위해서이다
//recursions: 함수 안에서 자기 자신을 계속 호출
const printNo =function print(){
    console.log('no!');
    //print();  //recursions이다
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);
 
 
 
//Arrow function
//항상 anonymous, 간결하게 쓸 수 있다
const simplePrint = function(){
    console.log('simplePrint!');
};
const simplePrint = () => console.log('simplePrint!');  //위의 함수와 같다
const add = (a,b) => a + b;
const simpleMutiple = (a,b) => {   //길어지면 블럭을 넣어서 처리할 수도 있다
    //do something more
    return a * b;      //블록을 쓰면 return 키워드 사용한다
};
 
 
 
//IIFE: Immediately Invoked Function Expression, 선언함과 동시에 바로 호출
(function hello(){
    console.log('IIFE');
})();
 

 

scope

 

switch를 이용한 함수 계산