JS (ES6 & above) - Functions

■ Function in JS

1) Procedual language (절차 언어)

함수가 매우 중요한 기능을 담당

> JS에 Class가 있어 object oriented 지만, prototype를 base로 한 가짜의 object임

> Procedual language에 가까움

 

2) Function이 매우 중요해서 다음을 고려해야함

(a) Function is an object in JS

>  first class citizen : 객체로 취급될 수 있음

( can be passed as a parameter, returned from function )

 

(b) In, Output

(c) function의 naming rule

doSomething, command, verb
eg) createCardAndPoing -> createCard, createPoint

(d) function does One thing and no more

> one function === do one thing and no more

 

3) 추가

> aka. Sub-program 이라고도 불림

함수를 사용하여 여러번 같은 기능을 수행하는 등의 재사용이 가능

 

---

■ Function

1) 선언/사용 방식

function name(param1, param2){

    ... 
    body, Business logic
    ... 
    return;
}

 

2) Js to type script 

> python coding convention에 type 기술해주는 것과 매우 유사...

return 값만 -> 표기에서 : 표기로 바뀌는 듯?

 

■ Function Parameters

1)

primitive param : passed by value (that pointer is pointing) → copy of the value

object : passed by the reference itself → function will effect the object itself

function changeName(obj){
  obj.name = 'coder'; // change objects reference, immutable
}
const hj = {name : 'hojune'};
changeName(hj);
console.log(hj);

>>> { name: 'coder' }

function changeValue(variable){
  variable = 'changed!';
}
let var_temp = 'hello!';
console.log("before change : ", var_temp);
changeValue(var_temp);
console.log("after change : ", var_temp);

>>>
before change :  hello!
after change :  hello!

 

2) default parameters

(a) before ES6

//3. Default Parameters ( added in ES6 )
function showMessage(message, from){
  if(from===undefined){
    from = 'unknown';
  }
  console.log(`${message} by ${from}`);
}
showMessage("hi");

>>> hi by unknown

(b) after ES6

function showMessage(message, from='unknown'){
  console.log(`${message} by ${from}`);
}
showMessage("hi");

>>> hi by unknown

 

3) Rest parameters

> after ES6, multiple input args can be stored in array in the function

function printAll(...args){
  for(let i=0; i<args.length; i++){
    console.log(args[i]);
  }
}
printAll('hi', 'its', 'hojune');

>>>
hi
its
hojune

※ for each는 잘 안씀 : coding convention guideline에 존재

> const arg of args는 쓰는 듯 하다..?

> 배열 메써드 가능, callback형태

    args.forEach((arg) => { console.log(arg) } );

function printAll(...args){
  for(const arg of args){
    console.log('arg now : ', arg);
  }
}
printAll('hi', 'its', 'hojune');

>>>
hi
its
hojune

 

 

■ Function Scope

자식은 부모 scope를 참조 가능하나 반대는 되지 않음

// 5. local scope
let globalMessage = 'global';
function printMessage() {
  let message = 'hello';
  console.log(message);
  console.log(globalMessage);
  function printAnother() {
    console.log(message);
    let childMessage = 'its your child!';
  }
  
  //여기서 console.log(childMessage) -> not defined error
}

 

 

■ Function return

무조건 명시적 return이 아닌 경우, 마지막 생성자(암묵적)

혹은 return undefined 를 꼭 돌려주게 되어있음

 

1) Early return, early exit

long logic이 아닌 조건을 먼저 확인해서 빨리 탈출 → 코드 가독성 측면에서 이득

function upgradeUser(user){

  // 안맞는 조건인 경우 빨리 탈출
  if(user.point <= 10){
    return;
  }

  // do your logic that is long...
}

 

 

■ Function expression

참조 : korshika.tistory.com/56

함수표현식 : 선언은 반드시 할당 이전에

함수선언식 : hoisting이 일어나서 선언 지점에 관계 없음

 

 

■ Callback function

1) named function

> function NAME ( ) { .. } 의 형식인 경우

> debugging 시 용이

function randomQuiz(answer, printYes, printNo){
  if(answer==='love you'){
    printYes();
  }else {
    printNo();
  }
}

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

const printNo = function print(){ // print name -> debugging 용이
  console.log('No');
}

 

 

■ Arrow function

항상 이름이 없는 anonimus 함수

const simplePrint = () => console.log('simple print!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
  // do something here
  return a + b;
}

 

 

■ IIFE

Immediately Invoked Function Expression

참조 : korshika.tistory.com/56

 

 

---

참조 :

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