[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션

함수를 만드는 또한가지 방법

const hello = new Function();

생성자로 함수를 만드는 방법

생성자 함수 new function으로생성하여 특정변수 hello에 할당하는 방법이다.

잘 쓰이는 방법은 아니다.

const sum = new Function('a', 'b','c','return a + b + c');//매개변수와 body가 문자열형태로 들어감
console.log(sum(1,2,3));

선언적 함수 방식을 사용하는것이 아니기 때문에 hoisting 불가능함.

function 과 new Function(); 의 차이점

{
    const a = 1;
    const test = new Function('return a');
// 여기 까지만 보면 a = 1 의 값을 new Function 함수가 리턴 할 것같지만.

    console.log(test());
}

막상 실행해보면 오류가 발생한다.
new Function 의 변수가 상위 스코프 a = 1 에 접근할 수 없다는 것.

global.a = 0;
{
    const a = 1;
    const test = new Function('return a');
// 여기 까지만 보면 a = 1 의 값을 new Function 함수가 리턴 할 것같지만.

    console.log(test());
}
{
    const a = 2;
    const test = function(){
        return a;    // 이 익명함수의 return a 는 global.a를 뜻하지 않고 상위 a=2를 의미한다.
    };
    console.log(test());
}

arrow function

( ) => {}

1. arrow function을 만들어 이름이 hello1인 변수에 할당

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

이는 선언적 방식으로 사용할 수 없다.

익명함수를 특정변수에 담아 사용하는 형태이다.

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

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

3. 매개변수가 여럿일 때

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

4. 함수의 리턴

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

//이걸 더 간략화 한 줄인 경우

cosnt hello5 = name => `hi5 ${name}`;

new 함수();

생성자 함수

다른 언어들은 클래스를 이용해 프로퍼티가 똑같은 객체를 만들 수 있습니다. 하지만 자바스크립트에는 클래스가 없다. 그 대신에 new 연산자를 통해서 객체를 생성한다

[자세히]

생성자 함수를 이용하여 새로운 객체를 생성

function Person(name, age){
    this.name = name;
    this.age = age;
    //인자로 넣어준 name과 age를 객체가 프로퍼티로 가질 수 있게 함
}

const p = new Person('jiwon', 25);
console.log(p, p.name, p.age);

const a = new Person('Tom', 25);
console.log(a, a.name, a.age);

이렇게 사용할 수 있는것은.

Person이라는 function에서 this라는 컨텍스트를 만들어내기 때문이다.

this는 객체가 만들어졌을때 그 객체를 가리키는 역할을 하고있다.

하지만 arrow function에서는 함수내에 this가 생기지 않기 때문에

arrow function 는 새로운 객체를 만들어내는 생성자함수로 사용할 수 없다.

const Cat = (name, age) => {
    console.log(this);
    this.name = name;
    this.age = age;
}
const c = new Cat('야옹이', 1);

실행시켜 보면 에러나는 것을 확인할 수 있다.

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

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

const plus5= plus(5);
//여기 까지만 보면 plus 함수의 매개변수인 base에 5가들어간 형태로
//return function의 base 이 5인상태이다.
console.log(plus5(10));
//여기에서 n으로 매개변수값이 넘어감

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

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

hello(function(){
    console.log('call back');
});

hello 함수가 실행되면서 console.log()가 실행되고 매개변수로 넘어온 function(){ console.log('call back'); }

이 c()에 의해 실행되며 hello 와 call back 이 실행된다.

 

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스