<자바스크립트> 배열 (2) 반복, 탐색, 정렬 메서드

 

4. 반복 메서드

* forEach

 - forEach는 배열 요소 각각에 원하는 함수를 실행하도록 한다.

 

 - arr.forEach(function(itme, index, array) { } ); 와 같이 사용한다.

 

let arr = ["HARRY", "IU", "SUZY"];
arr.forEach(alert); // 원소 각각의 알럿창을 보여줍니다.
arr.forEach( (item, index, array) => {
  alert(`${item}은 ${index + 1} 번째에 있으며, ${array}에 속합니다.`);
} );

// HARRY // IU // SUZY

// HARRY은 1 번째에 있으며, HARRY,IU,SUZY에 속합니다.
// IU은 2 번째에 있으며, HARRY,IU,SUZY에 속합니다.
// SUZY은 3 번째에 있으며, HARRY,IU,SUZY에 속합니다.

 

 - 참고로 인수로 넘긴 함수의 반환값은 무시된다.

 

* reduce

 - forEach, for, for..of 는 배열 내 요소를 반복 작업하여 하나의 값을 도출하는 데 유용하다.

 

 - arr.reduce(function(acc, item, index, array) { }, [initial] ); 와 같이 사용한다.

 

 - acc(accumulator)는 이전 함수까지의 누적된 하나의 결과 값을 의미한다. initial값을 설정하면 가장처음에 초깃값을 지정할 수 있으며, [initial]이 없으면 배열의 처음부터 시작한다.

 

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15

 

 - 위는 굳이 초깃값 0 을 설정하지 않더라도 동일한 결과가 출력되지만 이해를 돕기위해 사용했다.

 

 - sum(acc)에는 배열의 원소current(item)가 하나씩 누적되어 더해진다.

 

5. 탐색 메서드

* index

 - indexOf, lastIndexOf, includes는 문자열에서도 있는 동일한 메서드이다.

 

 - arr.indexOf(item, from) : from부터 시작해서 item을 찾고 인덱스를 반환한다. 없을 경우 -1을 반환한다.

 

 - arr.lastIndexOf(item, from) : 위와 동일한 기능을 갖고 있으나 끝에서부터 검색한다.

 

 - arr.includes(item, from) : from부터 시작하여 item을 찾으면 true를 반환한다.

 

 - indexOf 와 lastIndexOf는 ===연산자를 사용한다. 이 때 NaN은 제대로 처리못한다는 결점이 있으나 includes는 NaN도 제대로 처리한다.

 

* find

 - find메서드는 객체로 이루어진 배열에서 특정 조건에 부합하는 객체는 찾아낼 때 유용하다.

 

 - arr.find(function(item, index, array){ } ); 와 같이 사용한다

 

 - 배열 내에서 원하는 요소를 찾으면 그 객체가 반환되며, 찾지 못하면 undefined가 반환된다.

 

let users = [
  {id: 1, name: "HARRY"},
  {id: 2, name: "IU"},
  {id: 3, name: "SUZY"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // HARRY

 

 - index와 array는 잘 넣지 않는다.

 

 - arr.findIndex로 동일한 기능을 하지만 인덱스만 반환 받을 수 있다.

 

* filter

 - filter는 조건을 충족하는 요소가 여러 개일 때 유용하다.

 

 - arr.filter(function(item, index, array){ } ); 와 같이 사용한다. find와 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환하는 차이가 있다.

 

let users = [
  {id: 1, name: "HARRY"},
  {id: 2, name: "IU"},
  {id: 3, name: "SUZY"}
];

let someUsers = users.filter(item => item.id < 3);

console.log(someUsers); // [{...}, {...}]

 

6. 변형 메서드

* map

 - map은 배열 요소 각각에 함수를 적용하여 그 결과를 다시 배열로써 반환한다.

 

 - arr.map(function(item, index, array){ }); 와 같이 사용한다.

 

let arr = ["HARRY", "IU", "SUZY"];
let lengths = arr.map(item => item.length);
console.log(arr); // ["HARRY", "IU", "SUZY"]
console.log(lengths); // [5, 2, 4]

 

* sort

 - sort 메서드는 배열의 요소들을 정렬시킨다. 이 때 배열자체가 변경된다.

let arr = [3, 2, 1, 22];
arr.sort();
console.log(arr);

// [1, 2, 22, 3]

 

 - sort메서드는 기본적으로 요소를 문자열로 취급하여 정렬한다. 따라서 위의 22는 3보다 작게 취급된다.

 

 - 이 때에는 sort내부에 정렬함수를 인수로 넣어줘야한다.

 

let arr = [3, 2, 1, 22];
arr.sort(function(a, b) { return a - b; });
console.log(arr);

// [1, 2, 3, 22]

 

 - 정렬함수는 양수를 반환할 경우 첫 번째 인수가 두 번째 인수보다 '크다'를 나타내고, 음수를 반환하는 경우 첫 번째 인수가 두 번째 인수보다' 작다'를 의미한다.

 

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

 

 - reverse는 요소를 역순으로 정렬시킨다.

 

---

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼