배열 내장 함수

1. 순환 함수 (forEach())

이거를

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

const arr = [1, 2, 3, 4];

arr.forEach((elm) => console.log(elm));

이렇게 바꾸는 거 가능.

 

그냥함수 형태로 바꾸면

arr.forEach(function (elm) {
  console.log(elm);
});

 

출력 결과는

 

arr.forEach(function (elm) {
  console.log(elm * 2);
});

하면

 

---

2. map() 

- 원본 배열의 모든 원소를 순회하면서 연산을 해서 반환할 수 있게 만들어주는 함수.

새로운 배열을 리턴함.

응용 2. 

2, 4, 6, 8을 좀 더 쉽게 쓰기

const arr = [1, 2, 3, 4];
const newArr = [];

arr.forEach(function (elm) {
  newArr.push(elm * 2);
})

console.log(newArr);

 

이걸 map을 쓰면

const arr = [1, 2, 3, 4];

const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr);

 

---

3. includes()

- 배열에 특정 요소가 있는지를 판별

배열에서 어떤 값이 있다면 true, 없다면 false인 프로그램을 만들기

const arr = [1, 2, 3, 4];

let number = 3;
arr.forEach((elm) => {
  if(elm === number) {
    console.log(true);
  }
});

이거를 좀 더 쉽게 만들 수 있다.

const arr = [1, 2, 3, 4];

let number = 3;
console.log(arr.includes(number));

 

true 출력됨.

 

---

4. indexOf

- 배열에 특정 요소가 있는지를 판별. 존재하면 몇 번째에 있는지까지 알아내기

const arr = [1, 2, 3, 4];

let number = 3;
console.log(arr.indexOf(number));

 

 

없으면

const arr = [1, 2, 3, 4];

let number = 7;
console.log(arr.indexOf(number));

 

 

5. findIndex

- 배열에서 찾으려는 요소의 인덱스 변호를 찾아 반환한다.

const arr = [
  { color : "red"}, 
  { color : "black"}, 
  { color : "blue"}, 
  { color : "green"}
];

console.log(arr.findIndex((elm) => elm.color === "green"));

 

console.log(arr.findIndex((elm) => elm.color === "green")); 이거는

console.log(
	arr.findIndex((elm) => {    
    	return elm.color === "green"
        });
   );

와 같음.

 

그런데 만약

const arr = [
  { color : "red"}, 
  { color : "black"}, 
  { color : "blue"}, 
  { color : "green"}

  { color : "green"}
]; 이렇게 겹쳐있으면 가장 먼저만나는 요소를 출력하므로 3만 나온다.

 

요소에 직접 접근하고싶다 하는 경우에는

console.log(
  arr[
      arr.findIndex((elm) => {
       return elm.color === "green"
      })
    ]
  );

이렇게 만들어준다.

 

더 줄이면

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];


const idx = arr.findIndex((elm) => {
  return elm.color === "blue";
});

console.log(arr[idx])
console.log("idx :", idx)

 

6. find

- 조건에 일치하는 요소를 그냥 가져온다.

 

const arr = [
  { color: "red" },
  { color: "black" },
  { color: "blue" },
  { color: "green" }
];

const element = arr.findIndex((elm) => {
  return elm.color === "blue";
});

console.log(element);

 

 

6. filter

- 조건에 일치하는 요소를 필터링해서 가져온다.

- 새로운 배열로 반환. 문법은 find / findIndex 와 거의 동일하다.

 

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

console.log(arr.filter((elm) => elm.color === "blue"))

function filterByColor(arr, color) {
  return arr.filter((elm) => elm.color === color);
}

// 예시 사용법:
const filteredArray = filterByColor(yourArray, "blue");
console.log(filteredArray);

 

 

7. slice()

- 조건에 일치하는 요소를 잘라서 배열로 반환한다.

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" },
  { num: 5, color: "blue" }
];

console.log(arr.slice(0, 2));

 

end에 명시된 것에서 하나 빼고 반환하므로 0, 1번째만 반환

 

 

8. concat()

- 배열 붙이기 => 하나의 배열로 리

const arr = [
  { num: 1, color: "red" },
  { num: 2, color: "black" },
  { num: 3, color: "blue" },
  { num: 4, color: "green" }
];

const arr2 = [
  { num: 5, color: "red" },
  { num: 6, color: "black" }
];

console.log(arr.concat(arr2));

 

 

9. sort()

- 배열을 정렬하기

let chars = ["나", "다", "가"];
chars.sort();

console.log(chars);

 

숫자는 좀 다르게 나와서 함수를 직접 만들어줘야 한다.

let numbers = [0, 30, 20, 2, 1, 3];

const compare = (a,b) => {
  if(a>b) {
    // 크다
    return 1; // 큰 값이 더 뒤로 가야 한다.
  }
  if(a<b) {
    // 작다 
    return -1; // 작은 값이 더 앞으로 가야 한다.
  }
  // 같다
  return 0; // 자리를 바꾸지 않는다.
};

numbers.sort(compare);

console.log(numbers)

 

만약 내림차순으로 바꾸고 싶으면 부등호 방향 또는 리턴 숫자만 반대로 바꿔주면 된다.

 

10. join()

- 배열의 모든 요소를 합쳐서 나타내기

const hello = ["MBC", "놀면 뭐하니?", "팀입니다.", "안녕하세요!"];
console.log(hello.join(" ")); // 괄호 안은 구분자