본문 바로가기
Programming/Javascript

[JavaScript] 일반 함수(Normal Function) VS 화살표 함수(Arrow Function)

by 주리니e 2022. 10. 25.
728x90

[JavaScript] 일반 함수(Normal Function) VS 화살표 함수(Arrow Function)

 

EC6 문법부터 추가된 화살표 함수(Arrow Function)를 이용하여 일반 함수(Normal function)를 대체하여 사용해보고 그 차이는 무엇인지 어느 상황에 맞춰 무엇을 선택하여 사용할지에 대해 알아보자.


  • 일반 함수(Normal Function) 사용방법

JavaScript에서는 아래와 같이 함수를 사용할 수 있다. 함수를 선언하기도 하고 변수에다가 함수를 등호기호(=)로 넣어서 함수를 만들 수 있다.

<body>
    <h1>Hello JAVASCRIPT</h1>
    <script>
       function aaa() {
            console.log('aaa');
        }
 
        var bbb = function (param1, param2) {
            return param1 + param2 + 5;
        }
        
        aaa();
        console.log(bbb(10, 20));
    </script>
</body>

 

  • 화살표 함수 (Arrow Function)

function 키워드 대신에  => 를 이용하여 아래와 같이 함수를 표현할 수 있다.

var ccc = () => {
    console.log('ccc');
}
 
 
var ddd = (param1, param2) => {
    return param1 + param2 + 5;
}
 
ccc();
console.log(ddd(10, 20));


Parameter가 1개 인경우 아래와 같이 소괄호를 생략할 수 있다.

var eee = param1 => {
    return param1 + 5;
}
 
console.log(eee(10));


return문이 1줄인 경우 return 키워드와 중괄호를 생략할 수 있다.

var eee = param1 => param1 + 5;
console.log(eee(10));

 

  • 일반 함수(Normal Function)  VS 화살표 함수 (Arrow Function)

Javascript에는 Window라는 global object가 존재하는데 내부적으로는 Javscript 내부에 선언된 변수나 obejct들을 다 포함하고 있다. 그래서 script 내부에서 this 객체를 이용하여 출력해보면 다음과 같이 확인할 수 있다. 그래서 this를 찍어보면 상위 object인 Window를 출력하며 this.aaa 또한 출력이 가능하다.

var aaa = 1;
 
console.log(this);
console.log(this.aaa);
console.log(aaa);


아래코드는 object 안에 object 를 선언하고 그 안에 일반 함수(Normal Function)과 화살표 함수(Arrow Function) 를 선언 후 this를 콘솔로 확인하였다. 일반 함수를 이용하였을 때는 상위 object인 aaa 객체의 내용을 콘솔로 보여주지만, 화살표 함수의 경우에는 최상위 객체인 Window object의 내용을 보여준다. 그 결과 값으로 'name' 을 출력했을 때 jiurinie와 javascript로 다르게 출력하는 것을 확인할 수 있다.

var name = 'javascript'
 
var aaa = {
    name : 'jiurinie',
    normal : function(){ 
        console.log(this);
        console.log(this.name); 
    }
}
aaa.normal();
 
var bbb = {
    name : 'jiurinie',
    arrow : () => {
        console.log(this);
        console.log(this.name); 
    }
}
bbb.arrow();

이렇게 기존에 사용해온 일반 함수(Normal Function)와 ES6에서부터 사용할 수 있는 화살표 함수(Arrow Function)를 사용해보았다. 사실 일반 함수를 화살표 함수로 대체하여 사용하는데는 크게 무리가 없을 것 같다. 허나 object 내부에 선언된 function의 this를 사용할 때는 차이가 존재하므로 이 점을 주의하여 사용하여야 한다.

728x90
저작자표시 비영리 변경금지

'Programming > Javascript' 카테고리의 다른 글

[JavaScript] 계층 구조 데이터에서 특정 노드 찾기  (0) 2023.06.09
[JavaScript] 변수 선언 var 대신 let, const를 사용해보자  (1) 2022.10.31
[JavaScript] Array의 sort(), filter(), map() 사용하기  (0) 2022.09.26
[JavaScript] Array와 Object 사용법과 차이  (1) 2022.09.21

관련글

댓글

티스토리툴바