TIP 5: 배열로 유연한 컬렉션을 생성하라

 

1. 배열은 순서를 갖기 때문에 이를 기준으로 값을 추가하거나 제거할 수 있고,

어느 위치에 해당 값이 있는 지 확인 할 수도 있다. 

 

2. 배열을 정렬해서 순서를 새로 지정할 수도 있다. 

const team = [
  'Joe',
  'Dyan',
  'Bea',
  'Theo',
];

function alphabetizeTeam(team) {
  return [...team].sort();
  // ['Bea', 'Dyan', 'Joe', 'Theo']
}

*sort() 메서드를 이용해 배열의 요소들을 문자열로 취급하여 유니코드 순서대로 정렬했다. (알파벳 순)

 

 

 

3. map(), filter(), reduce() 등과 같은 배열 메서드를 이용하면 코드 한 줄로 정보를 쉽게 변경할 수 있다. 

const staff = [
  {
    name: 'Wesley',
    position: 'musician',
  },
  {
    name: 'Davis',
    position: 'engineer',
  },
];

function getMusicians(staff) {
  return staff.filter(member => member.position === 'musician');
  // [{name: 'Wesley', position: 'musician'}]
}

*filter() 메서드를 통해 position이 musician인 요소만 걸러주는 getMusicians라는 함수를 생성했다. 

 

 

 

4. 배열을 통해 객체와 반복문을 연결할 수 있다. 

  const game1 = {
    player: 'Jim Jonas',
    hits: 2,
    runs: 1,
    errors: 0,
  };

  const game2 = {
    player: 'Jim Jonas',
    hits: 3,
    runs: 0,
    errors: 1,
  };

  const total = {};

  const stats = Object.keys(game1); //game1의 key값들만 배열에 담아서 반환. stats = ['player', 'hits', 'runs', 'errors']
  for (let i = 0; i < stats.length; i++) {
    const stat = stats[i];
    if (stat !== 'player') {//stats의 i번째 요소가 'player'가 아닐 때
      total[stat] = game1[stat] + game2[stat]; //key의 value들을 합산한다. 
    }
  }
  
  // {
  //   hits: 5,
  //   runs: 1,
  //   errors: 1
  // }

*Object.keys()를 실행해서 객체의 키를 배열에 담은 후 그 배열을 이용해 순회한다. 

 

-Object.keys():
지정한 객체 자신의 모든 열거 가능한 문자열 속성들의 이름으로 구성된 배열을 반환합니다.

 

 

5. 배열을 특별한 컬렉션으로 변환하거나 다시 배열로 만들 수 있다. 

const dog = {
  name: 'Don',
  color: 'black',
};

dog.name;
// Don

 const dogPair = [
    ['name', 'Don'],
    ['color', 'black'],
  ];
  //2차원 배열 (배열 안에 배열)

  function getName(dogPair) {
    return dogPair.find(attribute => { //attribute는 임시 변수 
      return attribute[0] === 'name'; //dogPair[0] = ['name', 'Don'] = DON
    })[1]; //O
  }

• dogPair의 0번째 인덱스(['name', 'Don' ])를 가져와 name(key)의 value(DON)값을 반환한다.
• 해당 value의 0번째 인덱스를 반환한다. (O)

*위의 코드에서 키-값 저장소 (key-value store) 객체를

아래 코드에서  ['name', 'Don'], ['color', 'black'] 와 같은 배열로 바꾸었다.