목차
JavaScript Array는 자바스크립트에서 가장 유용하고 자주 사용되는 데이터 구조 중 하나입니다. 배열을 다루는 메소드들과 활용 예시를 알아봅시다.
JavaScript Array
1. splice()
splice() 메소드는 배열에서 특정 요소를 제거하거나 추가하는 데 사용됩니다.
예시:
<code>
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // [2, 3] 제거
console.log(arr); // [1, 4, 5]
arr.splice(1, 3, 100, 200); // 인덱스 1부터 3개 제거하고 100과 200 추가
console.log(arr); // [1, 100, 200, 5]
let arr = ["나는", "철수", "입니다"];
arr.splice(1, 0, "대한민국", "소방관"); // 인덱스 1부터 아무것도 제거하지 않고 "대한민국"과 "소방관" 추가
console.log(arr); // ["나는", "대한민국", "소방관", "철수", "입니다"]
</code>2. slice()
slice() 메소드는 배열의 일부를 추출하여 새로운 배열을 반환합니다.
예시:
<code>
let arr = [1, 2, 3, 4, 5];
arr.slice(1, 4); // [2, 3, 4]
</code>3. concat()
concat() 메소드는 배열을 합쳐서 새로운 배열을 반환합니다.
예시:
<code>
let arr = [1, 2];
arr.concat([3, 4]); // [1, 2, 3, 4]
arr.concat([3, 4], [5, 6]); // [1, 2, 3, 4, 5, 6]
arr.concat([3, 4], 5, 6); // [1, 2, 3, 4, 5, 6]
</code>4. forEach()
forEach() 메소드는 배열의 각 요소를 반복하며 함수를 실행합니다.
예시:
<code>
let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item, index, arr) => {
console.log(`${index + 1}. ${item}`);
});
// 1. Mike
// 2. Tom
// 3. Jane
</code>5. indexOf()와 lastIndexOf()
indexOf()는 배열에서 특정 요소의 인덱스를 찾습니다. lastIndexOf()는 배열에서 뒤에서부터 찾습니다.
예시:
<code>
let arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7
arr.lastIndexOf(3); // 7
</code>6. includes()
includes() 메소드는 배열에 특정 요소가 포함되어 있는지 확인합니다.
예시:
<code>
let arr = [1, 2, 3];
arr.includes(2); // true
arr.includes(8); // false
</code>7. find()와 findIndex()
find() 메소드는 주어진 조건에 맞는 첫 번째 요소를 반환합니다. findIndex()는 해당 요소의 인덱스를 반환합니다.
예시:
<code>
let arr = [1, 2, 3, 4, 5];
let result = arr.find((item) => {
return item % 2 === 0;
});
console.log(result); // 2
let userList = [
{ name: 'Mike', age: 30 },
{ name: 'Jane', age: 27 },
{ name: 'Tom', age: 10 }
];
const result = userList.find((user) => {
return user.age < 19;
});
console.log(result); // { name: 'Tom', age: 10 }
</code>8. reverse()
reverse() 메소드는 배열을 역순으로 재정렬합니다.
예시:
<code>
let arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
</code>9. map()
map() 메소드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 새로운 배열을 반환합니다.
예시:
<code>
let userList = [
{ name: 'Mike', age: 30 },
{ name: 'Jane', age: 27 },
{ name: 'Tom', age: 10 }
];
let newUserList = userList.map((user, index) => {
return { ...user, isAdult: user.age > 19 };
});
console.log(newUserList);
// { name: 'Mike', age: 30, isAdult: true },
// { name: 'Jane', age: 27, isAdult: true },
// { name: 'Tom', age: 10, isAdult: false }
</code>10. join()과 split()
join() 메소드는 배열의 요소를 문자열로 합치고, split() 메소드는 문자열을 배열로 분할합니다.
예시:
<code>
let arr = ["안녕", "나는", "철수야"];
let result = arr.join();
console.log(result); // "안녕,나는,철수야"
</code>이렇게 다양한 JavaScript Array 메소드를 적절히 활용하면 데이터를 다루는데 편리하고 효율적인 코드를 작성할 수 있습니다. 자바스크립트에서 배열을 다룰 때 유용한 이러한 메소드들을 잘 활용하여 더 나은 개발을 할 수 있기를 바랍니다.
