JS의 forEach / map / delete, 예외처리, 기존 코드 리팩토링 , http 응답코드에 대해

forEach / map / delete

Javascript 배열 혹은 객체에서 사용할 수 있는 메서드들.

forEach

배열의 각 요소에 대해 한 번씩 제공된 콜백 함수를 실행하는 메서에요.

array.forEach((element, index, array) => {
  // 실행할 작업
});

const numbers = [1, 2, 3];

numbers.forEach((num) => {
  console.log(num * 2); // 2, 4, 6 출력
});

forEach는 반환값이 존재하지 않아요.
콜백함수의 첫 번째 매개변수는 value, 두 번째 매개변수는 index, 세 번째는 객체 통째로 가져와요

배열의 모든 요소에 대해 반복하면서, 내부 요소를 변경하거나 하는 등의 동작을 수행하는 데 사용합니다.

• 해당 메소드를 사용해 전체 조회 api를 만들었어요.

map

배열의 각 요소를 순회하며 콜백 함수를 실행한 결과로 새 배열을 생성하는 메서드에요.

const newArray = array.map((element, index, array) => {
  return // 반환할 값
});
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]

Map은 원본 배열을 변경하지 않고 새로운 배열을 반환해요.
콜백함수의 첫 번째 매개변수는 value, 두 번째 매개변수는 key, 세 번째는 객체 통째로 가져와요.

delete

delete object.property;
delete array[index];

객체의 속성을 제거하거나 배열의 특정 요소를 삭제하는 데 사용해요.

delete로 배열 요소를 지워버리면, 배열의 전체 크기는 유지되고 삭제 지점만 undefined로 처리된다.

그래서 다른 기능과 연결되어있는 배열에 잘못 사용하면 undefined 형식으로 인해 에러가 발생할 위험성도 커지니 주의해야한다.

const obj = { name: "Alice", age: 25 };
delete obj.age;
console.log(obj); // { name: "Alice" }

객체는 깔끔하게 처리되지만

const numbers = [1, 2, 3];
delete numbers[1];
console.log(numbers); // [1, undefined, 3]

배열은 멀쩡하던 데이터 사이에 undefined가 하나 박히는 셈이 되어버린다.

const numbers = [1, 2, 3];
numbers.splice(1, 1); // 1번 인덱스의 1개 요소 제거
console.log(numbers); // [1, 3]

배열의 요소를 삭제하고 싶다면, delete보다는 splice가 적합해요.

에러처리

삭제를 구현할 때 만약 조회한 id로 찾은 유튜버가 없다면 404를 반환하게 했어요.
서버가 오류를 내면서 죽는 게 아니라 에러를 반환하게 하면 클라이언트와 백엔드 간에 올바른 협업을 할 수 있게 해요.

리팩토링

구현한 코드의 기능에 변화가 있는 것은 아니지만, 코드의 가독성이나 유지보수성을 위해 구조를 변경하는 것이에요.
처음부터 모든 걸 고려하고 개발할 수 없으니, 코드가 어느정도 완성되었을 때부터 리팩토링하면 돼요.

http 상태코드

출처: https://hongong.hanbit.co.kr
올바른 상태코드를 코드에 맞춰 사용하는 것이 협업에 매우 중요해요.

전체 삭제 api

// 전체 유튜버 삭제
app.delete('/youtubers', (req, res) => {
    if (db.size === 0) return res.status(404).send('Not Found');
    db.clear();
    res.json({
        message: '전체 유튜버 삭제 완료',
    });
})

예외처리를 배웠으니 이제 db에 유튜버가 없다면 에러를 처리할 수 있도록 했어요.

Update Api

이제 put을 구현할텐데, 기존에 작성한 코드와 비슷해요.

// 유튜버 정보 업데이트
app.put('/youtubers/:id', (req, res) => {
    const id = parseInt(req.params.id);
    const youtuber = db.get(id);
    if (!youtuber) return res.status(404).send('Not Found');
    const oldChannelTitle = youtuber.channelTitle;
    db.set(id, req.body);
    const channelTitle = req.body.channelTitle;
    res.json({
       message: `${oldChannelTitle} 채널 이름이 ${channelTitle}로 변경되었습니다.`
    });
})