반응형
Array 객체
배열을 다루는 객체
파괴적 메서드와 비파괴적 메서드로 구분
파괴적 메서드
메서드를 사용했을 때, 원본 데이터를 변경하는(손상 시키는) 메서드
비파괴적 메서드
메서드를 사용했을 때, 원본 데이터를 변경하지 않는(손상 시키지 않는) 메서드
파괴적 메서드, 비파괴적 메서드 👀 한 눈에 구분하기
파괴적 메서드 | 비파괴적 메서드 |
push() | forEach() |
pop() | filter() |
unshift() | find() |
shift() | findIndex() |
sort() | includes() |
reverse() | join() |
🚨 더 많은 메서드들이 많다 🚨
// 파괴적 메서드
const arr = ['a', 'b', 'c'];
arr.pop();
console.log(arr); // [ 'a', 'b' ]
// 파괴적 메서드
const arr = ['a', 'b', 'c'];
arr.push('x');
console.log(arr); // [ 'a', 'b', 'c', 'x' ]
// 파괴적 메서드
const arr = ['a', 'b', 'c'];
arr.unshift('x');
console.log(arr); // [ 'x', 'a', 'b', 'c' ]
// 파괴적 메서드
const arr = ['a', 'b', 'c'];
arr.shift();
console.log(arr); // [ 'b', 'c' ]
// 파괴적 메서드
const arr = ['a', 'x', 'b', 'p', 'c', 'r'];
arr.sort();
console.log(arr); // [ 'a', 'b', 'c', 'p', 'r', 'x' ]
// 파괴적 메서드
const arr = ['a', 'b', 'c'];
arr.reverse();
console.log(arr); // [ 'c', 'b', 'a' ]
// 비파괴적 메서드
const arr = ['ellie', 'programming', 'world'];
arr.forEach(function(v){
console.log(v);
})
console.log(arr); [ 'ellie', 'programming', 'world' ]
// 비파괴적 메서드
const arr = ['ellie', 'programming', 'world'];
const filterArr = arr.filter((arr) => arr.length > 5)
console.log(arr); // [ 'ellie', 'programming', 'world' ]
console.log(filterArr); // [ 'programming' ]
// 비파괴적 메서드
const arr = [5, 12, 8, 130, 44, 10, 3];
const findArr = arr.find((element) => element > 10)
console.log(arr); // [5, 12, 8, 130, 44, 10, 3];
console.log(findArr); // 12
// 비파괴적 메서드
const arr = [5, 12, 8, 130, 44, 10, 3];
const findArrIndex = arr.findIndex((element) => element > 10)
console.log(arr); // [5, 12, 8, 130, 44, 10, 3];
console.log(findArrIndex); // 1
// 비파괴적 메서드
const arr = [5, 12, 8, 130, 44, 10, 3];
const includesArr = arr.includes(10);
console.log(arr); // [5, 12, 8, 130, 44, 10, 3]
console.log(includesArr); // true
// 비파괴적 메서드
const arr = ['ellie', 'programming', 'world'];
const joinArr = arr.join();
console.log(arr); // [ 'ellie', 'programming', 'world' ]
console.log(joinArr); // ellie,programming,world
반응형
'HTML + CSS + 자바스크립트' 카테고리의 다른 글
객체 속성 다루기 # 접근방법, 객체 속성 추가, 삭제, 객체의 특성 : 얕은 복사 (2) | 2023.12.08 |
---|---|
즉시 실행 함수 사용하기 (0) | 2023.12.07 |
자바스크립트 함수 정의하는 3가지 방법 (0) | 2023.12.06 |
if문 VS switch문 : 어떤걸 사용해야할까?? 차이점은?? (2) | 2023.12.05 |
문자열에 ''(작은 따옴표), ""(큰 따옴표) 넣으면 에러 해결하기 (2) | 2023.12.04 |