Section 6: More about Functions - Beyond function basic() {}

The goals

💪🏻Different Ways of Creating Functions

✌🏻Anonymous Functions

👍🏻Callback Functions & Functions in Functions

👏🏻Default Arguments & Rest Operator

👊🏻Bind() & More

 

What We Already Know

Functions are "Code on Demand"

Variables and constants created in functions "belong" to that function

Functions CAN take parameters (arguments) and CAN return a value

Functions can be called multiple times (with different arguments)

Functions can be called "directly" and "indirectly"

 

매개변수 vs 인자

이 강의에서 "매개변수"와 "인수"라는 단어를 같은 의미로 사용하는 것을 듣게 될 겁니다.

엄밀히 말하자면 이 둘은 차이가 있습니다.

매개변수는 함수를 정의할 때 괄호 안에 지정하는 변수입니다.

1. function sayHi(name) { ... }

이 예시에서 name은 매개변수입니다.

인수는 함수를 호출할 때 함수에 전달하는 구체적인 값입니다.

1. sayHi('Max');

매개변수 name 에 대해 'Max' 는 함수의 인수 입니다.

두 개념은 매우 밀접하게 연결되어 있으므로 저는 종종 "함수가 받는 인수를 정의하자" 라는 식으로 말할 겁니다. 왜냐하면 결국 함수의 인수를 정의한다는 것은, 해당 매개변수를 설정한다는 뜻이기 때문입니다 (그 반대의 경우도 마찬가지입니다).

const startGameBtn = document.getElementById('start-game-btn');

function startGame() {
  console.log('Game is starting...');
}

const person = {
  greet: function greet() {
    console.log('Hello there!');
  }
}

person.greet();

startGameBtn.addEventListener('click', startGame);

 

Functions are objects!

We can also store functions in objects which essentially stores the object in an object.

 

const startGameBtn = document.getElementById('start-game-btn');

const start = function startGame() {
  console.log('Game is starting...');
}

startGameBtn.addEventListener('click', startGame);

 

 

A Different Way of Defining Functions

Anonymous Functions

Anonymous Function is a function that does not have any name associated with it. Normally we use the function keyword before the function name to define a function in JavaScript, however, in anonymous functions in JavaScript, we use only the function keyword without the function name.

An anonymous function is not accessible after its initial creation, it can only be accessed by a variable it is stored in as a function as a value. An anonymous function can also have multiple arguments, but only one expression.

 

The below enlightened syntax illustrates the declaration of anonymous function using normal declaration:

function() {
    // Function Body
 }

We may also declare anonymous function using arrow function technique which is shown below:

( () => {
    // Function Body...
} )();

다양한 화살표 함수 구문

화살표 함수의 경우 사용할 수 있는 몇 가지 다른 구문이 있습니다 - 다음은 이에 대한 요약입니다.

중요한 참고 사항. 이 글의 끝 부분에 있는 "함수는 객체만 반환"하는 특수 사례를 놓치지 마세요!

1) 기본 구문:

1. const add = (a, b) => {
2. const result = a + b;
3. return result; // like in "normal" functions, parameters and return statement are OPTIONAL!
4. };

주목하실 만한 사항. 마지막의 세미콜론, 함수 키워드 없음, 매개변수/인수의 괄호.

2) 정확히 하나의 매개변수를 받는 경우 더 짧은 매개변수 구문.

1. const log = message => {
2. console.log(message); // could also return something of course - this example just doesn't
3. };

주목하실 만한 사항. 매개변수 목록의 괄호는 생략할 수 있습니다(정확히 하나의 인수에 대해).

3) 인수를 받지 않은 경우 빈 매개변수 괄호.

1. const greet = () => {
2. console.log('Hi there!');
3. };

주목하실 만한 사항. 괄호를 추가해야 합니다(생략할 수 없음)

4) 정확히 하나의 표현식이 사용되는 경우 더 짧은 함수 본문.

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

주목하실 만한 사항. 중괄호 및 return 문 생략 가능, 표현식 결과는 항상 자동 반환

5) 함수가 객체를 반환합니다(4)의 예시와 같이 구문이 단축됨).

1. const loadPerson = pName => ({name: pName });

주목하실 만한 사항. 객체에 대한 추가 괄호가 필요합니다. 그렇지 않으면 중괄호는 함수 본문을 구분하는 기호로 해석되므로 구문 오류가 발생하게 됩니다.

마지막 예시는 헷갈릴 수 있습니다. 보통 JavaScript에서 중괄호는 항상 정확히 하나의 의미를 가질 수 있습니다.

1. const person = { name: 'Max' }; // 이 중괄호는 객체 생성에 쓰임
2. if (something) { ... } // 중괄호로 if 문 블록을 표기함

그러나 화살표 함수를 사용할 경우, 중괄호는 두 가지 의미를 가질 수 있습니다.

1) 함수 본문 표시(기본 형식에서)

2) 반환하려는 객체 생성(짧은 함수 본문 형식으로)

JavaScript에 수행하려는 작업을 "알리려면" 위에 표시된 것처럼 표현식(예: 객체 생성)을 괄호로 묶으세요.

 

Rest Parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

 

Description

A function definition's last parameter can be prefixed with ... (three U+002E FULL STOP characters), which will cause all remaining (user supplied) parameters to be placed within a standard JavaScript array. Only the last parameter in a function definition can be a rest parameter.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]

 

Callback Function

"I will call back later!"

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

 

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

 

Bind()

 

Function Borrowing

With the bind() method, an object can borrow a method from another object.

The example below creates 2 objects (person and member).

The member object borrows the fullname method from the person object:

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

 

Preserving this

Sometimes the bind() method has to be used to prevent loosing this.

In the following example, the person object has a display method. In the display method, this refers to the person object:

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

person.display();

 

When a function is used as a callback, this is lost.

This example will try to display the person name after 3 seconds, but it will display undefined instead:

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

setTimeout(person.display, 3000);

The bind() method solves this problem.

In the following example, the bind() method is used to bind person.display to person.

This example will display the person name after 3 seconds:

const person = {
  firstName:"John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  }
}

let display = person.display.bind(person);
setTimeout(display, 3000);

 

function calculate(operation) {
  const enteredNumber = getUserNumberInput();
  const initialResult = currentResult;
  let operator;
  if (operation === 'ADD') {
    currentResult += enteredNumber;
    operator = '+';
  } else if (operation === 'SUBTRACT') {
    currentResult -= enteredNumber;
    operator = '-';
  } else if (operation === 'MULTIPLY') {
    currentResult *= enteredNumber;
    operator = '*';
  } else {
    currentResult /= enteredNumber;
    operator = '/';
  }
  createAndWriteOutput(operator, initialResult, enteredNumber);
  writeToLog(operation, initialResult, enteredNumber, currentResult);
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));
multiplyBtn.addEventListener('click', calculate.bind(this, 'MULTIPLY'));
divideBtn.addEventListener('click', calculate.bind(this, 'DIVIDE'));

 

 

 

 

 

 

Sources

https://www.geeksforgeeks.org/javascript-anonymous-functions/#:~:text=Anonymous%20Function%20is%20a%20function,keyword%20without%20the%20function%20name.

JavaScript Anonymous Functions - GeeksforGeeks

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Rest parameters - JavaScript | MDN

https://www.w3schools.com/js/js_function_bind.asp

JavaScript Function bind() Method