Javascript 자바스크립트 코딩의 기술 5장 반복문을 단순하게 만들어라 (1)

---

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

tip20. 화살표 함수로 반복문을 단순하게 만들어라

• 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다.
• 또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호 등...)
  • 매개변수가 1개인 경우에는 괄호를 생략
  • 매개변수가 없거나 2개 이상인 경우에는 괄호 필수

// 이름이 있는 '기명함수'
function capitalize(name) {
  return name[0].toUpperCase() + name.slice(1);
}

// 이름이 없어 변수에 할당하는 '익명함수'
const capitalize = function(name) {
  return name[0].toUpperCase() + name.slice(1);
};

// 화살표 함수를 사용한 익명함수
const capitalize = (name) => name[0].toUpperCase() + name.slice(1);

 

• 인수를 감싼 괄호 없앰 : (name) -> name
• 중괄호 없앰 : {} -> ''
• return 없앰 : return -> ''
• function 없앰 : function -> =>(arrow function 형태로 변경!)
• 자바스크립트에서는 함수를 다른 함수에 인수로 전달할 수 있다.(콜백함수)

그래서 위 코드를 리팩토링 해주면 다음과 같다.

function applyCustomGreeting(name, callback) {
  return callback(capitalize(name));
}

// callback을 기명함수로 넣어줘도 되지만 익명 함수를 생성하여 넘기는 것이 더 편리!!
applyCustomGreeting('mark', function(name) {
  return `안녕, ${name}!`;
});

// 화살표 함수로 변경
applyCustomGreeting('mark', (name) => `안녕, ${name}!`);

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

• 모던 자바스크립트의 장점을 살려 간결함, 가독성, 예측가능성을 갖춘 코드를 지향하며 만들어보자.
• 문자열로 작성한배열을 부동 소수점 값으로 변환하는 기본적인 반복문을 통해 살펴보자.

const prices = ['1.0', 'negotiable', '2.55'];

let formattedPrices = [];

for (let i = 0; i < prices.length; i++) {
    const price = parseFloat(prices[i]); // 값을 변화하는 작업
    if (price) {
        // 문자열이 올 경우 NaN 반환 , 불필요한 값을 제외하는 작업
        formattedPrices.push(price);
    }
}

• 다음과 같은 이유로 복잡하고, 가독성이 좋지 않고, 예측하기 어렵다.
  • 3행에서 데이터를 다루기 전에 새로운 컬렉션을 선언
  • for문을 사용할때 안에 변환된 값들을 넣는 배열이 필요한데, const가 블록 유효 범위이므로 밖에서 빈배열 선언해야되는 불편함이 있다.
  • 마지막으로 for문은 값을 변화하는 작업과 불필요한 값을 제외하는 작업(if문)을 포함해 2가지 관심사로 분리되서 for문의 작업 목적이 어떤건지 정확히 예측 할 수 없다.
• 따라서 기존에 존재하는 배열 메서드를 이용해서 코드의 가독성을 높이고 간결하게 만들어보자!

배열메서드의 종류

• map() : 형태를 바꿀수 있고, 길이는 유지
• sort() : 형태나 길이는 변경되지 않고, 순서만 변경
• filter() : 길이를 변경하지만 형태는 유지
• find() : 배열을 반환하지 않고, 1개의 데이터만 반환, 형태는 유지
• forEach() : 형태를 이용하지만 아무것도 반환 X
• reduce() : 길이, 형태 변경가능 무엇이든 처리 가능!

const prices = ['1.0', 'negotiable', '2.55'];
const formattedPrices = prices
    .map((price) => parseFloat(price))  // [1.0, NaN, 2.55]
    .filter((price) => price);			// [1.0, 2.55]

• map()을 이용해 배열의 길이는 유지, price 형태를 실수 변경
• filter()를 이용해 배열의 길이를 변경, 형태는 유지

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

• map() 메서드를 사용해 배열에 들어있는 정보의 부분집합을 생성해보자.
• 연주자 목록이 담긴 컬렉션에서 다루는 악기만 추출해보자.
• for문을 사용해 개선해가면서 map() 메서드를 사용하자.

const band = [{
     name: 'corbett',
     instrument: 'guitar',
},{
     name: 'evan',
     instrument: 'guitar',
},{
     name: 'sean',
     instrument: 'bass',
},{
     name: 'brett',
     instrument: 'drums',
}]

// for문을 이용한 방식
const instrumnets = [];
for (let i = 0; i < band.length; i++) {
     const instrument = band[i].instrument;
     instruments.push(instrument);
}

// instrument를 가져오는 함수를 별도로 만들자.
function getInstrument(member) {
     return member.instrument;
}

// 별도의 함수를 사용
const instrumnets = [];
for (let i = 0; i < band.length; i++) {
     instruments.push(getInstrument(band[i]);
}

• map() 메서드를 사용하기 위해 해야 할 일은 원본 배열의 각 항목을 인수로 받아 새롭게 생성될 배열에 담길 값을 반화하는 함수를 만드는 것뿐이다.(이미 함수를 작성했다.)
• map() 메서드는 실행결과에서 반환된 값을 배열에 담는다. 따라서, 빈 배열에 push()하는 코드가 필요 없다.

Reference

자바스크립트 코딩의 기술 요약 / 정리