안녕하세요. 혀코 입니다.
오늘은 Node.js에서 Arrow function을 사용하는 방법에 대해서 알아보겠습니다.
#1
숫자 하나를 받아서 그 숫자의 제곱을 구하는 일반적인 함수를 구현해 보겠습니다.
const square = function (x) {
return x * x
}
console.log(square(3))
위의 일반 함수를 Arrow function으로 나타내면 다음과 같이 작성할 수 있습니다.
const square = (x) => {
return x * x
}
console.log(square(3))
또한 아래처럼 return 키워드 없이 한줄로 작성할 수 있습니다.
const square = (x) => x * x
console.log(square(3))위와같이 작성된 코드의 결과는 의도했던 것 처럼 모두 9가 표시가 됩니다.
#2
이번에는 object에서 method를 정의할 때 Arrow function을 어떻게 써야 하는지 알아보겠습니다.
app.js를 다음과 같이 작성합니다.
const event = { //event 변수에 object를 지정
name: 'Birthday Party', // property
printGuestList: function () { // method를 정의
console.log('Guest list for ' + this.name)
}
}
event.printGuestList()이렇게 작성한 후에 다음 명령어를 실행하면,
$ node app.jsGuest list for Birthday Party 가 정상적으로 표시되는 것을 확인할 수 있습니다.
이번에는 object의 method를 정의할 때 Arrow function을 사용해보겠습니다.
const event = { //event 변수에 object를 지정
name: 'Birthday Party', // property
printGuestList: () => { // method를 정의
console.log('Guest list for ' + this.name)
}
}
event.printGuestList()이렇게 작성한 후에 다음 명령어를 실행하면,
$ node app.jsGuest list for undefined 로 this.name을 인식하지 못하고 표시되는 것을 확인할 수 있습니다.
object에서 method를 정의할 때는 다음과 같이 Arrow function이 아닌 일반 함수형태로 사용해야 같은 object내의 다른 property의 값을 가져올 수 있습니다.
const event = { //event 변수에 object를 지정
name: 'Birthday Party', // property
printGuestList() { // method를 정의
console.log('Guest list for ' + this.name)
}
}
event.printGuestList()
이번에는 list 형태를 갖는 다른 property를 추가하고 forEach 를 사용해서 그 list를 표시해 보겠습니다.
const event = { //event 변수에 object를 지정
name: 'Birthday Party', // property
guestList: ['Hyuk','Jina','Michael']
printGuestList() { // method를 정의
console.log('Guest list for ' + this.name)
this.guestList.forEach(function (guest){
console.log(guest + ' is attending ' + this.name)
})
}
}
event.printGuestList()아래 명령어를 실행하면,
$ node app.js아래와 같이 this.name 을 인식하지 못하고 undefined로 표시가 되는 것을 확인할 수 있습니다.
Guest list for Birthday Party
Hyuk is attending undefined
Jina is attending undefined
Michael is attending undefined그 이유는 this의 scope이 forEach 함수 안에 국한되기 때문입니다.
const event = { //event 변수에 object를 지정
name: 'Birthday Party', // property
guestList: ['Hyuk','Jina','Michael']
printGuestList() { // method를 정의
console.log('Guest list for ' + this.name)
this.guestList.forEach((guest) => {
console.log(guest + ' is attending ' + this.name)
})
}
}
event.printGuestList()이것을 바로잡기 위해서 Arrow function으로 사용하면 this의 scope이 printGuestList 함수까지 적용되어 정상적으로 this.name을 인식하는 것을 확인할 수 있습니다.
$ node app.jsGuest list for Birthday Party
Hyuk is attending Birthday Party
Jina is attending Birthday Party
Michael is attending Birthday Party
#3
이번에는 Tasks objects에서 method를 정의하면서 Arrow function을 사용하는 방법에 대해서 알아보겠습니다.
app.js를 다음과 같이 작성합니다.
const tasks = {
tasks: [{
text: 'Grocery shopping',
completed: true
},{
text: 'Clean yard',
completed: false
},{
text: 'Film course',
completed: false
}],
getTaskToDo: function () { // method를 정의할때는 Arrow function을 사용하지 않는다.
const tasksToDo = this.tasks.filter((task) => {
return task.completed === false
})
return tasksToDo
}
}
console.log(tasks.getTaskToDo())위 코드는 아래와 같이 ': function '을 삭제하여 아래와 같이 작성해도 됩니다.
const tasks = {
tasks: [{
text: 'Grocery shopping',
completed: true
},{
text: 'Clean yard',
completed: false
},{
text: 'Film course',
completed: false
}],
getTaskToDo() { // method를 정의할때는 Arrow function을 사용하지 않는다.
const tasksToDo = this.tasks.filter((task) => {
return task.completed === false
})
return tasksToDo
}
}
console.log(tasks.getTaskToDo())다음 명령어를 실행하면,
$ node app.js아래와 같이 의도한대로 완료하지 못한 작업 리스트가 표시됩니다.
[
{ text: 'Clean yard', completed: false },
{ text: 'Film course', completed: false }
]
method를 정의하는 것은 Arrow function을 사용하지 못하지만, 그 내부에서는 Arrow function을 사용해도 괜찮습니다.
그래서 위의 코드를 Arrow function을 사용해서 축약해서 아래와 같이 작성 가능합니다.
const tasks = {
tasks: [{
text: 'Grocery shopping',
completed: true
},{
text: 'Clean yard',
completed: false
},{
text: 'Film course',
completed: false
}],
getTaskToDo() { // method를 정의할때는 Arrow function을 사용하지 않는다.
return this.tasks.filter((task) => task.completed === false) // 내부에서는 Arrow function을 사용해도 괜찮다.
}
}
console.log(tasks.getTaskToDo())
이렇게 Node.js에서 Arrow function을 사용하는 방법에 대해서 알아보았습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글