4주차 foreach, map 함수/ delete와 put
foreach
: 원래 배열을 사용하기 위해 만들어짐
- 콜백함수 : 전달 받은 객체 또는 배열에서 요소를 하나 꺼낸 다음 불림
- 매개변수 순서 : 요소, 인덱스, 객체 통째로
arr.forEach(function (value, index, array) {
console.log(value, index, array);
});
➜ 결과
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
- map과 함께 사용하기 / map에서 값을 하나씩 가져올 수 있음!
let map = new Map();
map.set(7, "seven");
map.set(9, "nine");
map.set(8, "eight");
map.forEach((value, index, array) => {
console.log(value, index, array);
});➜ 결과
seven 7 Map(3) { 7 => 'seven', 9 => 'nine', 8 => 'eight' }
nine 9 Map(3) { 7 => 'seven', 9 => 'nine', 8 => 'eight' }
eight 8 Map(3) { 7 => 'seven', 9 => 'nine', 8 => 'eight' }
map : 객체 아니고 함수 알아보기
map vs foreach
// map 함수 (메서드) vs foreach 차이
const arr = [1, 2, 3, 4, 5];
arr.forEach(function (value, index, array) {
console.log(value, index, array);
});
console.log("=============================");
arr.map(function (value, index, array) {
console.log(value, index, array);
});➜ 결과
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
=============================
1 0 [ 1, 2, 3, 4, 5 ]
2 1 [ 1, 2, 3, 4, 5 ]
3 2 [ 1, 2, 3, 4, 5 ]
4 3 [ 1, 2, 3, 4, 5 ]
5 4 [ 1, 2, 3, 4, 5 ]
두 함수의 차이 = return 값
// map 함수 (메서드) vs foreach 차이
const arr = [1, 2, 3, 4, 5];
const foreachArr = arr.forEach(function (value, index, array) {
return value * 2;
});
console.log(arr);
const mapArr = arr.map(function (value, index, array) {
return value * 2;
});
console.log(arr);
console.log(foreachArr, "\n", mapArr);➜ 결과
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]
undefined
[ 2, 4, 6, 8, 10 ]
- 두 함수 실행 후에도 본 배열은 그대로
- 요소 계산 후 return 하면 map 함수만 제대로 반환해줌
리-팩토링
: 소프트웨어의 코드 내부(구조)를 변경하는 것
- 이해하기 쉽게
- 성능
- 안정성 등등
나쁜 코드 뜯어고쳐서 클린코드 만들기
언제?
- 에러(문제점이 ) n회 발견됐을 때
- 리팩토링을 하면서, 에러(문제점)을 발견할 수 있다.
- 기능을 추가하기 전
- ex) API URL "설계" 수정
- 코드 리뷰할 때
하면 안되는 시점!!!!! -> 배포, 운영 직전 절대!! 안 됨
delete
api 설계 추가
3) 개별 유튜버 "삭제" => DELETE /youtubers/:id
- req : params.id
- res : "000님, 다음에 또 뵙겠습니다."
app.delete("/youtubers/:id", (req, res) => {
let id = parseInt(req.params.id);
const name = req.params.channelTitle;
db.delete(id);
res.json({
message: `${name}님, 다음에 어쩌구저쩌구우우`,
});
});
예외처리 -> 프로그램의 안정성 확보
app.delete("/youtubers/:id", (req, res) => {
let id = parseInt(req.params.id);
const name = db.get(id).channelTitle;
console.log(db.get(id));
const youtuber = db.get(id);
if (youtuber == undefined) {
res.json({
message: "없는 계정임",
});
} else {
res.json({
message: `${name}님, 다음에 어쩌구저쩌구우우`,
});
}
db.delete(id);
console.log(name);
});- 위 코드는 에러가 난다 -> map에 없는 행에 대한 요소를 가져오면 아예 오류인것 같다 (undefined도 반환 못함 - 이렇게 적어보니까 당연한것 같네,,,?)
그래서 else 안으로 name 변수를 옮김
app.delete("/youtubers/:id", (req, res) => {
let id = parseInt(req.params.id);
console.log(db.get(id));
const youtuber = db.get(id);
if (youtuber == undefined) {
res.json({
message: "없는 계정임",
});
} else {
const name = db.get(id).channelTitle;
res.json({
message: `${name}님, 다음에 어쩌구저쩌구우우`,
});
}
db.delete(id);
console.log(name);
});요래 하니까 잘 돌아감
전체 유튜버 삭제 업데이트하기
4) 전체 유튜버 "삭제" => DELETE /youtubers
- req : X
- res : "전체 삭제"
// delete 전체
app.delete("/youtubers", (req, res) => {
if (db.size >= 1) {
db.clear();
res.json({
message: "전체 삭제",
});
} else {
res.json({
message: "삭제할 유튜버 없다",
});
}
});- size()함수를 이용해 map에 데이터가 담경 있는지 확인함
PUT
api 설계 추가
5) 개별 유튜버 "수정" => PUT /youtubers/:id
- req : params.id, body <= channelTitle
- res : "(이전)000님, 채널명이 000로 변경되었습니다."
//put
app.put("/youtubers/:id", (req, res) => {
let id = parseInt(req.params.id);
let youtuber = db.get(id); // map에서 id에 해당하는 값인 객체 자체
let oldTitle = youtuber.channelTitle;
//console.log(youtuber);
if (youtuber == undefined) {
res.json({
message: "없는 채널",
});
} else {
var newTitle = req.body.channelTitle; //postman을 이용해 전달가능!
youtuber.channelTitle = newTitle;
//수정은 set함수를 이용해 덮어쓰기
db.set(id, youtuber); // map의 키값과 value는 객체이므로 객체 자체를 전달!
res.json({
message: `${oldTitle}님, 채널명이 ${newTitle}로 변경되었습니다.`,
});
}
});