✍️ slice()
slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴한다.
원본 배열은 변형시키지 않기 때문에 slice를 적용한 새로운 변수를 선언해주어야 한다.
slice ( n , m ) n부터 m(m의 전)까지 반환
필요에 따라 인자를 최소 1개만 쓸 수도 있다.
첫번째 인자 : index의 시작점
두번째 인자 : index의 끝점
const nums = [1, 2, 3, 4, 5];
const new_nums = nums.slice(1,4);
//시작점 index[1]=2 | 끝점 index[4] = 5
//끝점의 전까지 반환하기 때문에 2,3,4 리턴
console.log(new_nums); //[2,3,4]
console.log(nums); //[1,2,3,4,5]원본 배열인 nums는 변함이 없는것을 확인해볼 수 있다.
첫번째 인자에 음수가 들어가는 경우에는 끝에서부터 해당하는 숫자 만큼의 요소를 배열에 담아 리턴한다.
const nums = [1, 2, 3, 4, 5];
const new_nums = nums.slice(-2);
console.log(new_nums); //[4,5]✍️ splice()
배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용한다.
splice 메서드를 쓸 때는 인자의 순서에 주의해야 한다.
splice( start, delete, item );
필요에 따라 인자를 최소 1개만 사용 가능
첫번째 인자 : index의 시작점
두번째 인자 : 삭제할 요소의 개수
세번째 인자 : 추가하고 싶은 요소
인자를 두개 사용하였을 경우 :
//arr.splice(n,m) : 특정 요소 지움 n부터 시작 , m 개수
const nums = [1, 2, 3, 4, 5];
nums.splice(1,2);
console.log(nums); //[1,4,5]
[1,2,3,4,5] 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려면 아래와 같이 활용할 수 있다.
const nums = [1, 2, 3, 4, 5];
nums.splice(2,1,10);
console.log(nums); //[1,2,10,4,5]보통 댓글 삭제 기능을 구현할 때 splice 메서드를 많이 활용한다.
✍️ concat()
주어진 배열에 기존 배열을 합쳐서 새로운 배열을 반환한다.
원본 배열은 변하지 않으며 새로운 배열이나 원본 배열을 수정해도 서로 영향을 받지 않는다.
const hangeul = ['ㄱ', 'ㄴ', 'ㄷ']
const alphabet = ['a', 'b', 'c'];
console.log(hangeul.concat(alphabet)); //['ㄱ', 'ㄴ', 'ㄷ', 'a', 'b', 'c']배열을 변수에 지정해서 인자로 넘겨줄 수도 있고, 바로 인자에서 배열을 작성해 줄 수도 있다.
const alphabet = ['a', 'b', 'c'];
//배열 2개 이어붙이기
const arr = [1, [2, 3]];
const new_arr = alphabet.concat(arr);
console.log(new_arr); //['a', 'b', 'c', 1, [2, 3]]배열로 전달하지 않아도 배열에 감싸진다.
const nums = [1, 2, 3];
console.log(nums.concat([4,5],6,7)); //[1, 2, 3, 4, 5, 6, 7]concat()은 요소의 중복과 상관없이 배열을 합쳐준다.
✍️ push()
배열의 끝에 하나 이상의 요소를 추가할 수 있다.
const arr = [1, 2, 3];
arr.push(4);
// arr is now [1, 2, 3, 4]✍️ unshift()
배열의 맨앞에 하나 이상의 요소를 추가할 수 있다.
const nums = [1, 2, 3];
nums.unshift(0);
//nums is now [0, 1, 2, 3]
✍️ pop()
배열의 마지막 요소를 제거하며, 제거된 요소를 반환한다.
const arr = [1, 3, 5];
const newArr = arr.pop();
console.log(newArr); //[5]
console.log(arr); //[1, 3]
✍️ shift()
배열의 첫번째 요소를 제거한다.
const arr = [1, 3, 5];
const newArr = arr.shift();
console.log(newArr); //[1]
console.log(arr); //[3, 5]
✍️ reverse()
배열의 순서를 뒤집어준다.
새로운 배열을 생성하는 것이 아닌, 원래 배열에 덮어씌운다.
const numArr = [1, 2, 3, 4, 5];
numArr.reverse();
console.log(numArr); //[5, 4, 3, 2, 1]
✍️ map()
배열을 반복해주는데, callback 함수에서 return한 값으로 매 요소를 수정한 결과를 모아 새로운 배열로 반환해준다.
const numArr = [1, 2, 3];
const squares = numArr.map(num => num * num);
console.log(numArr); //[1, 4, 9]✍️ every()
배열의 모든요소가 true일 경우, true를 반환한다.
한가지 요소라도 false를 반환하면, false를 반환함
const arr1 = [1,2,3,4,5]
function compare (arr1) {
return (arr1 > 3) ? true : false
}
console.log(arr.every(compare)); //false✍️ some()
배열 안의 어떤 요소라도 true이면 true를 반환한다.
const array = [1, 2, 3, 4, 5];
const even = (el) => el % 2 === 0;
console.log(array.some(even)); //true