[JavaScript] Arrow Function, 함수의 선언과 표현

✅  Function

• fundamental building block in program
• subprogram can be used multiple times
• performs a task or calculates a value

✅ Function Declaration

• function name(param1, param2) { body ... return ;}
• one function === one thing
• naming: doSomething, command, verb
• e.g) crateCardAndPoint → createCard, createPoint
• function is object in JS

function printHello() {
  console.log("Hello");
}
printHello();

function log(message) {
  console.log(message);
}
log("hello!");
log(2134);

 

✅ Parameters

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

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

const sieun = {
  name: "sieun",
};

changeName(sieun);
console.log(sieun);
//{name: "coder"}

 

✅ Default Parameters

function showMessage(message, from = "unknown") {
  //   if (from === undefined) {
  //     from = "unknow";
  //   }
  console.log(`${message} by ${from}`);
}

showMessage("HI!");

 

✅ Rest Parameters

function PrintAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
  for (const arg of args) {
    console.log(arg);
  }
  args.forEach((arg) => console.log(arg));
}

PrintAll("dream", "coding", "ellie");
//function이 오브젝트 타입이기 때문에 PrintAll.~~등을 이용해 속성값들을 확인해볼 수가 있다.

 

✅ Local Scope

let globalMessage = "global"; //global Variable

function printMessage() {
  let message = "hello"; //local Variable
  console.log(message);
  console.log(globalMessage);

  function printAnother() {
    console.log(message);
    let childMessage = "Hello@";
    console.log(childMessage);
  }
}

printMessage();

 

✅ Return Some Value

function sum(a, b) {
  return a + b;
}

const result = sum(1, 2);
console.log(`sum: ${sum(1, 2)}`);

 

✅ Early Return, Early Exit

 👎🏻Bad Case

function upgradeUser(user) {
  if (user.point > 10) {
    //long upgrade Logic
  }
}

👍🏻Good Case

function upgradeUser(user) {
  if (user.point > 10) {
    //long upgrade Logic
  }
}

 

 

 

✅ First-Class Function

Functions are treated like any other variable Can be assigned as a value to variable Can be passed as an argumment to other functions Can be reture by another function

 

✅ Function Expression

A Function declaration can be called earlier than it is defined(hoisted) A function expression is created when the execution reaches it

const print = function () {
  console.log("print");
};

printMessage();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

✅ 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

const printNo = function print() {
  console.log("No!");
};
randomQuiz("wrong", printYes, printNo);
randomQuiz("love you", printYes, printNo);

✅ Arrow Function

always anonymous

const simplePrint = function () {
   console.log("simplePrint!");
};

 

 

⬆️ same as ⬇️

 

const simplePrint = function () {
   console.log("simplePrint!");
};

 

 

with parameters

 

const add = (a, b) => a + b;
//const add = function(a,b){return a + b;}

const simpleMultiply = (a, b) => {
  //do something more
  return a * b;
};

 

✅ IIFE: Immediately Invoked Function Expression

//선언함과 동시에 실행!
(function hello() {
  console.log("IIFE");
})();