[12/9] DAY5 자바스크립트 공부

5일 차 진도

배열 요소 순회 메서드

- foreach

매개변수로 함수를 전달(콜백함수), 콜백함수에는 3가지 매개변수 전달

let arr = [1,2,3,4,5];

arr.foreach((elm,idx,array)=>{
    console.log(`${idx}번째 요소는 ${elm}입니다. `); // 0번째 요소는 1입니다 ~ 5까지 출력
    console.log(array); // [1,2,3,4,5]
 }

elm은 arr의 각 요소를 나타낸다. idx 선택적 매개변수, 요소의 인덱스를 나타내며, array은 실제 전달된 배열을 출력한다.

- map

배열 안의 모든 원소를 변환할 때 유용하게 사용

let arr = [1,2,3,4,5];
    let newArray = arr.map((elm)=> {
    return elm * 10;
})

console.log(newArray); // [10,20,30,40,50]

전달한 콜백함수를 호출한 결과를 모아서 새로운 배열로 반환해 주는 내장함수. 콜백함수에는 foreach와 동일하게 3개의 매개변수 전달 가능

특정 요소를 찾는 내장함수

- at

let colors = [“greens”, “blue”, “purple”]
console.log(colors.at(1)); // blue
console.log(colors.at(-1)); // purple

배열의 맨 마지막 요소를 알아야 할 때 유용하게 사용 가능

- includes

매개변수로 받은 요소를 배열이 포함하고 있는지 판별하여 boolean값으로 반환

let colors = [“greens”, “blue”, “purple”]
console.log(color.includes(“blue”)); // true
console.log(color.includes(“yellow”)); // false

console.log(color.includes(“blue”,2)); // false
console.log(color.includes(“blue”,1)); // true

숫자로 전달된 매개변수는 특정 요소를 찾기 시작할 위치를 지정해 주는 것

- indexOf

특정 값을 지닌 요소가 몇 번째에 위치하는 요소인지 찾아줌

let colors = [“greens”, “blue”, “purple”];
console.log(colors.indexOf(“purple”)); // 2
console.log(colors.indexOf(“yellow”)); // -1

배열에 존재하지 않는 값을 매개변수를 넣어 순서를 찾으려고 하면 -1을 반환

indexOf는 배열요소의 값이 객체형태거나 배열의 형태일 때의 인덱스는 찾아주지 못한다.

- findIndex

let colors = [
    {id : 1, color:”green”},
    {id : 2, color:”blue”},
    {id : 3, color:”purple”}
]

let idx = colors.findIndex((elm) => elm.color === “purple”)
console.log(idx) // 2

배열 요소가 객체로 이루어졌을 경우, 특정 값을 지닌 요소가 몇 번째에 위치하는지 반환

*화살표 함수는 중괄호와 리턴문을 생략하고 위처럼 간단하게 사용할 수도 있음

- find

찾아낸 값 그 자체를 반환

let colors = [
    {id : 1, color:”green”},
    {id : 2, color:”blue”},
    {id : 3, color:”purple”}
]

let idx = colors.find(()=> elm.color === “purple”)
console.log(idx); // {id : 3, color: “purple”}

배열 요소에 해당 요소가 없으면 undefined을 반환

특정 요소 추출 메서드

- filter

let colors = [
    {id : 1, color: “green”},
    {id : 2, color: “blue”},
    {id : 3, color: “purple”}
]

let filterArray = colors.filter((elm,idx,array)=> elm.id > 1)
console.log(filterArray); //  [{id : 2, color: “blue”},{id : 3, color: “purple”}]

조건에 만족하는 모든 값들을 새로운 배열에 담아서 반환

- slice

let colors = [
    {id : 1, color: “green”},
    {id : 2, color: “blue”},
    {id : 3, color: “purple”},
    {id : 4, color:”yellow”}
]

let sliceArray = colors.slice(1,3); // 인덱스 1~2 값을 반환
console.log(sliceArray); //  [{id : 2, color: “blue”}, {id : 3, color: “purple”}]

배열 이어 붙이기

- concat

let array1 = [“green”, “blue”]
let array2 = [“purple”, “yellow”]

console.log(array1.concat(array2)); // [“green”, “blue”, “purple”, “yellow”]

두 개의 배열을 하나로 합친 새로운 배열을 반환할 수 있음

- join

let array1 =  [“green”, “blue”, “purple”, “yellow”] 

console.log(array1.join()); // green,blue,purple,yellow
console.log(array1.join(“ “)); // green blue purple yellow

join은 하나의 배열에서 배열 요소들의 값들을 문자열로 이어주는 메서드이다. 아무런 매개변수도 넣어주지 않으면 쉼표가 기본 구분자가 됨

배열 정렬

- sort

let colors =  [“green”, “blue”, “purple”] 

colors.sort();
console.log(colors); // [“blue”, ”green”, ”purple”]

오름차순 방식으로 배열이 정렬된다.

내림차순으로 변경을 위헌 compare 함수

const compare = (a,b) => {
    if (a > b) return -1;
    else if (a < b) return 1;
    else return 0;
}

a는 배열의 다음 요소, b는 배열의 이전 요소를 의미한다.

0보다 작은 값(-1) : a가 b보다 앞에 있어야 함

0보다 큰 값(1) : b가 a보다 앞에 있어야 함

0 : 순서 변경 X

내림 차순으로 변경하기 위해서는 배열의 이전 값이 다음 값보다 커야 한다.

a = [1,4,5,6,10]

const compare = (a,b) =>{
  return a - b;
}

a.sort(compare)
console.log(a)

a와 b를 비교해서 반환 값이 -1이면, a를 b보다 앞에 놓는다

sort 메서드를 한 번 사용하면 해당 배열의 순서는 정렬된 그대로 변경되어 있다.

- reduce

배열의 각 요소에 대해 함수를 실행하고, 누적된 값을 출력할 때 유용하게 사용

let numbers = [1,100,25,50];

let sum = numbers.reduce((acc,cur,idx)=>{
    console.log(acc,cur,idx); // 0 1 0 -> 1 100 1 -> 101 25 … 126 50 3
    return acc + cur; // 176
},0)

acc는 콜백함수의 반환값을 누적하는 매개변수, cur는 현재 처리할 요소의 값을 나타냄, idx는 처리할 현재 요소의 인덱스를 나타냄

0은 초기값으로, 10을 넣으면 최종 누적 값은 10이 늘어날 것이다

- isArray

let a = Array.isArray([1,100,50]);
let b = Array.isArray({id : 1, color: “green” })
let c = Array.isArray(“string”)
let d = Array.isArray(undefined)

console.log(a,b,c,d); // true, false,false,false

전달된 매개변수가 배열인지 아닌지 판별

[5일 차 QUIZ]

문제 1번