자바스크립트 코딩의 기술_반복문 작성의 기술_1

(본 포스팅은 길벗의 '자바스크립트-코딩의 기술' 책을 공부하면서 작성되었습니다_내돈내산)

 

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

• 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어줄 수 있다.
• 화살표 함수는 함수에서 필요하지 않은 정보를 최대한 걷어낸다.(function 키워드, 인수를 감싸는 괄호, return 키워드, 중괄호 등)
• 화살표 함수는  => 를 사용하여 함수를 생성한다.

// 일반적인 익명함수 사용
const capitalize = function (name) {
  return name[0].toUpperCase() + name.slice(1);
};

// 화살표 함수 형태로 사용
const capitalize = name => {
  return name[0].toUpperCase() + name.slice(1);
};

• 매개변수가 하나라면 괄호도 제거할 수 있다. 하지만 매개변수가 없는 경우는 괄호를 사용해 나타낸다.

// 매개변수가 없을때 일반 기명함수
function key() {
  return 'abc123';
}
// 매개변수가 없을때 화살표함수(괄호만 써주었다)
const key = () => {
  return 'abc123';
};

• 매개변수가 두개이상인 경우에도 괄호를 사용해야 한다.

// 매개변수가 두개이상일때 일반적인 기명함수
function greet(first, last) {
  return `Hello, ${capitalize(first)} ${capitalize(last)}`;
}
// 매개변수가 두개이상일때 화살표 함수의 형태
const greet = (first, last) => {
  return `Hello, ${capitalize(first)} ${capitalize(last)}`;
};

• 함수를 한줄로만 작성하는 경우에는 return 키워드를 사용하지 않아도 된다. 즉, 함수 몸체의 실행 결과를 자동으로 반환하게 된다.

// 일반적인 기명함수
function formatUser(name) {
  return `${capitalize(name)} is logged in.`;
}
// 화살표 함수를 이용한 return 키워드 생략
const formatUser = name => `${capitalize(name)} is logged in.`;

• 콜백함수를 화살표 함수로 대체할때, 함수는 더 간결해 질 수 있다.

// 일반적인 콜백함수 구현법
function applyCustomGreeting(name, callback) {
  return callback(capitalize(name));
}
//  #END:applyCustomGreeting

function greetWithExcitement() {
  const greeting =
    //  #START:greetWithExcitement
  applyCustomGreeting('joe', function (name) {   <<
    return `Hi, ${name}!`;
  });
  //  #END:greetWithExcitement
  return greeting;
}

// 콜백함수를 화살표함수로 대체했을때의 모습
function greetWithExcitement() {
  const greeting =
    //  #START:greetWithExcitement
  applyCustomGreeting('joe', name => `Hi, ${name}!`);   <<
  //  #END:greetWithExcitement
  return greeting;
}

---

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

• for문과 for ...of 문도 좋지만 모던 자바스크립트의 간결함, 가독성, 예측 가능성을 갖춘 코드를 작성하는데 적합하지 않은 면을 가지고 있다.
• 배열메서드는 이런 목접에 적합하며, 배열 메서드를 정복하는것이 자바스크립트 코드를 발전시키는 가장 빠른 방법.
• 배열 메서드는 불필요한 데이터를 배제한, 간결하고 예측 가능한 코드를 만드는 훌륭한 방법이다.

<가장 많이 쓰이는 배열 메서드>
- map( ) : 선택한 속성의 전체 데이터를 가져온다.

const prices = ['1.0', '2.15'];
const formattedPrices = prices.map(price => parseFloat(price));
// [1.0, 2.15];​

- sort( ) : 선택한 속성의 값을 정렬한다(일정 기준에 따라)
- filter( ) : 선택한 값을 가지는 데이터를 가져온다.

  const prices = ['1.0', '2.15'];
  const formattedPrices = prices.map(price => parseFloat(price));
  // [1.0, 2.15];

- find( ) : 배열을 반환하지 않고 찾고자 하는 데이터를 반환한다.
- forEach( ) : 배열의 모든속성을 하나씩 꺼내와서 처리할때
- reduce( ) : 길이와 형태를 바꾸는 것을 비롯해 무엇이든 처리할 수 있음.

// 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

const oneTwoThree = [1, 2, 3];
result = oneTwoThree.reduce((acc, cur, i) => {
  console.log(acc, cur, i);
  return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6​

• 배열 메서드는 한가지 배열 메서드를 호출하고 반환된 결과를 이어지는 배열 메서드로 전달할 수 있다.

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

---

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

• 맵 함수는 입력한 배열의 정보 중 한 조각을 받아 정보의 일부나, 정보를 변형해 새로운 값을 반환한다.
• map( ) 메서드를 사용하기 위해 해야 하는 일은 원본 배열의 각 항목을 인수로 받아 새롭게 생성될 배열에 담길 값을 반환하는 함수를 만드는 것이다.

// 어떠한 컬렉션이 있다고 할때
const band = [
  {
    name: 'corbett',
    instrument: 'guitar',
  },
  {
    name: 'evan',
    instrument: 'guitar',
  },
  {
    name: 'sean',
    instrument: 'bass',
  },
  {
    name: 'brett',
    instrument: 'drums',
  },
];

// 밴드 멤버들이 연주하는 악기 목록만 가져오고 싶을 때.
// 일반적인 for문 사용
const instruments = [];
for (let i = 0; i < band.length; i++) {
  const instrument = band[i].instrument; // <label id="instrument"/>
  instruments.push(instrument); // <label id="push"/>
}

// 함수 및 push( ) 메서드를 이용한 리팩토링
function getInstrument(member) {
  return member.instrument;
}

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

// map( ) 메서드를 이용한 리팩토링
function getInstrument(member) {
    return member.instrument;
  }

const instruments = band.map(getInstrument);
// ['guitar', 'guitar', 'bass', 'drums']

• 실행결과 배열을 얻어 미리 배열을 선언할 필요가 없게 된다.
• 원본 배열과 같은 길이의 배열이 생성된다는 것을 알 수 있음.
• 원하는 정보만 배열에 담기고 다른 정보는 담기지 않았다는 점을 알 수 있다. 

---

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

• 배열에 담긴 항목의 형태는 유지하면서 배열의 길이를 변경하는 방법이 있다. 데이터의 형태는 유지하면서 전체 항목의 일부만 필요한 경우에 사용.

- filter( ) 메서드 -

• filter( ) 메서드는 배열에 있는 정보를 변경하지는 않는다. 하지만 반환되는 배열의 길이를 줄인다.
• filter( ) 메서드는 map( ) 메서드와 다르게, 반드시 참값을 반환하는 함수를 사용해야 한다. 함수가 참값을 반환하면  값이 유지되지만, 거짓값을 반환하는 경우는 값은 새로운 배열에 담기지 않게 된다.(빈 배열을 반환한다)

const scores = [30, 82, 70, 45];
// 점수가 60점 이상인지 확인하여 기준에 맞는 점수로만 배열 생성(참 값 반환)
function getNumberOfPassingScores(scores) {
  const passing = scores.filter(score => score > 59);
  // [70, 82]
  return passing.length;
}

// 점수가 100점이 값만 배열에 저장 (거짓값 반환) >> 빈 배열을 반환한다
function getPerfectScores(scores) {
  const perfect = scores.filter(score => score === 100);
  // []
  return perfect.length;
}
// 0

- find( ) 메서드 -

• find( )메서드는 참 또는 거짓 값을 반환하는 함수를 인수로 받고, 배열의 항목에 전달한 함수로 평가해 참 값을 반환하는 젓 번째 항목만 반환한다. 참 값을 반환하는 항목이 없다면 undefined를 반환한다. undefined를 반환하는 문제는 단락평가를 이용해 기본값을 추가함으로써 일치하는 항목이 없을때 발생하는 문제에 대한 해결이 가능하다
• find( ) 메서드는 찾으려는 항목이 하나인 것을 알고 있는 경우, ID와 같은 고유값을 찾는 경우에 매우 유용함.
• 반복문에서 break 문을 사용하는 경우 find( ) 메서드를 사용하기에 적합하다.

const instructors = [
  {
    name: 'Jim',
    libraries: ['MERIT'],
  },
  {
    name: 'Sarah',
    libraries: ['Memorial', 'SLIS'],
  },
  {
    name: 'Eliot',
    libraries: ['College Library'],
  },
];

// for문을 이용해 'Memorial'을 가지는 사서를 불러올 때
let memorialInstructor;
  for (let i = 0; i < instructors.length; i++) {
    if (instructors[i].libraries.includes('Memorial')) {
    memorialInstructor = instructors[i];
    break;
  }
}

// find( )함수를 이용해 'Memorial' 속성을 가지는 사서를 가져올 때
const librarian = instructors.find(instructor => {
  return instructor.libraries.includes('Memorial');
});