반응형
스크립트를 사용하는 중에 배열 또는 문자열을 잘라서 사용하는 경우가 많은데
배열 과 문자열을 자르는데 사용하는 동일한 메서드 slice()에 대해 알아보자.
내부적으로는 각각 String.prototype.slice() 와 Array.prototype.slice()로 서로 다르지만
직접 사용을 함에는 같은 방식을 사용한다.
▷ 구문
.slice(beginIndex [, endIndex])
문자열과 배열 둘다 인덱스를 가지는데 그 인덱스를 가지고 잘라서 사용이 가능하다.
예제를 통해 알아보도록 하자.
▷ 예제1) String.prototype.slice()
var str = 'it is mine-it-record tistory blog';
console.log(str.slice(21));
// "tistory blog"
console.log(str.slice(6, 20));
// "mine-it-record"
console.log(str.slice(-4));
// "blog"
console.log(str.slice(-12, -5));
// "tistory"
예제를 보면 알겠지만 endIndex는 생략이 가능하며 생략할 경우 시작점 이후의 문자열을 반환한다.
그리고 특이하게 음수가 사용이 가능한데 음수의 경우 뒤에서 부터 시작한다.
그래서 문자열이 길 경우 양수 음수의 조합으로도 많이 사용하긴 한다.
▷ 예제2) Array.prototype.slice()
var cars = ['Avante', 'Volvo', 'Tesla', 'Sonata', 'Grandeur'];
console.log(cars.slice(2));
// ["Tesla", "Sonata", "Grandeur"]
console.log(cars.slice(2, 4));
// ["Tesla", "Sonata"]
console.log(cars.slice(1, 5));
// ["Volvo", "Tesla", "Sonata", "Grandeur"]
console.log(cars.slice(-2));
// ["Sonata", "Grandeur"]
console.log(cars.slice(2, -1));
// ["Tesla", "Sonata"]
array.slice()의 경우도 string.slice()와 동일하게 인덱스 기준으로 자르며 양수와 음수의 의미도 동일하다.
Array.prototype.slice()의 경우 단순하게 자르기만을 위해 사용한다기보다는 얕은복사를 위해 많이들 사용한다.
배열과 객체의 경우 원본과 항상 이어져있는데 그 연결을 잘라 원본에 영향을 주지않는 새로운 배열을 만들기 위해 사용하는 것이다.
말로 설명이 어렵다면 아래 예제를 통해 알아보자.
▷ 예제3) array.slice()의 얕은복사
var cars = ['Avante', 'Volvo', 'Tesla', 'Sonata', 'Grandeur'];
var arr1 = cars;
arr1[0] = 'spark'
console.log(cars);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]
console.log(arr1);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]
var arr2 = cars.sllce(0);
arr2[0] = 'Avante'
console.log(cars);
// ["spark", "Volvo", "Tesla", "Sonata", "Grandeur"]
console.log(arr1);
// ["Avante", "Volvo", "Tesla", "Sonata", "Grandeur"]
slice()를 통해 원본 배열을 다른 변수에 집어넣었다면 아무리 바꿔도 원본에 영향을 주지 않지만
그냥 주입만 했다면 원본과 복사본 둘다 동시에 변하게된다.
반응형
댓글