자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods)

splice와 slice로 배열 자르기

splice는 배열의 특정 위치에서 요소를 삭제하거나 교체할 때 쓰입니다. 첫 번째 인자는 시작 인덱스, 두 번째 인자는 삭제할 개수예요. 예를 들어 arr.splice(1, 2)는 인덱스 1부터 2개를 지웁니다. 삭제된 요소는 반환값으로 배열 형태로 돌아오니, 필요하면 변수에 담아 활용하세요.

두 번째 인수에 0을 넣으면 아무것도 지우지 않고 중간에 새 요소를 삽입할 수 있습니다. arr.splice(1, 0, 100, 200)처럼 쓰면 인덱스 1 위치에 100과 200이 추가되죠. 이처럼 splice 하나로 삭제·추가·교체를 모두 처리할 수 있어 실무에서 정말 자주 등장합니다.

반면 slice는 원본을 건드리지 않고 일부를 복사해 새 배열을 반환합니다. slice(1, 4)는 인덱스 1부터 3까지(4는 미포함) 가져오고, 인수를 생략하면 끝까지 복사합니다. 이전에 문자열에서 배웠던 slice와 동일한 규칙이라 기억하기 쉽습니다. 원본을 유지하면서 데이터를 가공하고 싶을 때 slice를 선택하세요.

forEach·indexOf로 배열 순회와 검색

forEach는 배열을 순회하며 각 요소에 함수를 실행합니다. 콜백 함수의 첫 번째 매개변수는 요소 값, 두 번째는 인덱스, 세 번째는 배열 자체입니다. 보통 값과 인덱스만 사용하죠. 예를 들어 userList.forEach((item, idx) => console.log(idx, item))처럼 쓰면 번호와 함께 출력할 수 있습니다.

indexOf는 특정 값의 인덱스를 찾아줍니다. 없으면 -1을 반환하고, 두 번째 인수로 검색 시작 위치를 지정할 수 있어요. lastIndexOf는 뒤에서부터 찾습니다. 단순히 “값이 있는지”만 확인하고 싶다면 includes를 쓰는 게 더 직관적입니다. includes는 true/false만 돌려주니까요.

find·filter·map·join으로 실전 활용

find는 조건을 만족하는 첫 번째 요소를 반환합니다. 콜백으로 복잡한 조건(예: 짝수 찾기, 객체 속성 비교)을 넣을 수 있어 indexOf보다 강력합니다. 조건에 맞는 요소가 없으면 undefined를 돌려주죠. filter는 조건을 만족하는 모든 요소를 새 배열로 만들어 줍니다. find와 문법은 같지만 결과가 배열이라는 점이 다릅니다.

map은 각 요소를 변형해 새 배열을 생성합니다. 기존 배열을 건드리지 않고 “나이로 adult 여부 추가” 같은 작업을 할 때 유용합니다. join은 배열을 문자열로 합칠 때 쓰고, 반대로 split은 문자열을 배열로 나눕니다. 구분자를 생략하면 쉼표로 연결되고, 공백이나 특수문자를 넣으면 원하는 형태로 출력됩니다. 마지막으로 Array.isArray()로 진짜 배열인지 확인하는 습관을 들이면 타입 에러를 줄일 수 있어요.