splice 와 split :: 활용예제

Study/JavaScript

splice 와 split :: 활용예제

더 멋진 세상을 꿈꾸는 개발자 2020. 7. 12. 17:07

splice

자바스크립트의 배열(Array) 객체에서 제공되는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있다.

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

먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보자.

예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 해보자.

a.splice(2, 0, "7");

우리는 a 라는 배열의 '2'인덱스를 가진 위치에 0개를 삭제하고 7을 대입했다.

그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 된다.

a.splice(0, 0, "7");

우리는 a라는 변수명을 가진 배열의 0번째 인덱스에 0개의 요소를 삭제하고 '7'을 대입하였다.

이제는 splice를 이용해 추가가 아닌 삭제에 대한 예를 살펴보자.

다음 코드를 실행하면 다음의 상태가 된다.

a.splice(2, 1);

우리는 a라는 변수명을 가진 배열의 인덱스가 '2'인 자리에 있는 1개의 요소를 삭제했다.

split

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

문법

string.split( separator, limit )

separator에는 분할의 기준을 넣는다.

예를 들어 쉼표를 기준으로 분할할 때는 ',' 와 같이 한다.

limit로 최대 분할 개수를 정한다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할한다.

예제를 보자. 결과는 그 아래와 같다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p>abc,def,ghi</p>
    <script>
      var jbString = 'abc,def,ghi';
      var jbSplit = jbString.split(',');
      for ( var i in jbSplit ) {
        document.write( '<p>' + jbSplit[i] + '</p>' );
      }
    </script>
  </body>
</html>