자바스크립트 배열 메소드 는 배열을 요소를 조작하는데 사용하게 되는데, 자바스크립트에서 배열(Array)이란 순서가 존재하는 데이터 유형이며, 특정 자료형이 아닌, 서로 다른 유형의 데이터도 자유롭게 담길 수 있는 형태입니다. 또, 데이터 유형뿐만 아니라 객체 데이터 역시 담길 수 있습니다. 즉, 배열 안에 객체를 넣는다던지, 배열안에 또 다른 배열이나 함수 등도 담을 수 있습니다.
초보자가 알고 넘어가야할 자바스크립트 배열 메소드 를 정리해 보았습니다.
기초적인 자바스크립트 메소드 기초 조작 모음
배열 뒤에 요소 추가하기 – push
배열의 가장 마지막에 값을 넣어주는 방식입니다.
const value = [54, 65, "안녕", false ]
//배열.push(넣을 값)
value.push( 50 )50을 가장 마지막에 넣어주고 총 갯수 length 5를 반환합니다.
비단 한개뿐만 아니라 다음과 같이 배열 끝에 n개의 요소를 한꺼번에 넣을 수도 있습니다.
value.push( 99, true )
배열 중간에 요소 추가하기 – splice
배열 중간 위치에 값을 넣어주는 것으로, 넣을 값과 어느 위치에 넣을 것인가를 지정해 주면 됩니다.
// 변수.splice( 위치, 0, 추가할 값)
value.splice( 1, 0, "요소추가" )위의 값 인덱스 1의 위치에 “요소추가”라는 값이 들어가게 됩니다.
const value = [54, 65, "안녕", false ]
value.splice( 1, 0, "요소추가")
인덱스로 배열의 요소 제거하기 – splice
배열.splice( 인덱스, 1 )
const value = [54, 65, "안녕", false ]// 가장 첫번째 인덱스의 값 54를 삭제
value.splice( 0, 1 )
삭제된 값을 리턴하게 됩니다.
배열 내부에서 값 위치 찾기 – indexOf
const value = [54, 65, "안녕", false ]
value.indexOf( '안녕' )아래와 같이 해당 값이 있는 인덱스를 리턴하게 됩니다.
만약 없는 값으로 조회를 했을 경우에는 위의 결과와 같이 -1 을 리턴하게 됩니다.
값으로 배열의 요소 제거하기 – indexOf / splice
indexOf 를 통해서 값으로 배열의 인덱스를 찾고, 찾은 인덱스를 splice로 지워주는 방법입니다.
const value = [54, 65, "안녕", false ]
const index = value.indexOf( '안녕' )
value.splice( index, 1 )indexOf를 통해 안녕이 들어있는 index 2를 찾고 해당 인덱스를 splice를 통해 지워주면 다음과 같은 결과가 나오게 됩니다.
배열에 해당 요소가 포함되어 있는지 확인 – includes
배열안에 해당 요소값이 존재하는지 boolean 형태 true, false로 값을 리턴해 줍니다.
const value = [54, 65, "안녕", false ]
const bFind = value.includes( "안녕" )
const bFind = value.includes( "하세요" )
배열의 마지막 요소 삭제 및 해당 값 가져오기 – pop
pop은 배열의 마지막 요소를 삭제와 동시에 해당 값을 리턴합니다.
const value = [54, 65, "안녕", false ]
const ret = value.pop( )
배열의 병합 – concat
두개의 배열을 합치고자 할 때 사용하는 메소드 입니다.
const value1 = [54, 65, "안녕", false ]
const value2 = [true, "하세요" ]
const merge = value1.concat( value2 )먼저 순서를 잡을 배열에서 concat 메소드를 호출하면 됩니다.
이 메소드는 원래의 배열은 변경하지 않은 상태로 두기 때문에 새로운 병합된 배열을 사용하기 위해서는 리턴값을 통해 받아주어야 합니다.
배열로의 변환, 분할 – split
split을 사용하여 문자열 중 특정한 구분자를 기준으로 분리하고 배열로 생성해 줍니다.
const string = "안녕 하세요 반갑습니다"
const array = string.split( " " )
배열을 문자열로 변환 – toString, join
toString 메소드를 사용하면 배열 내의 요소를 모두 문자열로 연결하여 리턴을 하며 각 요소사이에는 ,(쉼표)가 자동으로 들어가게 됩니다.
const value1 = [54, 65, "안녕", false ]
const string = value1.toString()
이와 비슷하게, join 메소드를 사용할 수도 있는데, join의 경우에는 구분자를 넣어줄 수 있기 때문에 toString의 쉼표를 다른 구분자로 대체할 수 있습니다.
const value1 = [54, 65, "안녕", false ]
const string = value1.join("-")
배열의 위치 뒤집기 – reverse
reverse() 메소드를 사용하게 되면 배열의 위치가 반대로 뒤집히게 됩니다. 역순으로 값을 꺼내올 상황 등에서 유용하게 사용될 수 있습니다.
const value1 = [54, 65, "안녕", false ]
value1.reverse()
배열에서 특정 위치의 배열을 새로 추출하기 – slice
slice() 메소드를 사용하면 원래의 배열은 그대로 두고 지정한 인덱스의 요소를 배열로 반환하게 됩니다. 단, 끝인덱스를 지정하지 않은 경우에는 끝까지 추출되며, 지정한 경우에는 끝인덱스 – 1 자리수까지 추출이 됩니다.
// [].slice( 시작인덱스, 끝인덱스 )
const value1 = [54, 65, "안녕", false ]
const value2 = value1.slice( 2 )
const value1 = [54, 65, "안녕", false ]
const value2 = value1.slice( 1, 2)
이상으로 자바스크립트에서 배열을 다룰 수 있는 메소드에 대해서 알아보았습니다. 상세한 내용은 여기 를 참조하시면 도움이 될 것으로 생각합니다.