[Java Script] Array 내장 객체, Spread Operator, Destructuring, Promise, Async / Await

Array 내장 객체

1. filter()

: 특정 조건을 만족하는 배열의 요소만을 찾아서 새로운 배열로 반환하고, 배열을 사용할 때 가장 많이 사용된다.

filter 함수의 매개변수에는 특정 조건을 체크할 callback() 함수가 있고, 이 함수는 배열의 각 요소를 시험할 함수이다.

정확히는 true인 요소만을 찾아냅니다.

• element : 처리할 현재 요소
• index(optional) : 처리할 현재 요소의 인덱스
• array(optional) : 배열 전체

-> 위와 같은 형태로 사용할 수 있다.

 

2. map()

: 배열의 데이터가 Object 형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환한다.

-> 위와 같이 함수를 사용할 수 있다.

만약 데이터베이스에는 firstName과 lastName이 분리돼 있지만 실제 화면에서는 firstName, lastName을 같이 보여주고 싶을 때 map() 함수를 쓰면 효율적이다.

userList2에서 email 요소를 제거함

또한 배열에 담긴 Object 요소가 실제 클라이언트에서 필요로 하는 것보다 훨씬 많을 때 map() 함수를 통해 클라이언트에서 사용할 데이터만 새로 정의하면 네트워크 트래픽을 줄일 수 있다.

 

Spread Operator

: 배열, 문자열과 같이 반복(iteration) 형태의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해 준다.

 

Destructuring

1. Object

: 저장된 데이터를 분해해서 필요한 데이터만 바로 추출해서 사용할 수 있게 한다.

2. Array

: 배열에 저장된 요소를 분해해 배열의 순서에 따라 변수를 정의할 수 있게 해준다.

내가 지정한 변수명으로 설정할 수 있어서 어떤 데이터인지 바로 확인이 가능하고, 위도, 경도 데이터를 반환받을 때 많이 사용된다.

위와 같이 배열에 반환하는 데이터가 많은 경우 특정 요소는 바로 변수에 할당 후 나머지 요소는 모두 배열에 할당하는 것도 가능하다.

+ 배열 안에 배열이 있는 경우도 Array Destructuring을 사용할 수 있다.

 

Promise

: JS에서 비동기 처리 (특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해 주는 방식)에 사용되는 객체이다. -> 파일 쓰기, DB 트랜잭션 (조회, 생성, 수정, 삭제 등)

then() 함수를 통해 그 결과에 대한 코드를 실행할 수 있게 해준다.

-> new 생성자 함수를 사용해 생성하고, 요청에 대한 응답에 성공 시 resolve() 함수에 결과 전달, 실패 시 reject() 함수에 에러 전달

 

Async / Await

: Promise와 동일한 목적으로 사용된다. async는 비동기로 실행을 뜻하고, await은 비동기를 실행하는데 결과가 올 때까지 기다리겠다는 의미이다.

-> 같은 스코프에서 결과 값을 관리할 수 있기 때문에 훨씬 효율적이다.

await을 사용하는 코드가 작성된 함수는 반드시 async여야 한다.

---

비동기 처리 제대로 배워봐야겠다 아직 잘 모르겠습

그리고 코드를 더 효율적이게 짤 수 있는 방법을 알게 됐당