TIL 69 | 배열4(배열 메서드3)

메서드의 인수로 콜백함수를 받는 배열 고차함수에 대해 알아보자

배열 고차함수❗

• 고차함수 : 함수를 인수로 전달받거나(콜백) 함수를 반환하는 함수를 말한다

Array.prototype.sort

• sort 메서드는 배열의 요소를 오름차순으로 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.(예시1)
• 요소들을 내림차순으로 정렬하기 위해서는 .sort() 메서드로 오름차순으로 정렬한 후, .reverse() 메서드로 요소를 역순으로 정렬하면 된다(예시1)
• .sort() 메서드의 기본 정렬 순서는 유니코드 코드 포인트의 순서를 따른다. 배열의 요소가 숫자 타입이라 할지라도 배열의 요소를 일시적으로 문자열로 변환한 후, 유니코드 포인트의 순서를 기준을 정렬한다.
  • '10'의 유니코드 포인트의 순서가(U+0031U+0030)가 '2'의 유니코드의 포인트(U+0032)보다 앞서므로 실제적로 오름차순으로 정렬이 안 되는 경우들이 발생한다(예시2)(예시3)
• 숫자 요소를 정렬할 때에는 sort 메서드에 정렬 순서를 정의하는 비교함수를 인수로 전달해야 한다
  • 비교 함수의 반환값이 0보다 작은 경우 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다(예시4,5)

-예시1-
  
const fruits = ['Banana', 'Orange', 'Apple']

fruits.sort();
console.log(fruits) // ["Apple", "Banana", "Orange"]

fruits.reverse() 
console.log(fruits) // ["Orange", "Banana", "Apple"]


-예시2-
const points = [40, 100, 1, 5, 25, 10]

const ab = points.sort()
console.log(ab) // [1, 10, 100, 25, 40, 5]

-예시3-
const points = [40, 100, 1, 5, 25, 10]

const ab = points.sort()
console.log(ab) // [1, 10, 100, 25, 40, 5]


-예시4- 오름차순 정렬 : 비교함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다
const points = [40, 100, 1, 5, 25, 10]
const abc = points.sort((a, b) => a - b)

console.log(abc)  // [1, 10, 100, 25, 40, 5] 

-예시5- 내림차순 정렬 : 비교함수의 반환값이 0보다 작으면 b를 우선하여 정렬한다
const points1 = [40, 100, 1, 5, 25, 10]
const abcd = points1.sort((a, b) => b - a)

console.log(abcd) // [100, 40, 25, 10, 5, 1]

Array.prototype.forEach

• 배열 데이터의 item의 개수만큼 특정한 콜백함수를 반복적으로 실행하는 용도로 사용되는 메서드이다. 인수를 3개 사용할 수 있다.(element(=item), index(옵션), array(옵션))
  • array : forEach()에 붙어있는 그 배열데이터(fruits)를 말한다. 어차피 fruits라는 변수로 배열데이터를 참조할 수 있기 때문에 array라는 매개변수는 사용할 일이 거의 없다
• 동작의 원리(예시1) : item의 개수가 3개이므로 3번 번복 실행
  • 콜백 첫 번째 실행 : fruits의 첫 번째 element에 "Apple"이 온다. 그래서 콘솔에 Apple, (index) 0, fruits배열 전체가 출력된다.
  • 콜백 두 번째 실행 : fruits의 두 번째 element에 "Banna"가 온다, 그래서 콘솔에 Banna, (index) 1, fruits배열 전체가 출력된다.
  • 콜백 세 번째 실행 : fruits의 두 번째 element에 "Cherry"가 온다, 그래서 콘솔에 Cherry, (index) 2, fruits배열 전체가 출력된다.
• 인수 index와 array를 생략한 경우(예시2)
• 인수 element 대신에 item로 사용 가능하며, item으로 의미가 전달되는 다른 변수를 사용할 수도 있다. index는 줄여서 i로 사용 가능하다(예시3)
• .forEach()는 실행되면서 따로 반환되는 값이 없어서 console.log(a)의 출력 값이 undefined이다(예시4)

-예시1-
  
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banna', 'Cherry']

fruits.forEach(function(element, index, array) {
console.log(element, index, array)
}) 

<출력>
"Apple"
0
["Apple", "Banna", "Cherry"]
"Banna"
1
["Apple", "Banna", "Cherry"]
"Cherry"
2
["Apple", "Banna", "Cherry"]

-예시2- push 메서드가 원본을 직접 변경하기 때문에, 순회해서 빈 배열에 요소를 추가했을 때, 하나의 배열이 된다
const numbers1 = [1, 2, 3];
const pows = [];

numbers1.forEach(item => pows.push(item **2));
console.log(pows) // [1, 4, 9]

-예시3-
const fruits = ['Apple', 'Banna', 'Cherry']

fruits.forEach(function(f, i) {
console.log(f, i)
})

-출력
"Apple"
0
"Banna"
1
"Cherry"
2

-예시4-
const fruits = ['Apple', 'Banna', 'Cherry']

const a = fruits.forEach((fruit, i) => `[${fruit}-${i}]`)

console.log(a) // undefined

Array.prototype.map

• 콜백에 들어오는 매개변수에 대한 부분은 .forEach()와 동일하다
• 다만, .map()는 콜백의 반환값들로 구성된 새로운 배열을 만들어서 반환해준다. 그래서 변수에 할당해서 확인할 수 있다.(예시1)
• 실행문을 객체로 작성할 수도 있다(예시2)
• 실행문에 비교연산자가 사용되면 true, false를 반환한다(예시3)
• 원본 배열은 변경되지 않는다.

-예시1-
const fruits = ['Apple', 'Banna', 'Cherry']

const b = fruits.map(function(fruit, index) {
return `${fruit}-${index}`
})

console.log(b) // ["Apple-0", "Banna-1", "Cherry-2"]
console.log(fruits) // ["Apple", "Banna", "Cherry"]

-예시2-
const fruits = ['Apple', 'Banna', 'Cherry'] 

const c = fruits.map(function(fruit, index) {
return {
   id: index,
   name: fruit
}
})

console.log(c) 

<출력>
  (3) [{…}, {…}, {…}]
0: {id: 0 name: "Apple"}
1: {id: 1 name: "Banna"}
2: {id: 2 name: "Cherry"}

-예시3-
const numbers = [1, 2, 3, 4]

const d = numbers.map(number => number < 3)

console.log(d) // [true, true, false, false]
console.log(numbers) // [1, 2, 3, 4]  
  

Array.prototype.filter

• filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 콜백 함수의 반환값이 true인 요소로만 필터링을 해서 새 배열을 만들어 반환한다
• 원본 배열은 변경되지 않는다

const numbers = [1, 2, 3, 4]

const e = numbers.filter(number => number < 3)
console.log(e) // [1, 2]
console.log(numbers) // [1, 2, 3, 4]

Array.prototype.find

• find()라는 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
• 자신이 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 요소를 반환하는 것.(예시1) 이런 요소가 없으면 undefined를 반환한다.(예시2)
• 배열의 요소가 객체인 경우에도 메서드 사용이 가능하다(예시3)
• 정규표현식과 함께 사용할 수 있다(예시4)
  • /^B/ 의미 : B로 시작하는(^) 문자데이터를 의미
  • /^B/.test(fruit) 의미: fruit라는 매개변수로 test가 작성이 되어 있고, 정규표현식의 내용과 fruit의 내용이 일치하면 true, 아니면 false로 나온다

-예시1-
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found) // 12

-예시2-
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element < 5);

console.log(found) // undefined

-예시3-

const users = [
  {id:1, name: 'Lee'},
  {id:2, name: 'Kim'}, 
  {id:2, name: 'Choi'},
  {id:3, name: 'Park'}
  ]

const found1 = users.find(user => user.id === 2)

console.log(found1) // {id:2, name: 'Kim'}

-예시4-
const fruits = ['Apple', 'Banna', 'Cherry']

const ab = fruits.find(fruit => {
     return /^B/.test(fruit)
})

console.log(ab) // "Banana"

Array.prototype.findIndex

• finIndex 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백함수를 호출하여 반환값이 true인 경우 첫 번째 요소의 인덱스를 반환한다.(예시1)
• 콜백 함수의 반환값이 true인 요소가 존재하지 않으면 -1을 반환한다.(예시2)

-예시1-
const fruits = ['Apple', 'Banna', 'Cherry']

const cd = fruits.findIndex(fruit => {
     return /^C/.test(fruit)
})
console.log(cd); // 2


-예시2-
const fruits = ['Apple', 'Banna', 'Cherry']

const cde = fruits.findIndex(fruit => {
     return /^D/.test(fruit)
})
console.log(cde); // -1