[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를 사용할 때는 차이가 존재하므로 이 점을 주의하여 사용하여야 한다.
'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 |
댓글