[자바스크립트 코딩의 기술] 5장

<자바스크립트 코딩의 기술>을 읽고 작성합니다.

5장 반복문을 단순하게 만들어라

화살표 함수(arrow function)로 반복문을 단순하게 만들어라

화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다.
또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호)

• 매개변수가 1개인 경우에는 괄호를 생략
• 매개변수가 없거나 2개 이상인 경우에는 괄호 필수

function greet(first, last) {
    return `안녕하세요, ${capitialize(first)} ${capitalize(last)}님`;
}
const greet = (first, last) => {
    return `안녕하세요, ${capitialize(first)} ${capitalize(last)}님`;
};

화살표 함수를 변수에 할당하지 않고 익명 함수로 사용할 수도 있다.

자바스크립트에서 함수를 다른 함수에 인수로 전달할 수 있다.
함수도 다른 형태의 데이터일 뿐이므로 인수로 전달하는 것은 매우 흔한 일이다.
원래 함수의 끝에서 실행하는 콜백함수를 인수로 받는 함수를 예로 들 수 있다.

applyCustomGreeting('mark', name => `안녕 ${name}!`;);

배열 메서드로 반복문을 짧게 작성하라

for for ... of 문을 덜 사용해야 하는 이유? 불필요할 정도로 어수선한 코드이므로!

배열 메서드는 불필요한 데이터를 배제한, 간결하고 예측 가능한 코드를 만드는 훌륭한 방법입니다.
배열 메서드를 두려워 하는 개발자도 있지만, 조금만 노력하면 배열 메서드를 빠르게 익힐 수 있고 코드도 크게 개선할 수 있습니다.

const team = [
    {
        name: ...,
        position: ...
    }
    ...
]

함수	동작	예시
map()	형태를 바꿀 수 있지만 길이는 유지	팀원의 이름을 가져옴
sort()	형태나 길이는 변경되지 않고 순서만 바꿈	알파벳순 정렬
filter()	길이를 변경하지만 형태는 바꾸지 않음	개발자만 선택
find()	배열을 반환하지 않고 한 개의 데이터 반환	팀의 관리자 탐색
forEach()	형태를 이용하지만 아무것도 반환하지 않음	모든 팀원에게 상여 지급
reduce()	길이와 형태를 바꾸는 것을 비롯해 무엇이든 처리	개발자와 개발자가 아닌 모든 팀원의 수 계산

map() 메소드로 비슷한 길이의 배열을 생성하라

map() 함수는 입력한 배열의 정보 중 한 조각을 받아 새로운 값을 반환한다.
때로는 정보의 일부를 반환하기도 한다. 또는 정보를 변형해서 새로운 값을 반환하기도 한다.
즉, 배열에 있는 한 가지 속성을 반환하거나 배열에 있는 값을 가져와서 다른 형식의 값을 반환한다.

// for
const instruments = [];
for (let i=0; i < band.length ; i++) {
    const instrument = band[i].instrument;
    instruments.push(instrument);
}

// map
const instruments = band.map(member => member.instrument);

map() 메소드는 원본 배열과 같은 길이의 배열을 생성하는 경우라면 모든 곳에 사용 가능하다.

filter()와 find()로 데이터의 부분집합을 생성하라

데이터의 형태는 유지하면서 전체 항목의 일부만 필요한 경우에는 filter()가 적합하다.

const scores = [30, 82, 70, 45];
function getNumberOfPassingScores(scores) {
    const passing = scores.filter(score => score > 59);
    return passing.length;
}
// 2

filter 함수는 true 또는 false를 반환하지만 최종적으로 반환되는 배열에는 실제 값이 담긴다.
즉, 각각의 점수를 한 번에 하나씩 검사하고, 반환값이 true인 경우에만 값을 그대로 유지한다.
또한 반환되는 배열은 원본의 배열 순서도 그대로 유지한다.
중요한 점은 항상 배열을 반환하며 조건에 일치하는 값이 없는 경우에도 배열을 반환한다는 것 이다.

배열에 조건과 일치하는 항목이 최대 1개라는 사실을 알고 있을 때는 find() 메소드가 유용하다.
참 또는 거짓 값을 반환하는 함수를 인수로 받고 배열의 항목에 전달한 함수로 평가하여 참 값을 반환하는 첫 번째 항목을 반환한다.
참 값을 반환하는 항목이 없다면 undefined를 반환한다.

▶️ 반복문에서 break문을 사용하는 경우가 find를 사용하기에 적합한 경우!

변수 하나만 인수로 받을 수 있으므로 두 번째 인수를 추가해야 할 경우에는 커링이라는 기법을 사용한다.

forEach()로 동일한 동작을 적용하라

forEach()가 가치 있는 이유는 예측 가능하면서도 다른 배열 메서드와 같이 작동하여 함께 연결할 수 있기 때문이다.
배열의 각 항목을 인수로 하는 함수를 넘겨주지만 다른 메소드와 달리 아무런 동작을 하지 않는다.
forEach()는 함수의 유효 범위를 벗어나는 작업이 필요한 경우에 가장 좋다.
반드시 Side Effect가 발생한다는 점을 주의해야 한다.
그럼에도 불구하고 사용하는 이유는 체이닝 과정에서 다른 배열 메소드와 결합할 수 있기 때문이다.

체이닝으로 메소드를 연결하라

많은 객체지향 프로그래밍 언어에서 메소드 체이닝을 찾아볼 수 있다.
체이닝이란, 값을 다시 할당하지 않고 반환된 객체에서 메소드를 즉시 호출하는 것을 의미한다.

sailors
    .filter(sailor => sailor.active)
    .map(sailor => sailor.email || `${sailor.name}@wiscail.io`)
    .forEach(sailor => sendEmail(sailor));

배열 메소드 체이닝의 유일한 단점은 새로운 메소드를 호출할 때마다 반환된 배열 전체를 다시 반복한다는 점이다.
하지만 대규모 데이터를 처리하는 경우가 아니라면 중요하지는 않다.

주의해야 할 점

• 마지막 문장에 세미콜론이 있는 것을 확인해야 함 (세미콜론이 사용을 선호하는 이유)
• 순서를 지켜야 한다는 점 (테스트 코드를 작성해라)

reduce()로 배열 데이터를 변환하라

배열 메소드가 훌륭한 이유는 콜백 함수를 이해하기 전에도 결괏값을 예측할 수 있기 때문이다.
또한 테스트하기가 용이하다.

reduce() 메소드만의 가장 중요한 특징은 배열의 길이와 데이터 형태 모두 또는 각각 변경할 수 있다는 점이다.
또한 반드시 배열을 반환할 필요도 없다는 것이다.

const callback = function (collectedValues, item) {
    return [...collectedValues, item];
}
const saying = ['veni', 'vedi', 'veci'];
const initialValue = [];
const copy = saying.reduce(callback, initialValue);

// 고유한 값 분리하는 예제
const colors = dogs.reduce((colors, dog) => {
    return [...colors, dog['color']]
},[]);

map이 아닌 reduce를 사용하는 경우? 유연성이 더 필요할 때! 더 많은 값을 쉽게 다룰 수 있음

const filters = dogs.reduce((filters, itme)=> {
    filters.breed.add(item['breed']);
    filters.size.add(item['size']);
    filters.color.add(item['color']);
    return filters;
}, {
    breed: new Set(),
    size: new Set(),
    color: new Set(),
});

for .. in 문과 for .. of 문으로 반복문을 정리하라

for ...of문은 인덱스를 반복하지 않는 점을 제외하면 for 문과 매우 유사하다.
인덱스 대신 컬렉션의 멤버를 직접 순회한다. 개별 항목의 이름을 선언하고 내부에서 사용한다.
for ...of문을 사용하면 특수한 객체를 배열로 변환하는 대신 for문과 동일한 개념을 사용하면서 인덱스 참조를 제거할 수 있다.

const message = [...firms].reduce((availability, firm) => {
    const [id, name] = firm;
    if (!isAvailable(id)) {
        return `${name}는 사용할 수 없습니다`;
    }
    return availability;
}, '모든 회사를 사용할 수 있습니다');
return message;

for (const firm of firms) {
    const [id, name] = firm;
    if (!isAvailable(id)){
        return `${name}는 사용할 수 없습니다`;
    }
}
return '모든 회사를 사용할 수 있습니다';

for ...of문은 반드시 필요한 경우에만 사용하는 것이 좋고, 키-값 객체에세먼 작동한다는 특징이 있다.

for ...in문은 for ...of와 비슷하지만 객체의 속성을 순회한다는 점이 다르다.
객체는 프로토타입 체인에 있는 다른 객체에서 속성을 상속받으며, 열거할 수 없는 속성이 있어 순회에서 제외되기도 한다.
for ...in문을 사용할 때는 각 항목을 한번에 하나씩 받는다. 값을 받지 않으므로 매번 키를 사용해서 컬렉션을 참조해야 한다.

두 개 모두 무조건적으로 사용하기 보다는 사용이 적절한 경우에만 선택해야 한다.
또한 객체를 순회하면서 객체를 조작해서는 안된다. 객체를 조작하는 것은 버그의 위험성을 높인다.