[JS]03-function(함수, parameters (변수), 콜백 함수, 화살표함수/first class fn 등)

Function

-기본적인 빌딩블럭. (fundamental building block in the program)

-subprogram 이라고도 불리며 여러번 재사용이 가능함

- 한가지의 task 나 값을 계산하기위해 쓰여짐

---

1. Function 선언하기

 

function name(param1, param2){
 
  body...
  return;
  
}

-하나의 함수는 한가지 일만 하도록 만들어야함

-함수의 이름을 작성할땐 동사형태로 지정하기.

e.g. createCardAndPoint -> createCard, creatPoint 처럼 세분화 하는게 함수를 깨끗하게 만들 수 있다.

-js에서 function은 object 이다. 그렇기 때문에 함수를 변수에다 할당할 수 있고 파라미터로 전달이 되고 함수를 리턴할 수 있다.

 

//<함수선언>
function printHello(){
  consol.log('hello');
}
//<함수호출>
printHello();

---

2. parameters (변수)

 

- premitive parameters는 값이 메모리에 그대로 저장되어서 값이 전달이 됨.

- object parameters는 메모리에 레퍼런스로 저장되어서 레퍼런스가 전달됨

 

function changeName(obj){
  obj.name = 'coder';
}


const Tom = { name: 'Tom'};
changeName(Tom);
console.log(Tom); //name: 'coder'로 변경됨

 

---

 

3. default parameters (='')

 

function showMessage(message, from = 'unKnown'){ // ='' 으로 디폴트값 설정
 console.log(`${message} by ${from}`);
}

showMessage('Hi!'); // from 값은 안적혀 있으므로 디폴트값인 'unKnown'으로 대체되어 출력

---

4. Rest parameters (...)

 

function printAll(...args){ //... 쓰면 배열형태로 전달됨
 
 for(let i=0 ; i< args.length ; i++){
 console.log(args[i]);
 }

//또는 간단하게
 for(const arg of args){ //for( of )를 이용
 console.log(arg);
 }
//로도 쓰임

//더간단하게는
 args.forEach((arg) => console.log(arg));
//로도 쓰임
}

printAll('apple', 'banana', 'tomato');

 

---

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); //childMessage는 자식요소에 있으므로 밖에서 호출하면 오류가남.
}

printMessage();

---

6. Return a value

-파라미터로 전달받은 값을 계산하여 리턴으로 반환함

-계산이 안되는 값들은 undefined로 되기때문에 생략가능

function sum(a, b){
    return a + b;
}
const result = sum(1, 2); // 3

---

7. Early return, early exit

 

상황)유저의 포인트가 10이상일 경우에만 업그레이드를 하는 로직이 있다면..

 

나쁜 예
function upgradeUser(user){
    if (user.point > 10){

        //(업그레이드 내용 블라블라)
       // 이 블럭안에 로직을 많이 작성하게 되면 가독성이 떨어짐.
    }
}

좋은 예
function upgradeUser(user){
    if (user.poin <= 10){
        return; // 빠르게 종료하고
    }
   // 블럭 밖으로 조건이 맞을때만 필요한 로직들을 실행하는것이 낫다.
   // (업그레이드 내용 블라블라) 
}

 

즉, 조건이 맞지 않는경우 or 값이 undefined 인 경우 또는 값이 -1인 경우 빨리 리턴을 하고

필요한 로직들은 그 뒤에 작성하는 하는것이 좋다.

 

 

---

 

First-class function

-function are treated like any other variable

-can be assigned as a value to variable

-can be passed as an argument to other function

-can be returned by another function

 

1. function expression

-a function declaration can be called earlier than it is defiend. (hoisted)

-a function expression is created when the execution reaches it.

 

const print =function (){ // 함수이름이없는 경우 anonymous function
    consol.log('print');
};
print(); // print 출력
const printAgain = print;
printAgain(); //마찬가지로 print 출력

const sumAgain = sum; // 미리 선언해도 출력이됨(호이스팅)
consol.log(sumAgain(1, 3));

---

2. Callback function using function expression

 

예시)랜덤퀴즈만들기

1단계: 펑션 만들기
function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you'){
        printYes();  //정답이 맞으면 printYes 라는 콜백 함수 호출
    }else{
        printNo();
    }
}

 2단계: 콜백선언 만들기  
//(anonymous function)
const printYes = function (){
    consol.log('yes');
};

//(named function:네임드 펑션을 쓰는 이유는 디버깅을 할때 함수의 이름이 나오게 하기위해서 
//또는 함수 안에서 또다른 함수를 호출할때 쓰인다.)
const printNo = function print(){
    consol.log('no');
};

 3단계: 확인하기
randomQuiz('wrong', printYes, printNo); //오답인 경우 printNo로 콜백
randomQuiz('love you', printYes, printNo);//정답인 경우 printYes로 콜백

 

 

---

3. Arrow function

-always anonymous 항상 이름이 없음

화살표함수 만드는법: function을 지우고 ()뒤에 => 넣고, {} 도 지워줌, 한줄일땐 return도 생략 가능

 

const simplePrint = function (){
    consol.log('simplePrint!')
}

//화살표함수로 바꿔주면
const simplePrint = () => consol.log('simplePrint!')

 

 

---

4. IIFE : immediately Invoked Function Expression

 

-함수를 선엄합과 동시에 바로 호출하고 싶을때 사용

요즘은 사용을 잘안하지만 바로 값을 보고싶을때 사용한다.

// 함수전체를 ()로 묶고 끝에 ();를 붙여서 호출!
(function hello(){
    consol.log('IIFE');
})();

---