JavaScript 함수

함수(function)

// function
// 이름이 hello1 인 함수를 선언

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

console.log(hello1, typeof hello1);

 

함수도 객체의 한 종류라서 hello1함수를 호출하면 객체 형식으로 나옴

 

결과

 

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

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

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

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

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

hello3(name) 여기서 name은 매개변수인데 밑에서 hello3을 호출할때 name매개변수에 Mark를 넣어서 호출했으므로

 

결과

 

 

// function
// 이름이 hello1 인 함수를 선언

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

console.log(hello1, typeof hello1);

결과

 

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

hello1();

 

결과

 

위치를 바꿔도 똑같다

hello1();

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

 

결과

 

 

 

// new Function(/* 인자1, 인자2, ....., 함수의 바디 */);

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

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

 

결과

 

sum선언전에 사용해서 에러가 뜸

// new Function(/* 인자1, 인자2, ....., 함수의 바디 */);
console.log(sum(1, 2, 3));

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

결과

 

{
    const a = 1;

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

    console.log(test());
}

 

결과

a가 정의되지 않았다고 뜬다 여기서 사용 되는 a는 아래의 코드처럼 {}밖에서 전역변수로 지정해줘야 된다

// const sum = new Function('a', 'b', 'c', 'return a + b + c');
global.a = 0;


{
    const a = 1;

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

    console.log(test());
}

 

결과

 

// const sum = new Function('a', 'b', 'c', 'return a + b + c');
global.a = 0;


{
    const a = 1;

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

    console.log(test());
}

{
    const a = 2;

    const test = function() {
        return a;
    }

    console.log(test());
}

두번째 {}안의 a는 const a = 2;를 인식해서 아래의 결과와 같이 나온다

 

결과

 

*arrow function (es6에서 생겨남, 항상 익명함수이다) 

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

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

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

// 매개변수가 하나일 때, 괄호 생략 가능

const hello2 = name => { // 원래는 (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}`;

 

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

function Person(name, age) {
    console.log(this);
    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);

const Cat = (name, age) => {
    console.log(this);
    this.name = name;
    this.age = age;
}

const c = new Cat('냥이', 1);//불가 이유 : arrowfunction안에서는 this가 생겨나지 않아서 객체안에 프로퍼티를 못넣어준다.

 

결과

 

 

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

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

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

const plus7 = plus(7);
console.log(plus7(8));

 

결과

 

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

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

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

 

결과