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)
}
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)
}
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)


이 뢀뢄은 λ‹€μŒ ν¬μŠ€νŒ…μ—μ„œ μ‚΄νŽ΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

μ €μž‘μžν‘œμ‹œ (μƒˆμ°½μ—΄λ¦Ό)