ES6 Arrow function, 함수 선언 & 네이밍 룰

들어가기전에 잠깐! 🤔

함수도 역시 Object 중 하나 이기 때문에, 함수가 생성되면 그 함수의 이름 자체는 그 함수 로직이 담겨있는 주소를 가리키고 있다. 즉 함수에 이름에는 reference가 들어있고, 그 주소에 함수의 로직이 담겨있다 🙂

함수 네이밍

naming : doSomething, command, verb

e.g. createCardAndPoint => createCard , createPoint 로 분리하는게 좋음
함수 이름이 짓기 어렵다면, 그 함수가 여러 일을 하고 있는게 아닌지 생각해볼것

// 1. function declaration
// function name (param1, param2){return;}
// 하나의 함수는 하나의 일을 하는게 좋다
// 자바스크립트에서의 함수는 object로 간주되기 때문에 변수에 할당거나 파라미터로 전달, 함수를 리턴할 수도 있다.

function log(message : string) : number {
  console.log(message);
  return 0;
}

// 2. Parameters
// premitive parameters : passed by value (변수로써 할당되는 파라미터는 값으로 전달)
// object parameters : passed by reference (object는 메모리 참조값으로써 전달)

function changeName(obj){
  obj.name = 'coder';
}
const dylan = {name:'dylan',age:'28'};
changeName(dylan);
console.log(dylan.name); // coder

// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown'){
  console.log(`${message} by ${from}`);
} 
showMessage('Hi'); // from 에 파라미터가 전달되지 않더라도, 디폴트로 설정한 'unknown' 으로 출력된다

// 4. Rest parameters (added in ES6)
// '...' 으로 파라미터를 선언하면 배열의 형태로 전달받는것이 된다.
function printAll(...args){ 
  for (let i = 0; i < args.length; i++){
    console.log(arg[i]);
  }

  for (const arg of args) {
    console.log(arg);
  }

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

printAll('dev','coding','dylan');

// 5. Local scope
let globalMessage = 'global'; // global variable
function printMessage(){
  let message = 'hello';
  console.log(message); //local variable
  console.log(globalMessage); // 출력가능 
  function printAnother(){
    console.log(message); //출력 가능
    let childMessage = 'hello'; 
  }
  console.log(childMessage); // 출력 불가능
}

// 이렇게 중첩된 함수에서 자식의 함수가 부모 함수의 변수에 접근 가능하게 하는것이 '클로저'

// 6. return a value
function sum(a,b){
  return a+b;
}
const result = sum(1,2); //3
//함수에 return값이 생략되어있는건 return undefined; 이다.

Function expression

// 1. Function expression
// function declaration can be called earlier than it's defined (hoisted)
// function expression is created when the execution reaches it.

print(); // 호이스팅 안됨
const print = function(){
  //anonymous function
  console.log('print');
};
print() // print 출력

sum(1,2); //호이스팅 됨. 에러 발생 x 
function sum(a,b){
  console.log(a+b);
}

// 2. Callback function using 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 traces에 함수 이름 노출)
// recursions 할때 사용
const printNo = function print(){
  console.log('No');
  //print(); // recursions
};

randomQuiz('wrong',printYes,printNo);
randomQuiz('love you',printYes,printNo);

Arrow function

// Arrow function
// 항상 anonymous function 이다.

//일반적인 anonymous function
const simplePrint = function(){
  console.log('simplePrint!');
}

//arrow function
const simplePrint = () => console.log('simplePrint!');
const add = (a,b) => a+b; // a,b를 받아서 a+b를 리턴
const simpleMultiply = (a,b)=>{
  //do something more
  return a*b;
}; //여러 로직이 동작해야한다면 블럭을 사용해도 됨

IIFE (Immediately Invoked Function Expression)

(function hello(){
  console.log('IIFE');
})();
// 원래는 선언후 호출을 해줘야하지만, 호출 없이 바로 실행시키고 싶을때 사용