JavaScript 함수

선언적 함수 function hello() {}

• 이름이 hello1 인 함수를 선언

function hello1() {
    console.log('hello');
}

console.log(hello1, typeof hello1);

[Function: hello1] function

• 함수의 매개변수
  함수를 호출할 때 값을 지정

function hello2(name) {
    console.log('hello2', name);
}

hello2()

hello2 undefined

hello2(name) name은 매개변수
매개변수 없이 함수를 호출해서 hello2 undefined로 출력 됨.

---

• 함수의 리턴
  함수를 실행하면 얻어지는 값

function hello3(name) {
    return `hello3 ${name}`;
}

console.log(hello3('Oliver'));

hello3 Oliver

익명함수 const hello = function(){}

• 이름이 hello1 인 함수를 선언

const hello1 = function() {
    console.log('hello1');
}

console.log(hello1, typeof hello1);

[Function: hello1] function

---

• 함수의 매개변수
  함수를 호출할 때 값을 지정

const hello2 = function(name) {
    console.log('hello2', name);
}

hello2()

hello2 undefined

---

• 함수의 리턴
  함수를 실행하면 얻어지는 값

const hello3 = function(name) {
    return `hello3 ${name}`;
}

console.log(hello3('Oliver'));

hello3 Oliver

선언적 함수와 익명함수 차이점

hello1();

function hello1() {
    console.log('hello1');
}

hello1

선언적 함수는 함수를 선언하기 전에 호출하여도 문제가 없다.
함수를 먼저 메모리에 저장함.

---

console.log(hello2);
hello2();

var hello2 = function() {
    console.log('hello2');
}

undefined
TypeError: hello2 is not a function

변수의 끌어올림 현상(hoisting)으로 undefined 출력 됨.
hoisting으로 var hello2의 변수만 먼저 선언이 되었기 때문에 함수로 판단을 못하여 TypeError: hello2 is not a function이 출력 됨.
hello2();를 함수 밑에 사용하면 정상 작동 됨.

---

hello3();

const hello3 = function() {
    console.log('hello3');
}

ReferenceError: Cannot access 'hello3' before initialization

const, let 으로 사용했을 때 함수 선언 전에 호출하면 안 됨.

const hello = new Function();

• new Function(인자1, 인자2, ..., '함수의 바디');
  이런 형태의 함수는 많이 쓰이지는 않는다.

const sum = new Function('a', 'b', 'c', 'return a+b+c');

console.log(sum(1, 2, 3));

6

function과 new Function(); 차이점

global.a = 0;
{
    const a = 1;

    const test = new Function('return a');

    console.log(test());
}

0

a는 지역변수에 접근이 안 됨.
a는 global 전역변수 0에 접근 한다.
global 전역변수가 없다면 출력값은 ReferenceError: a is not defined

---

{
    const a = 2;

    const test = function() {
        return a;
    }
    console.log(test());
}

2

일반적인 코딩 패턴

() => {}

arrow function(es6)

• arrow 함수를 만들어 이름이 hello1인 변수에 할당

const hello1 = () => {
    console.log('hello1');
}

항상 익명 함수로 사용해야 함

---

• 함수의 매개변수
  함수를 호출할 떄 값을 지정
  매개변수가 하나일 때, 괄호 생략 가능

const hello2 = name => {
    console.log('hello2', name);
}

const hello3 = (name, age) => {
    console.log('hello3', name, age);
}

---

• 함수의 리턴
  함수를 실행하면 얻어지는 값

const hello4 = name => {
    return `hello4 ${name}`;
}

const hello5 = name => `hello5 ${name}`;

로직이 한줄이면 return과 {} 생략 가능.

new 함수();

생성자 함수

• 생성자 함수를 이용하여 새로운 객체를 만들어 내는 방법

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const p = new Person('Mark', 37);

console.log(p, p.name, p.age);

const a = new Person('Anna', 26);

console.log(a, a.name, a.age);

Person { name: 'Mark', age: 37 } Mark 37
Person { name: 'Anna', age: 26 } Anna 26

Person 함수를 이용하여 여러 명의 Person 객체를 만들 수 있다.
this는 전역 객체이다.
this의 역할을 생성자 함수인 new Person을 가리킨다.
arrow function은 this를 만들지 못한다.

함수 안에서 함수를 만들어 리턴

• 함수를 호출하면 함수를 만들어서 리턴

function plus(base) {
    return function(num) {
        return base + num;
    }
}

const a = plus(5);
console.log(a(10));

const b = plus(3);
console.log(b(10));

15
13

함수를 호출할 때, 인자로 함수를 사용

• 함수를 인자로 하여 함수를 호출

function hello(c) {
    console.log('hello');
    c();
}

hello(function() {
    console.log('콜백');
});

hello
콜백