[패스트캠퍼스 챌린지 9일차] ECMAScript(ES6) - Function Approach

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 9일차.

---

 

오늘 학습 내용은 Function을 활용한 데이터 처리.

이전 Javascript에서는 for문과 if문을 중첩하여 원하는 데이터를 처리했어야 하지만,

ES6에서는 다양한 function을 제공하기 때문에 복잡한 데이터를 처리하는데 많은 코드를 작성할 필요가 없다.

 

Function을 활용한 데이터 처리 실습

 

const data = [{
    "city" : "Seoul",
    "pet" : ["dog", "cat"]
	"age" : 40,
    "name" : "Tom"
}, {
    "city" : "Pusan",
    "pet" : "dog"
	"age" : 20,
    "name" : "Jane"
}, {
    "city" : "Seoul",
    "pet" : "cat"
	"age" : 30,
    "name" : "Bob"
}]

> 데이터 처리 실습 1

 

위에 Object에서 City 정보만 출력할 때 data라는 배열을 for문을 통해 하나씩 읽고,

그 안에서 city 값을 가져와서 출력해준다. 또한 중복을 제거하기 위해 분기 처리(if문)를 또 추가해야한다.

 

물론 쉽고 간편하게 코딩할 수 있지만 데이터가 많아지면 생산성 측면에서는 떨어질 수 밖에 없다.

ES6에서는 생산성을 위해 filter 함수를 통해 특정 조건에 부합하는 데이터를 조회하고,

map 함수를 통해 조회한 데이터를 Map 형태로 변경해준다.

 

그 결과

data.filter( d => {조건} ).map( d2 => d2.city)

for문과 if문이 난무하는 코드를 위에 코드처럼 간략히 작성하여 생산성을 높일 수 있다.

 

> 데이터 처리 실습 2

 

data에서 지역 별 애완동물의 수를 조회하는 경우에도 다양한 방법으로 코드를 작성할 수 있다.

앞서 말한것 처럼 for문과 if문을 중첩하여 코드를 작성할 수도 있지만,

ES6에서 제공하는 map, flatMap, reduce 함수들을 활용하여 작성할 수도 있다.

 

아직 ES6 문법에 익숙하지 않아 각 함수들이 뭐를 의미하고 어떻게 사용해야 하는지 명확히 알지 못하여

강의를 한번 더 들어보며 공부해야겠다.

 

실습 2는 함수를 어떻게 사용하는지 정도만 이해했다....

(아직 많이 부족함을 느꼈다.....ㅠㅠ)

---

 

첫번째 실습은 소스코드가 굉장히 직관적이고 이해하기 쉬운 반면,

두번째 실습은 기존 for/if 중첩 방식이 더 익숙하다 보니 함수형 방식의 소스코드 작성에 아직 어려움이 있었다.

그럼에도 함수형 방식으로 작성을 하는 것이 기존 방식보다 직관적이고, 이해하기 쉽다는 것을 알게되었다.

(역시 개발자라 소스코드를 직접 작성해보면서 느껴봐야 편리함을 안다.) 

 

Nodejs 강의에서는 ES6 문법을 활용하는 경우가 많아 비교적 간단히 알려줬지만, 강의를 한번 더 듣고 검색을 하면서

ES6가 지원하는 다양한 함수들과 문법에 대해 공부하고 익숙해져야겠다.

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 9일차 학습통계

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.