TIL JavaScript from Dream Coding(3)

Function

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

---

1. Function declaration

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

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

function log(message) {
  console.log(message);
}
log('Hello@');
log(1234);

---

2. Parameters

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

function changeName(obj) {
  obj.name = 'coder';
}
const amanda = { name : 'amanda' };
changeName(amanda);
console.log(amanda); // {name : "coder"}

---

3. Default parameters (added in ES6)

function showMessage(message, from) {
  if (from === undefined) {
    from = 'unknown';
  }
  console.log(`${message} by ${from}`);
}
showMessage('Hi!');

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

4. Rest parameters (added in ES6)

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');

---

5. Local scope

밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

let globalMessage = 'global'; // gloval variable
function printMessage() {
  let message = 'hello';
  console.log(message); // local variable // hello
  console.log(globalMessage); // global
  
  function printAnother() {
    console.log(message); // hello
    let childMessage = 'hi';
  }
  console.log(childMessage); // Uncaugth ReferenceError
}
console.log(message); // Uncaugth ReferenceError
printMessage();

---

6. Return a value

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`); // sum: 3

---

7. Early return, Early exit

Bad

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

Good

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

---

8. Function Expression

First-class function

function are treated like any other variable
can be assignd as a value to variable
can be passed as an argument to other functions.
can be returned by another function

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() { // anonymous function
  console.log('print'); 
}
print(); // print
const printAgain = print;
printAgain(); // print
const sumAgain = sum;
console.log(sumAgain(1, 3)); // 4 (6.Return a value 참조)

---

9. 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
// better debugging in debugger's stack traces
// recursions
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!');
};

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


// IIFE: Immediately Invoked Function Expression
(function hello() {
  console.log('IIFE');
})();

DreamCoding Lecture