JS : splice(), filter(), delete

splice()

🧶 참고 자료
MDN Array.prototype.splice()
DaleSeo 자바스크립트 배열의 slice()와 splice() 함수

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

✨ 배열의 길이를 변하게 한다.
✨ 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

🧩 splice(A,B) : A번 인덱스 요소부터 B개를 삭제

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];

// [
//  'maroon',   'tan',
//  'salmon',   'snow',
//  'oldace',   'silver',
//  'azure',    'ivory',
//  'lavender'
// ]
console.log(color);
// 9
console.log(color.length);

// 3번 인덱스 요소부터 5개 요소 삭제
// [ 'salmon', 'snow', 'oldace', 'silver', 'azure' ]
console.log(color.splice(3,5));
// 4
console.log(color.length);

// [ 'maroon', 'tan', 'salmon', 'lavender' ]
console.log(color);

🧩 splice(A,0, "string") : 요소 삭제 없이 A번 인덱스에 "string" 추가

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);

// 4번 인덱스 위치에 RED 추가
color.splice(4, 0, "RED");

// [
//   'maroon', 'tan',
//   'salmon', 'snow',
//   'RED',    'oldace',
//   'silver', 'azure',
//   'ivory',  'lavender'
// ]
console.log(color);
// 9
console.log(color.length);


// 7번 인덱스 위치에 GREEN, PINK 추가
color.splice(7, 0, "GREEN", "PINK");

// [
//   'maroon', 'tan',
//   'salmon', 'snow',
//   'RED',    'oldace',
//   'silver', 'GREEN',
//   'PINK',   'azure',
//   'ivory',  'lavender'
// ]
console.log(color);
// 12
console.log(color.length);

🧩 splice(A, B, "string") : A번 인덱스에 요소 B개 삭제하고 "string" 추가

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);


// 3번 인덱스부터 요소 5개 삭제하고 ALICEBLUE 추가
color.splice(3, 5, 'ALICEBLUE');

// [ 'maroon', 'tan', 'salmon', 'ALICEBLUE', 'lavender' ]
console.log(color);
// 5
console.log(color.length);


// 2번 인덱스부터 요소 1개 제거하고 YELLOW, PLUM 추가
color.splice(2, 1, 'YELLOW', 'PLUM');

// [ 'maroon', 'tan', 'YELLOW', 'PLUM', 'ALICEBLUE', 'lavender' ]
console.log(color);
// 6
console.log(color.length);

🧩 splice(A) : A번 인덱스 포함해서 이후의 모든 요소 제거

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];
// 9
console.log(color.length);


// 5번 인덱스부터 끝까지 제거
color.splice(5)

// [ 'maroon', 'tan', 'salmon', 'snow', 'oldace' ]
console.log(color);

// 3번 인덱스부터 끝까지 제거
color.splice(3);

// [ 'maroon', 'tan', 'salmon']
console.log(color);

filter()

🧶 참고 자료
MDN Array.prototype.filter()
평범한 직장인의 공부 정리 fiter함수 사용 방법
JS : Array.map(), Array.filter(), Array.reduce()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새료운 배열로 반환한다.

✨ 테스트를 통과하지 못했으면 빈 배열을 반환한다.

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// [ 12, 130, 44 ]
console.log(filtered);

delete 연산자

🧶 참고 자료
MDN delete 연산자

delete 연산자는 객체의 속성을 제거한다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수한다.

✨ 배열의 길이 변화는 없다.
✨ 반환 값은 true이다. 단, 비엄격 모드에서 속성이 자신의 속성이며 설정 불가능 한 경우 false이다.

const color = ['maroon', 'tan', 'salmon', 'snow', 'oldace', 'silver', 'azure', 'ivory', 'lavender'];

// color[5] 요소 삭제
delete color[5];
// true
console.log(delete color[5]);


// [
//   'maroon',
//   'tan',
//   'salmon',
//   'snow',
//   'oldace',
//   <1 empty item>,
//   'azure',
//   'ivory',
//   'lavender'
// ]
console.log(color);


// undefined
console.log(color[5]);