학습내용
자바스크립트
- 배열의 메서드
forEach
map
filter
reduce
- JSON 통신
공통적인 매개변수 : 콜백함수(대부분 익명함수 사용)
배열의 갯수만큼 함수를 실행 (=
for
문)
const testArr = [1, 2, 3, 4, 5, 6, 7, 8];
testArr.forEach((item) => console.log(item));
> 1
2
3
4
5
6
7
8
💡 화살표 함수의 경우 출력값이 한 줄로 표현 가능하다면 {중괄호}
생략 가능
return
결과를 모아서 새로운 배열 생성
예제➀
const mappedArr = testArr.map(function(item) {
return item;
});
console.log(mappedArr);
> [ 1, 2, 3, 4, 5, 6, 7, 8 ]
예제➁
const mappedArr2 = testArr.map((item) => item * 2);
console.log(mappedArr2);
> [ 2, 4, 6, 8, 10, 12, 14, 16 ]
조건에 부합하는 값을 모아서 새로운 배열 생성
const filteredArr = testArr.filter((item) => {
if (item > 5) {
return item;
}
});
console.log(filteredArr);
> [ 6, 7, 8 ]
+ 간단하게 쓰기 : 삼항연산자
const filteredArr = testArr.filter((item) => (item > 5 ? item : null));
++ 더 간단하게 쓰기 : null 병합 연산자
const filteredArr = testArr.filter((item) => (item > 5 ?? item));
map과 filter의 차이점
조건 미부여시
map()
은[ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]
를 반환하지만filter()
는 빈배열[]
을 반환한다. 즉,map()
은 무조건 무언가를 반환한다는 것을 알 수 있다.
누적 연산. 세 개의 매개변수(
누적값
,현재값
,인덱스
)를 받는다.
const testArr = [1, 2, 3];
testArr.reduce((acc, cur, idx) => {
console.log("누적값", acc);
console.log("현재값", cur);
console.log("인덱스", idx);
return (acc = acc + cur);
}, 0);
누적값 0
현재값 1
인덱스 0
누적값 1
현재값 2
인덱스 1
누적값 3
현재값 3
인덱스 2
💡 중괄호 뒤에 오는 0
은 초기값으로 미설정시 인덱스가 1
부터 시작한다.
💡 return
미설정시 누적값을 반환하지 않는다.
객체 형태로 구조화된 JSON의 특성상 자바스크립트 기반의 웹 브라우저에서는 가장 효율적인 서버 통신 방법으로 알려져 있다. 단, JSON은 Promise 객체에 해당, 즉 비동기 통신이기 때문에 통신 이후 일어날 일들에 대한 메서드를 보유하고 있다.
메서드
- 통신 성공시
then
- 매개변수 : 콜백함수
- 콜백함수의 매개변수 : 통신 성공시 응답값(
response
)
- 통신 실패시
catch
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json());
이때 then
은 통신에 대한 then
으로 response
는 url로부터 받아온 모든 데이터가 포함된 Promise 객체이다. body
정보만을 추출하기 위해선 body
정보를 Promise 형태의 객체로 가져오는 .json
을 사용한다.
fetch()
서버와 요청 및 응답이 가능한 메서드로 Promise 형태의 객체를 return한다.
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((data) => console.log(data));
그러나 body
데이터를 가져오기기 위해선 다시 한 번 .then
을 사용해야 한다. response.json()
역시 비동기 통신에 해당되므로 통신 이후의 작업들을 처리해야 하기 때문이다. 이때의 .then
은 response.json()
를 수행한 결과이며 data
는 body
정보이다.
최종적으로 필요한 정보는 data
이지만 서버에서는 포괄적인 정보를 제공하기 때문에 위와 같은 과정을 거치는 것이다.
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((data) => {
const ulTag = document.createElement("ul");
document.querySelector("body").appendChild(ulTag);
let liTag;
for (item of data) {
liTag = document.createElement("li");
ulTag.appendChild(liTag);
liTag.textContent = item.title;
}
});
위와 같이 서버에서 요청한 데이터를 DOM 객체로 화면에 출력할 수도 있다.