TIL DAY.50 [JavaScript ES6] ArrowFunction, 함수 정의

함수 정의(Function)

• 프로그램을 구성하는 기본적인 building block이다.
• subprogram 이라고도 불리며 여러번 재사용이 가능하다.
• 대체적으로 한가지의 기능이나 값을 계산하기 위해 쓰여진다.

함수 형태

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

중요한 포인트!!(Remember!)

1. 하나의 함수는 하나의 기능만 하도록 만들어야한다.(one function === one thing)
2. 이름 짓기 -> naming: doSometing, command, verb
   ex) createCardAndPoint -> createCard, createPoint
3. 자바스크립트에서 함수는 object로 분류된다.

function printHello(){
  console.log("hello");
}
printHello();
//위처럼 작성할수도 있지만 아래처럼 파라미터로 값을 전달하는게 좀 더 효율적인 코드 작성 방식이다.
function log(message) {
  console.log(message)
}

파라미터(Parameters)

• premitive parameters: passed by value
• object parameters: passed by reference

function changeName(obj) {
	obj.name = 'coder";
  //전달 된 obj의 name을 무조건 coder로 전달하는 함수
}
const daniel = {name: "daniel" };
changeName(daniel);
console.log(daniel);
// coder를 출력함

디포트 파라미터(Default parameters (added in ES6))

function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}
showMessage("Hi");
// Hi by undefined을 출력함
function showMessage(message, from = "unknown") {
  console.log(`${message} by ${from}`);
}
showMessage("Hi");
//위처럼 값이 undefined일 때 출력 할 것을 지정해줄수 있다.
//Hi by unknown 출력

레스트 파라미터(Rest parameters (added in ES6))

function printAll(...args){
  for(let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
printAll('dream', 'coding', 'ellie');

...args로 파라미터를 넘겨 파라미터를 배열 형태로 전달 할 수 있다.

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

// or

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

//위 두 가지 방법으로도 똑같은 기능을 하는 코드를 작성이 가능하다.

로컬 스코프 (Local Scope)

• 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다
• function 안에서 지정한 지역변수(local variable)는 안에서만 쓸 수 있고 밖에서는 쓸 수 없다.
• 하지만 안에서는 globalMessage를 볼 수 있고 사용할 수도 있다.

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";
    // 자식은 부모에서 정의된 message를 받아올 수 있지만, 부모인 PrintMessage는 childMessage를 받아올 수 없다.
  }
}
printMessage();

Early return, early exit!

• 함수에 return을 지정하지 않으면 기본으로 return undefined; 와 같다

// Bad
function upgradeUser(user) {
  if(user.point > 10) {
    //long upgrade logic.. very Bad!!
  }
}

//Good
function upgraderUser(user){
  if(user.point <= 10){
    return;
  }
}
//값이 undefined, or -1 같은 것들은 빨리 return을 통해 function을 끝내고 다시 logic을 짠다.

Function Expression

1. First-class function 이란?

• 함수는 변수처럼 활용 될 수 있다.
• 함수는 변수의 value로 assigned 될 수 있다.
• 함수는 다른 함수의 argument로 전달 될 수 있다.
• 함수는 다른 함수의 return이 된다.

//함수의 이름이 없는 것은 anonymous function이라고 한다.
const print = function () {
	console.log("print");
};
//함수의 이름이 있으면 named function이라고 한다.
const print = function print() {
	console.log("print");
};

print();
// print 출력
const printAgain = print;
printAgain();
// 함수를 변수로 재할당을 할 수 있다 print 출력
const sumAgain = sum;
console.log(sumAgain(1,3));
//4 출력

콜백 지옥(Callback Hell!!)

function randomQuiz(answer, printYes, printNo){
  //함수를 전달해서 상황에 맞는 함수를 전달하는 것을 콜백함수라고 한다.
  //즉 이 함수는 두 가지의 콜백함수를 갖고있는것이다
  if(answer === "love you"){
    printYes();
  }else{
    printNO();
  }
}

named function

1. 디버깅 할 때 유용하게 쓰임.
2. 함수에서 자신을 호출하는 것 (recursions)라는 것을 활용할때도 사용됌.

화살표 함수(Arrow Function)

• 항상 이름이 없는 anonymous function 에 해당 된다.

const simplePrint = function() {
  console.log("simplePrint!");
};
//위의 함수를 아래처럼

const simplePrint = () =>  console.log("simplePrint!"); 

// 와 같이 간결하게 변경이 가능하다

const add = (a,b) => a + b;

IIFE(Immediately Invoked Function Expression)

(function hello(){
  console.log("IIFE");
})();

위와 같이 ()로 함수를 감싸고 ()로 호출함으로 함수를 바로 실행할 수 있도록 해주는 유용한 기술이다.