소년코딩의 자바스크립트 강좌 08. 배열의 조작 메서드

배열에 들어있는 데이터를 조작하는 메서드들이다.

---

1. concat() 메서드

concat: concaternate(합치다)의 약자.

현재 배열 데이터를 기반으로 새로운 배열을 만드는 메서드다.

이 메서드는 먼저 현재 배열을 복사한 다음 concat() 메서드의 매개변수를 새 배열 마지막에 추가해서 반환한다. 

매개변수가 배열일 경우 새 배열에 매개변수 배열의 데이터를 모두 추가해서 반환하며, 배열이 아닐 경우에는 단순히 해당 데이터를 새 배열 마지막에 추가한다.

var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('yellow', ['black', 'brown']; 
 
console.log(colors);          // ['red', 'blue', 'green']  원래 배열을 그대로 남아있다.
console.log(colors2);         // ['red', 'blue', 'green', 'yellow', 'black', 'brown']

---

2. slice() 메서드

자바스크립트 배열에 포함된 데이터 일부를 가진 새 배열을 만드는 메서드다.

slice() 메서드는 매개변를 두 개 받는데, 각 매개변수는 원래 배열에서 가져올 데이터 범위의 시작과 끝을 나타낸다.  또한 slice() 메서드는 원래 배열을 전혀 건드리지 않는다.

• 매개변수를 하나만 넘길 경우: 해당 인덱스에서 끝까지 모든 데이터를 가져온다.
• 매개변수를 두개 넘길 경우: 첫 번째 매개변수에 해당하는 인덱스부터 두 번째 매개변수에 해당하는 인덱스 바로 앞까지 가져온다.

var colors = ['red', 'blue', 'green', 'yellow', 'purple']; 
var colors2 = colors.slice(1);
var colors3 = colors.slice(1, 4);
var colors4 = colors.slice(4, 3);  
 
console.log(colors);          // ['red', 'blue', 'green', 'yellow', 'purple']
console.log(colors2);         // ['blue', 'green', 'yellow', 'purple']
console.log(colors3);         // ['blue', 'green', 'yellow'] 
console.log(colors4);         // []  첫 번째 매개변수가 두 번째보다 작으면 빈 배열을 반환한다.

---

3. splice() 메서드

자바스크립트 배열의 데이터를 삭제, 삽입, 대체한다.

array.splice(start, deleteCount[, item1[, item2[, ...]]])

• start: 배열에서 시작 위치(변경이 시작되는 인덱스다. )
• deleteCount: start에서 지정한 시작 위치부터 삭제할 요소의 수
• itemN: 삭제할 위치에 추가할 요소

삭제: splice() 메서드를 이용해 숫자 배열 데이터를 원하는 만큼 삭제할 수 있다.

       삭제할 데이터는 첫 번째 매개변수 부터 두 번째 매개변수 만큼이다.

삽입: 매개변수를 세 개 이상 넘기면 배열에 데이터를 삽입할 수 있다.

       splide(매개변수를 삽입할 위치, 0, 삽입할 데이터)

대체: 삽입과 삭제를 조합하면 원하는 데이터를 다른 데이터로 대체할 수 있다.

var colors = ["red", "green", "blue"];
 
/* 삭제: 삭제할 데이터는 첫 번째 매개변수부터 두 번째 매개변수 만큼이다.*/
var removed = colors.splice(0, 1);            // 첫 번째 데이터 제거
console.log(colors);                          // ["green", "blue"]
console.log(removed);                         // ["red"]
// splice() 메서드는 항상 원래 배열에서 삭제한 데이터의 배열을 반환한다.
// 삭제한 것이 없다면 빈 배열을 반환한다다.
 

/* 삽입: 매게변수를 세 개 이상 넘기면 배열에 데이터를 삽입할 수 있다.  */
removed = colors.splice(1, 0, "yellow", "orange");  // 인덱스 1에 데이터 2개 추가
console.log(colors);                                 // ["green", "yellow", "orange", "blue"]
console.log(removed);                                // [] 빈 배열
 

/* 대체: 삽입과 삭제를 조합하면 원하는 데이터를 다른 데이터로 대체 가능하다. */
removed = colors.splice(1, 1, "red", "purple");     // 데이터 두개를 추가하고 1개 제거
console.log(colors);                                 // ["green", "red", ,"purple", "orange", "blue"]
console.log(removed);                                // ["yellow"]

---

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.