함수

1. Functions are "Code on Demand"

• JS가 스크립트를 읽으면 전체 스크립트를 먼저 확인하고 추가한 함수 선언을 찾아서 함수를 등록하면 함수를 원할 때마다 호출할 수 있다.

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

• 함수 내에서 상수나 변수를 생성하면 해당 함수에 속한다.

3. Function CAN take parameters(arguments) and CAN return a value

• 함수는 인수라는 매개변수를 취해 값을 반환할 수 있다.

4. Functions can be called multiple times(with different arguments)

• 함수는 여러 번 호출할 수 있고 매번 다른 인수를 전달할 수 있다.

5. Functions can be called "directly" and "indirectly"

• 함수를 직접, 간접적으로 호출할 수 있다.
• 직접적으로 호출하는 경우는 함수 이름 뒤에 괄호를 추가하는 것이고, 간접적으로 호출하는 경우는 이벤트 리스너를 호출해서 바인딩하거나 버튼에 함수를 추가하는 경우.

매개변수(parameter) vs 인자(argument)

• 매개변수는 함수를 정의할 때 괄호 안에 지정하는 변수

function sayHi(name){...}

• 인자는 함수를 호출할 때 함수에 전달하는 값

sayhi('Max');

함수 vs 메서드

객체에 함수를 프로퍼티로 저장할 수 있다. 키나 객체에 저장된 함수를 메서드라고 한다.

const person = {
    name: 'Max',
    greet: function greet() {
        console.log('Hello there!');
    } // greet은 person 함수의 메소드
};

startGameBtn.addEventListener('click', startGame);  // addEventListener는 startGameBtn 함수의 메소드

함수는 객체다

함수는 힙에 저장된다.

A different Way of Defining Functions

Function Declaration / Function Statement

function multiply(a, b) {
return a * b;
}

• Hoisted to top, can be declared anywhere in the file (i.e. also after it's used)
• JS가 자동으로 함수를 맨 위로 hoist하고 초기화한다. 함수를 정의하기 전 호출이 가능하다.

Function Expression

const multiply = function(a, b) {
return a * b;
}

• Hoisted to top but not initialized/defined, can't be declared anywhere in the file (i.e. not after it's used)
• 상수가 정의되지 않은 상태로 hoist되기 때문에 정의되기 전까지 함수를 호출할 수 없다.

annonymous function

익명함수에 이름을 주어야하는 이유

• 함수가 오류를 발생시켜도 어떤 함수인지 찾을 수 없다.

startGameBtn.addEventListener('click', function () {
    console.log('Game is starting...');
});  // 익명 함수를 작성할 수 있다.

startGameBtn.addEventListener('click', function startGame () {
    console.log('Game is starting...');
});  // 함수에 이름을 주어 디버깅이나 브라우저에서 오류 표시가 되었을 때 함수를 찾을 수 있게 한다.

화살표 함수

• 함수를 전달하는 경우나 익명 함수를 사용할 때 사용한다.
• 화살표 함수가 있고 1개의 표현식만 있다면 중괄호 생략 가능
• 코드를 줄일 수 있다.

<General Syntax: (arg1, arg2) => {...}>

• No Arguments/Parameters: () => {...}
  - Empty pair parentheses is required 빈 괄호 필수
• Exactly one (1) Arguments/Parameter: arg => {...}
  - Parentheses can be omitted 괄호 추가/생략 가능
• Exactly one expression in function body: (a, b) => a + b
  - Curly braces can be omitted, result is returned 중괄호 생략 가능, result는 return된다.
• More than one expression in function body: (a, b) => { a*=2; return a+b;}
  - Curly braces and return statement required 중괄호랑 return문 필수