최신 자바스크립트 함수 사용법(ES6버전 기준)

자바스크립에서 함수를 사용하는 방법이다.

 

 

 

function a() {
    console.log("a");
};
a();

function a()는 일반적인 함수 모양이고 a(); 는 자바스크립트 함수를 실행시키는 방법이다.

 

자바스크립트에서는 함수의 모양을 아주 다양하게 사용할 수 있다. 

예를 들면 함수 안에 함수를 넣을 수 있다.

function b(c) {
    console.log("123");
    c();
}
 
b(function c() {
    console.log("1234")
});

결과는 

123

1234

 

함수 안에 함수를 쓸수 있다. 이처럼 변화 무쌍하게 사용할 수 있다.

그리고 es6버전에 와서는 더 간단하게 함수를 표현할 수 있다.

화살표 함수라는 것이다.

function a() {
    console.log("a");
};
//화살표함수로 바꾸면
const a = ()=>{
console.log("a")
};
 
//만약 함수 내용이 한줄이라면 더 {}도 생략 가능하다.
const b = () => console.log("1234")

 

그러나 화살표 함수의 치명적인 약점이 있으니 일반 함수와 this사용법이 다르다.

원래 this가 함수 안에서 사용되면 함수 안에 있는 값을 참조하게 된다.

그러나 화살표 함수를 쓰면 this는 window객체를 사용한다.

 

window.name = 'kim';
 
 
 
const obj = {
    name: 'Lee',
    names: function () {
        console.log(`my name is ${this.name}`);
    }
};
obj.names();

결과는 my name is Lee

화살표 함수를 쓰면

 

window.name = 'kim';
 
 
 
const obj = {
    name: 'Lee',
    names: () => {
        console.log(`my name is ${this.name}`);
    }
};
obj.names();

window.name = 'kim';
 
 
 
const obj = {
    name: 'Lee',
    names() {
        console.log(`my name is ${this.name}`);
    }
};
obj.names();

이렇게 하면 결과는 my name is Lee이다.

 

 this를 윈도우 객체로 하려면 화살표 함수를 객체 안의 값을 사용하려면 function을 사용하나거나 

생략하는 방법을 사용하는 것이 좋다.