Array.slice 사용법

 

---

JavaScript 내장 함수

JavaScript에는 여러가지 함수가 내장되어있다.

다양한 기능들을 직접 구현하기보다, 기본 제공해주는 함수를 알고 사용한다면 매우 경제적일 것이다.

따라서 JavaScript가 제공해주는 유용한 함수들을 공부해서, 필요할 때에 사용하도록 하자.

이번에는 Array (=배열) 형태에 사용할 수 있는 함수 중에서,

배열.slice() 를 알아보자

 

---

우공이산 (愚公移山)

「우공(愚公)이 산을 옮긴다.」는 말로,

남이 보기엔 어리석은 일처럼 보이지만 한 가지 일을 끝까지 밀고 나가면,

언젠가는 목적(目的)을 달성(達成)할 수 있다는 뜻.

하나씩 함수를 알아가보자!

외울 필요도 없다. slice()가 필요한 때에 지금 이 노트를 기억해서, 필요한 곳에 적용하기만 하면 된다.

 

---

Array.slice()

역할 : 배열의 뒷부분부터 하나씩 구성원을 제거해주는 함수!

 

Array.slice( 원하는위치부터_원하는위치포함 , 원하는지점까지_원하는지점은미포함 )

    1) 원하는위치부터_원하는위치포함 :

 

        (1) 0은 첫번째, 1은 두번째, 2는 세번째, ... 위치를 의미함.

        (2) 만약 음수를 넣으면, 배열의 뒷부분부터 역방향으로 0번째, 1번째, 2번째 위치를 선택함.

    2) 원하는지점까지_원하는지점은미포함 :

        (1) 지정하지 않으면 끝까지 자르기~

        (2) 원하는 지점까지라는 말은, 원하는 지점 자체는 포함하지 않는다는 말.

ex) Array.slice( 0, 2 ) : 원본의 0의 위치에서, 원본의 2의 위치까지 똑 잘라줘 (원본 2의 위치는 주지말고~)

ex) Array.slice( 2, 4 ) : 원본의 2의 위치에서, 원본의 4의 위치까지 똑 잘라줘 (원본 4의 위치는 주지말고~)

 

?? 0의 위치가 무슨말이야

우리나라 친구들은 "하나~, 두울~, 세엣~, ... " 이라고 숫자를 세는데 (서수)

외국 친구들은 "0~, 1~, 2~, ..." 이렇게 숫자를 센다고 한다.

그러니까 0번째는 첫번째 자리를 의미함!

 

* 연습을 위해 2가지 배열을 만들어보자.

const 배열1 = [1, 2, 3]

const 배열2 = ['하나', '두울', '세엣'];

 

▶ 1. 배열 그 자체를 console.log 찍어보기

console.log(배열1)

console.log(배열2)

// 기대되는 결과 : [ 1, 2, 3 ]

// 기대되는 결과 : [ '하나', '두울', '세엣' ]

 

▶ 2. 그런데 배열의 내용을 원하는 만큼 잘라내서 사용하고 싶다면~?

😎이때 사용하는 것이 바로 .slice() !!

1. 원하는 위치에,
2. 원하는 만큼 배열을 slice(=잘라내기) 할 수 있다!
3. slice한 결과를 원본 배열은 수정하지 않고, 새로운 배열을 만들어내는 방법으로 작동한다.


즉, const 배열1 = [ 1, 2, 3 ] 이 있을 때,
배열1.slice( 원하는위치, 원하는만큼 ) 을 아무리 많이 작동시켜도

원본 const 배열1 = [ 1, 2, 3 ] 은 그 값이 바뀌지 않는다는 의미이다.

▶︎ 원본이 바뀌지 않음을 확인해보자.

console.log(배열1)

배열1.slice(0, 1)

console.log(배열1)

// 기대되는 결과 : [ 1, 2, 3 ]

// 기대되는 결과 : [ 1, 2, 3 ]

 

▶︎ 원본이 안바뀌다니, 작동은 한거 맞아??          ( ??? : 응 했어~)

console.log(배열1)

console.log( 배열1.slice(0, 1) )

// TMI

// 1) 0의 위치부터,

// 2) 1의 위치까지 (1의 위치는 미포함),

// 3) 새로운 배열을 만들어내서,

// 4) console.log() 찍어보기.

console.log(배열1)

 

🥸 본인도 처음 문법을 공부할 때, 0번째가 이해가 안되서 정말 헷갈리고 어려웠던거 같당...

여러분들도 index니, 색인이니 뭐니 하는 것들에 대해서

단어를 너무 어렵게 생각하지말공

"색인 = 순서"

"외국 0번째 = 한국 1번째"

 

나중에 공부가 더해지면 더 큰 의미를 이해하더라도,

처음에는 요렇게 쉽게 생각해보는 것은 어떨까?

 

 

* 결국 slice() 함수는, 배열의 내용을

  1) 원하는 위치에서,

  2) 원하는 지점까지 (원하는 지점 자체는 미포함),

  3) 새로운 배열을 만들어내는 방식으로

작동하는 함수이다!