javascript 유용한 배열 메서드

안녕하세요. 남산돈가스 입니다.

오늘은 엄청 자주 쓰이면서 쓸 때마다 헷갈리는 javascript 배열 메서드에 대해서 몇가지 알아보도록 하겠습니다.

1. push & pop
   배열을 사용하는데 가장 기본적인 개념으로 데이터를 + 하고 - 하는 메서드입니다.
바로 다음에 다루겠지만, push - pop, unshift - shift 를 짝지어 설명하는 이유는, 두 쌍 모두 데이터를
+, - 하는 메서드지만 해당 데이터를 배열의 어느 곳에다 + 하냐, 어디에서 - 하냐 다르기 때문입니다.

이 push & pop 은 데이터를 배열의 가장 끝 부분에서 핸들링하는 메서드입니다.

var arr1 = [ 1,2,3,4,5 ];
 
arr1.push(6);
arr1.push(7);
console.log(arr1);                // [1,2,3,4,5,6,7]
arr1.pop();                            
console.log(arr1);                // [1,2,3,4,5,6]


2. unshift & shift

 앞에서 언급했지만, unshift - shift 는 배열의 가장 앞에서 데이터를 핸들링하는 메서드입니다. 사용법은 push & pop 과 동일합니다.

var arr2 = [ 'a', 'b' ]
 
arr2.unshift('c');
arr2.unshift('d');
console.log(arr2);                  // [ 'd', 'c', 'a', 'b' ] 
arr2.shift();
console.log(arr2);                  // [ 'c', 'a', 'b' ] 


3. join

 join 메서드는 배열데이터를 ',' 구분자로 구분하여 string 으로 쉽게 변환해주는 기능을 한다.
기본적으로 ',' 를 구분자로 구분하지만 구분자를 설정할 수도 있다.

var arr3 = [ 1, 2, 3, 'a' ]
 
var arrToStr = arr3.join();
console.log(arrToStr);                  // 1,2,3,a
arrToStr = arr3.join('/');
console.log(arrToStr);                  // 1/2/3/a
 

4. splice

splice 메서드는 배열 내 특정 원소를 제거할 수 있는 메서드이고, 이 특정 원소를 제거하려면 해당 원소에 대한 index를 알아야한다. 또한, 범위를 지정하여 원소를 제거할 수 도 있다.

사용법 - splice( '제거를 시작할 index'  , '설정한 index부터 삭제할 갯수 지정' )

var arr4 = [ 1,2,3,4,5,6,7 ]
 
console.log(arr4)       // [1,2,3,4,5,6,7]
 
// arr4배열의 0번째 index부터 2개의 원소 삭제
arr4.splice(0,2)
console.log(arr4)       // [3,4,5,6,7]
 
// 파라미터는 한개만 넘길 경우, 해당 index부터 마지막 원소까지 모두 삭제
arr4.splice(1);
console.log(arr4)       // [3];


5. map

map 메서드는 배열의 각 원소를 함수의 인자로 전달하고 해당 함수로 연산 후 새로운 배열로 반환해주는 기능을 합니다. 이 기능은 ES6에 추가 된 배열 메서드입니다.

var arr5 = [ 3,4,5 ]
 
console.log(arr5)       // [ 3,4,5 ]
 
// arr5내 원소를 각각의 x라는 원소에 접근하여 연산식을 수행한 뒤 원소를 배열로 반환
var newArr = arr5.map(x=>{
// 각 원소들의 값에 1을 더하여 새로운 배열로 반환
return x + 1;
})
 
console.log(newArr)       // [ 4,5,6 ]


6. forEach

forEach 메서드는 반복순회 메서드이며, 이 역시 ES6부터 추가 된 기능입니다.

var arr6 = [ 2,4,6 ]
 
console.log(arr6)       // [ 2,4,6 ]
 
// arr6의 각각의 원소를 x라는 값으로 접근, i는 인덱스값으로 자동 접근
arr6.forEach( (x,i) => {
console.log('[ ' + i +' ] : '+ x )
})
 
// 위 forEach 순회문과 동일한 결과값
for(var i=0; i < arr6.length; i++){
console.log('[ ' + i +' ] : '+ arr6[i] )
}


여기까지 javascript의 유용한 메서드에 대해서 알아보았습니다. 이 정도 사용법만 알고계신다면, javascript 내에서 배열을 다루는데 아주 유용하실 것이라고 생각합니다.

감사합니다.