1.1 화살표함수의 기본 선언

티스토리 뷰

javascript/모던 자바스크립트

1.1 화살표함수의 기본 선언

댕댕이발🐾 2018. 11. 28. 14:12

첫 번째로 화살표 함수에 대해서 알아보고자 합니다. 제가 ES6 문법을 접했을 때 가장 먼저 본 녀석 중에 하나 입니다. 기존의 자바스크립트에서도 그랬고, c언어나 자바에서도 함수라던지 반복문같은 하나의 덩어리의 프로세스는 늘 중괄호로 묶는 방법이었습니다.

그런데 ES6에서 화살표 함수라는 것이 등장하게 되었습니다.

❓어떻게 생겨먹었는가??

기존의 함수작성방식과 비교해서 알아보겠습니다. 웹 상에서 크롬 개발자도구를 이용해서 테스트를 진행하겠습니다.

html 폼을 하나 만들어서 자바스크립트 파일을 호출해서 작성하셔도 되고 그냥 크롬 페이지에서 직접 작성해도 상관 없습니다.

arrow.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
 
<head>
    <title>Arrow</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="arrow.js"></script>
</body>
 
</html>
cs

이런 식으로 arrow.js 파일을 호출하는 아무 것도 없는 html 폼을 만들어서 진행해보겠습니다.

arrow.js

1
2
3
4
function arrow() {
    console.log('arrow')    
}
arrow();
cs

이게 우리가 기존에 아는 함수의 작성과 호출방법입니다. 해당 코드를 작성하고 크롬 개발자도구에서 콘솔을 확인한다면

이런식으로 나오겠죠? 함수를 말로써 설명한다면 arrow라는 이름의 함수가 있는데 해당 함수를 호출하면 arrow라는 콘솔이 찍히는매우 간단한 내용이죠 화살표함수로 바꿔서 작성해보겠습니다.

1
2
3
4
var arrow = ()=>{
    console.log('arrow')
}
arrow()
cs

차이점은 일단 function 라는 단어를 쓰지 않고 함수명도 존재하지 않습니다. 그래서 함수를 외부에서 호출하기 위해 함수를 변수에 담아서 호출을 해주어야 합니다. 지금은 함수가 워낙 짧아서 가독성의 차이가 전혀 느껴지지 않지만 비교를 위해 다른 코드를 예를 들어보겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function boardSearchFunction(opt,word,callback) {
    let res = {'res':'null'}
    if(opt.opt=='작성자'){
        models.User.findAll({
            where:{name:word.word}
        }).then(function(user){
            models.Board.findAll({
                where:{fk_userId: user[0].dataValues.id}
            }).then(function(user){
                callback(user)
            })
        }).catch(function(err){
            callback(res)
        })
    }
    else if(opt.opt=='제목'){
        let i = 0
        let names=[]
        models.Board.findAll({
            where: {subject:word.word}
        }).then(function(board){
            if(board.length==0)
                callback(res)
            board.forEach(function(element){
                models.User.findAll({
                    where: {id: element.dataValues.fk_userId}
                }).then(function(user){
                    names[i] = {'name':user[0].dataValues.name}
                    i++
                    if(board.length==i)
                        callback(board,names)
                })
            })
        }).catch(function(err){
            callback(res)
        })
    }
    else
        callback(res)
}
Colored by Color Scripter
cs

이런 함수가 있다고 가정해보겠습니다. 함수가 어떻게 작동하는 지 보려고 하는게 아니라 함수 작성방식을 바꿨을 때 어떻게 보이는지 확인하기 위함 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var boardSearchFunction => (opt,word,callback) {
    let res = {'res':'null'}
    if(opt.opt=='작성자'){
        models.User.findAll({
            where:{name:word.word}
        }).then((user)=>{
            models.Board.findAll({
                where:{fk_userId: user[0].dataValues.id}
            }).then((user)=>{
                callback(user)
            })
        }).catch((err)=>{
            callback(res)
        })
    }
    else if(opt.opt=='제목'){
        let i = 0
        let names=[]
        models.Board.findAll({
            where: {subject:word.word}
        }).then((board)=>{
            if(board.length==0)
                callback(res)
            board.forEach((element)=>{
                models.User.findAll({
                    where: {id: element.dataValues.fk_userId}
                }).then((user)=>{
                    names[i] = {'name':user[0].dataValues.name}
                    i++
                    if(board.length==i)
                        callback(board,names)
                })
            })
        }).catch((err)=>{
            callback(res)
        })
    }
    else
        callback(res)
}
Colored by Color Scripter
cs

일단 기본적으로 function 단어 자체가 모두 사라지고 화살표 => 로 바뀐 것을 볼 수 있습니다. 엄청나게 간결 해졌다고 하기는 어려울 수도 있겠지만 화살표 함수를 사용하는 하나의 이유이기도 합니다.

위에서 말했다시피 화살표함수는 반드시 익명함수 로만 사용할 수 있습니다. 그렇기때문에 함수명이 필요하지 않은 콜백함수로 사용하기에 아주 좋죠. 위에 코드도 콜백함수를 화살표함수로 바꿨기때문에 특별한 제약없이 자유롭게 사용할 수 있었습니다.

기본적인 선언의 형태를 살펴보았는데 화살표 함수의 특징에는 이런 것들이 있습니다.

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다.

(출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98)

이 부분은 다음 포스팅에서 살펴보도록 하겠습니다.

저작자표시

'javascript > 모던 자바스크립트' 카테고리의 다른 글

2.2 class의 기본 선언 (0)	2018.12.05
2.1 classes 이전 prototype (0)	2018.12.03
1.3 화살표 함수에서의 arguments (0)	2018.12.03
1.2 화살표함수에서의 this (2)	2018.11.29
ECMAScript 6 튜토리얼 소개 (0)	2018.11.28

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

T3ch

티스토리 뷰

1.1 화살표함수의 기본 선언

'javascript > 모던 자바스크립트' 카테고리의 다른 글

티스토리툴바