2025 / 02 / 12
오늘 수업 시간에는 배열 메서드에 대해 배웠습니다.
기본적으로 알고 있던 메서드도 있었지만 처음보는 메서드도 있었습니다.
실습 예제를 풀 때 사용해본 경험이 있어서 이해하는 것이 어렵지는 않았습니다.
💌 배열 메서드
자바스크립트에서 배열을 다룰 때 유용한 여러 가지 기능을 제공합니다.
1) join( )
- 배열의 모든 요소를 문자열로 연결하여 하나의 문자열로 반환합니다.
- 연결할 구분자를 인수로 전달할 수 있습니다.
- 기본적으로 join( )은 배열의 각 요소를 문자열로 변환하여 연결합니다.
const hello = ["h", "e", "l", "l", "o"];
let result = hello.join(""); // 구분자 없이 연결
console.log(result); // "hello"
let result2 = hello.join(","); // 쉼표로 구분하여 연결
console.log(result2); // "h,e,l,l,o"2) split( )
- 문자열을 특정 구분자를 기준으로 나누어 배열로 반환합니다.
- 문자열을 배열로 분할하는데 사용됩니다.
let result3 = result2.split(","); // 쉼표를 기준으로 분할
console.log(result3); // ["h", "e", "l", "l", "o"]3) concat( )
- 두 개 이상의 배열을 합쳐 새로운 배열을 생성합니다.
- 두 배열을 합치거나 추가적인 값을 배열에 결합할 때 사용합니다.
- 원본 배열은 변경되지 않습니다.
const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];
let newArray = arr1.concat(arr2);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8]
let arr4 = arr1.concat(5, 6); // 배열과 숫자를 합침
console.log(arr4); // [1, 2, 3, 4, 5, 6]4) find( )
- 배열에서 조건을 만족하는 첫 번째 요소를 반환합니다.
- 조건에 맞는 요소가 없다면 undefined를 반환합니다.
const numbers = [4, 9, 16, 25, 29];
let num = numbers.find((item) => item > 10);
console.log(num); // 16
const users = [
{ id: 1, name: "Jhon" },
{ id: 2, name: "Jane" },
{ id: 3, name: "Jim" },
];
let newUser = users.find((user) => user.id === 2);
console.log(newUser); // { id: 2, name: "Jane" }
5) findIndex( )
- 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.
- 조건을 만족하는 요소가 없다면 -1을 반환합니다.
let re = numbers.findIndex((item) => item > 4);
console.log(re); // 1 (9가 4보다 크므로 첫 번째 인덱스는 1)6) sort( )
- 배열의 요소를 정렬합니다.
- 기본적으로 문자열 기준으로 오름차순 정렬을 하지만, 숫자 배열은 직접 비교 함수로 정렬해야합니다.
- sort( )는 원본 배열을 변경합니다.
const idol = ["재현", "이한", "운학"];
idol.sort();
console.log(idol); // ["운학", "이한", "재현"]
const numbers2 = [10, 3, 20, 7];
// 오름차순 정렬
numbers2.sort((a, b) => a - b);
console.log(numbers2); // [3, 7, 10, 20]
// 내림차순 정렬
numbers2.sort((a, b) => b - a);
console.log(numbers2); // [20, 10, 7, 3]
7) reduce( )
- 배열을 순회하면서 각 요소에 대해 연산을 수행하고, 하나의 결과 값을 반환합니다.
- 두 개의 매개변수를 받으며, 첫 번째는 누적값, 두 번째는 현재 배열의 요소입니다.
const numbers3 = [1, 2, 3, 4, 5];
const sum = numbers3.reduce((p, n) => p + n, 0);
console.log(sum); // 15💌 응용 문제
1. 아래 배열을 " - " 구분자로 합치시오
const array = ["Dog", "Cat", "Rabbit"];
const array2 = array.join("-");
console.log(array2);2. ["red", "blue"] 배열과 ["green", "yellow"] 배열을 합치시오.
const color1 = ["red", "blue"]; const color2 = ["green", "yellow"];
const color3 = color1.concat(color2);
console.log(color3);3. 아래 배열에서 10보다 큰 첫 번째 숫자를 찾으시오.
const num = [3, 8, 12, 25];
const num2 = num.find((item) => item > 10);
console.log(num2);4. 배열을 오름차순으로 정렬하시오.
const sortNum = [55, 23, 89, 12];
const sortNum1 = sortNum.sort((item1, item2) => {
return item1 > item2 ? 1 : -1;
});
console.log(sortNum1);5. 배열의 모든 값을 더하시오.
const addNum = [3, 5, 7, 9];
const addNum2 = addNum.reduce((p, q) => {
return p + q;
}, 0);
console.log(addNum2);
26일차 후기
- 배열 메서드는 어느 정도 알고 있던 부분이라 너무 어렵지는 않았습니다.
- 만들던 투두리스트가 문자열로 반환하는 코드였는데 이번에 로컬스토리지를 쉽게 하기 위해 객체로 변환하였는데... 무언가가 이상합니다.ㅠㅠ φ(-｀Д´-*)
- 객체로 변환하는 과정에서 예상하지 못한 오류가 뜨고.. 하나 고치면 다른 하나가 이상해지는 일이 발생해서 오늘 머리가 진짜 너무 아팠습니다.
- 로컬스토리지를 들어가면 더 어렵겠죠ㅠㅜ...?
- 수정을 하다가 코드가 너무 가독성이 없다고 생각되면 그냥 새 파일에 새로 작성하는데.. 그러다보니 벌써 파일이 3개가 되었습니다.
- 체크리스트의 속성과 수정된 텍스트를 동적으로 객체에 적용시키기 위해 수정을 계속 해봐야할 것 같습니다. (ᗒᗣᗕ)՞
૮꒰ ྀི〃´꒳`〃꒱ა