javascript-array-method2[0810]

오늘은 자바스크립트의 배열에 있는 메소드들에 대해서 더욱더 알아보겠습니다.

---

for-Each로 반복작업

for-each는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 합니다.

// for each element call alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

위 코드를 실행하면 차례대로 alert창에 "Bilbo", "Gandalf", "Nazgul"이 실행됩니다.

 

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

위는 인덱스 정보까지 더 해주면서 출력해줍니다.

+ 매개변수로 넘겨준 함수의 반환값은 무시가 됩니다.

 

---

배열 탐색

• arr.indexOf
• arr.lastIndexOf
• arr.includes

indexOf는 정한 위치부터 시작하여 요소를 찾습니다.

발견했다면 해당 요소의 인덱스번호를 리턴합니다.

요소를 발견하지 못했다면 -1을 리턴합니다.

 

lastindexOf는 위와 같은기능이지만 검색을 끝에서부터 말그대로 라스트에서부터 시작합니다

똑같이 요소를 발견하지 못했다면 -1을 리턴합니다.

 

includes는 요소가 있는지 없는지를 검색하는데 해당하는 요소를 발견하면 true를 리턴합니다.

 

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

1, 2, -1순서로 alert창이 뜨고 includes는 있는지 없는지를 검색하니까 있으므로 true를 리턴합니다.

위 세가지 메소드들은 ===를 사용합니다.

false를 검색한다면 false를 검색하는 것이지 0을 검색하진 않습니다.

그래서 해당 인덱스 번호보다는 있는지 없는지를 사용하는 includes도 좀 유용해 보입니다.

---

find와 findindex

만약에 배열이 있는데 그 배열이 객체로 이루어져있다면 어떻게 해야 할까요?

그럴때 arr.find(fn)을 사용합니다.

fn은 함수입니다.

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

item은 함수를 호출할 요소이며 index는 요소의 인덱스 array는 배열 자기자신을 리턴합니다.

글에 써진것 처럼 해당하는 요소가 없다면 undefined를 true가 반환되면 반복이 멈추고 해당요소를 리턴합니다.

(반환, 리턴 같은말입니다.)

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

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

alert(user.name); // John

 

---

filter

find는 함수의 반환값을 true로 만드는 하나의 요소를 찾습니다.

만약 그 조건을 만족하는게 여러개가 있다면 filter를 사용하면 됩니다.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

---

배열을 변형하는 map

map 은 정말 많이 사용하는 것중에 하나인데

배열의 전체를 대상으로 함수를 호출하고 호출 결과를 배열 자체로 반환을 해줍니다.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

 

이렇게 각각 요소의 글자수가 나왔죠?

---

sort(fn)

원래 수업시간에는 버블정렬과 퀵정렬에 대해서 알아보았지만 그것들은 정보처리산업기사라는 카테고리에도 나와있으니 무시하고 넘어가겠습니다.

sort()는 배열의 요소를 정렬합니다.

그리고 배열 자체가 변경이 되어버립니다.

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2

1,2,15로 정렬하고싶은데 이상하게 나오는걸 볼수있습니다.

sort()는 배열의 요소들이 문자열로 취급되어 재정렬되기때문에 저런결과가 나온겁니다.

다음글에서 2부로 이어집니다.