slice
slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다.
splice 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않습니다.
그렇기 때문에 이 메서드를 사용할 때는 slice 메서드를 적용한 새로운 변수를 선언해주어야 합니다.
위의 그림에서는 인자 2개가 들어갔지만, slice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다.
- 첫번째 인자 : 배열의 index의 시작점
- 두번째 인자 : 배열의 index의 끝점
예를 들어, [1,2,3,4,5] 라는 배열이 있을 때, 숫자 2~4까지만 남기고 싶을땐 다음과 같이 메서드를 활용하시면 됩니다.
const nums = [1, 2, 3, 4, 5];
const nums_new = nums.slice(1,4);
console.log(nums) // [ 1, 2, 3, 4, 5 ]
console.log(nums_new) // [ 2, 3, 4 ]콘솔창을 확인해보면 시작점인 index가 1인 요소부터 끝점인 index가 4인 요소를 제외한 2,3,4를 담은 배열을 리턴합니다.
slice 메서드를 사용한 이후에 원본 배열인 nums를 콘솔창에서 확인해보면 변함없는 것을 확인할 수 있습니다.
그렇기 때문에 slice를 사용할 때는 꼭 새로운 변수명을 할당해주어야 합니다.
첫번째 인자에 음수가 들어가는 경우도 있습니다.
const nums = [1, 2, 3, 4, 5];
const nums_new = nums.slice(-2);
console.log(nums) // [1, 2, 3, 4, 5]
console.log(nums_new) // [4, 5]음수가 들어갈 경우 끝에서부터 해당하는 숫자 만큼의 요소를 배열에 담아 리턴하게 됩니다.
문제를 풀어보겠습니다.
array 감옥에 갇힌 2를 구해주세요.
const prisoners = [[0, 1], [1, 2], [0, 0]]; //코드 입력 saveNumberTwo(prisoners) // 2
slice 메서드의 괄호 안에 음수만 넣어서 2가 출력되려면 어떻게 코드를 입력해야 할까요?
function saveNumberTwo(prisoners) {
const temp = prisoners.slice(-2);
const answer = temp[0][1];
return answer;
}- 우선 const temp = prisoners.slice(-2); 에서 [[1,2], [0,0]] 이 출력됩니다.
- 그리고 [[1,2], [0,0]] 중에서 [0][1] 는 "0번째 인덱스 중에서 1번째 인덱스"를 뜻합니다.
- 따라서 2가 나옵니다.
splice
splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용합니다.
splice 메서드를 쓸 때는 인자의 순서에 주의해야 합니다.
위의 그림에서는 인자 3개가 들어갔지만, splice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다.
- 첫번째 인자 : 배열의 index의 시작점
- 두번째 인자 : 삭제할 요소의 개수
- 세번째 인자 이후 : 추가하고 싶은 요소
예를 들어, [1, 2, 3, 4, 5] 라는 배열에서 숫자 3을 제거하고 그 자리에 10을 추가하려고 합니다.
그럴 땐 다음과 같이 메서드를 활용하시면 됩니다.
const num = [1, 2, 3, 4, 5];
num.splice(2, 1, 10);
console.log(num); // [ 1, 2, 10, 4, 5 ]splice 메서드를 언제 쓸까, 이런게 진짜 필요할까 의문이 들 수도 있지만, 의외로 일상생활 속의 기능에 자주 쓰입니다.
보통 댓글 삭제 기능을 구현할 때 splice 메서드를 많이 활용한답니다.😊
다른 예제를 봅시다.
우유를 제거하고, 두유를 추가하는 함수를 구현해주세요.
goToMart() // ['햄', '김밥김', '단무지', '두유', '시금치', '쌀', '당근', '계란']
function goToMart() {
const shoppingCart = ['햄', '김밥김', '단무지', '우유', '시금치', '쌀', '당근', '계란'];
shoppingCart.splice(3, 1, '두유');
console.log(shoppingCart);
return shoppingCart;
}
goToMart() //['햄', '김밥김', '단무지', '두유', '시금치', '쌀', '당근', '계란']우유자리에서 1개의 요소만 삭제되고 두유가 추가되었습니다.
split
split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다.
* separator(구분자) : 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니다. 값을 정하지 않으면 str과 동일한 값을 가진 문자 배열을 반환합니다.
* limit : 반환하는 문자 배열의 최대 크기입니다. 값을 정하지 않으면 문자 배열의 크기는 제한되지 않습니다.
split() 함수 문법
string.split(separator, limit)
1. 구분자만 인자로 전달
구분자만 인자로 전달하면 문자열을 구분자로 분리하고 배열에 담아 리턴합니다.
const text = 'Hello, world, Javascript!';
const splitResult = text.split(',');
console.log(splitResult) // ["Hello", " world", " Javascript!"]2. 구분자와 limit을 인자로 전달
const myString = 'Hello World. How are you tody?';
const splits = myString.split(' ', 3);
console.log(splits); //["Hello", "World.", "How"]let str = 'Hello, World, Javascript';
console.log(str.split(',', 0)); // []
console.log(str.split(',', 1)); // ['Hello']
console.log(str.split(',', 2)); // ['Hello', ' World' ]
console.log(str.split(',', 3)); // ['Hello', ' World', ' Javascript']3. 구분자와 limit을 전달하지 않음
인자로 아무것도 전달하지 않으면 문자열 전체를 배열에 담아 리턴합니다. 길이가 1인 배열이 됩니다.
let str = 'Hello, World, Javascript';
console.log(str.split()); // [ 'Hello, World, Javascript' ]4. 배열을 구분자로 사용하기
separator가 배열일 경우 분할에 사용하기 전에 우선 문자열로 변환이 됩니다.
const myString = 'this|is|me|world';
const splits = myString.split(['|']);
console.log(splits); // ["this", "is", "me", "world"]
const myString2 = 'ca,bc,a,gca,bca,bc';
const splits2 = myString2.split(['a', 'b']);
console.log(splits2); // ["c", "c", "c", "c", "c"]5. 정규표현식(Regex)으로 문자열 자르기
아래와 같이 정규표현식을 인자로 전달하여 문자를 자를 수 있습니다.
let str = 'Hello,World?Java!script';
let arr = str.split(/[!,?]/);
console.log(arr); // [ 'Hello', 'World', 'Java', 'script' ]6. Destructuring
아래와 같이 [a, b, c]처럼 리턴받으면, 각각의 변수에 값이 저장됩니다.
let str = 'Hello World Javascript';
let [a, b, c] = str.split(' ');
console.log(a); // Hello
console.log(b); // World
console.log(c); // Javascript출처 : wecode
