JS Arrays 매서드 join(), split()

학원에서 조그만 프로젝트를 진행한다.
Arrays 배열에 여러 메서드에 대해 공부하고 발표하는것.

정리한 내용들을 여기에 적어보려고 한다.

1. 원본 배열은 변경하지 않고 참조만 하는 메소드

모든 예제에서 참조할 배열은 아래와 같다.

// 문자(과일) 배열 샘플
        var arr = ['🍎','🍊','🍉','🍇','🍍','🍌','🍒','🍆']
        // 숫자 배열 샘플
        var arr1 = [1 , -3 , 10 , 100 , -20 , 30]
        // 숫자+문자 배열 샘플
        var arr2 = ['🍉', 1 , 10, '🍎', -20, 30,'🍊','🍇']

1. join

join() 메서드는 모든 배열을 문자열로 반환을 하는 매서드이다.

// 문자(과일) 배열 샘플
        var arr = ['🍎','🍊','🍉','🍇','🍍','🍌','🍒','🍆']
        

위 과일 배열들을 하나의 문자열로 출력시키는 메서드는 다음과 같다.

var result = arr.join();
console.log(result);
        

이렇게 출력을 하게 되면

각각의 배열들이 하나의 문자열로 출력이 된다.
만약, 배열마다 콜론을 넣고 싶다면

var result = arr.join(;);
console.log(result);
        

join()메서드 안에 넣고싶은 문자를 넣으면 원하는 값을 받을수 있다.

출력결과는 아래와 같다.

2. split()

split() 함수는 String 문자열을 배열로 변환해주는 함수이다.

// 걍 문자열
        var arr3 = '🍎,🍊,🍉,🍇,🍍,🍌,🍒,🍆'

위 변수 arr3을 출력하게 되면 당연히 값은 문자열이 나오게 된다.
하지만 이 변수 arr3을 각각의 인덱스를 가진 배열을 만들고 싶을때는
아래와 같이 함수를 활용해보자

// Split()을 활용하여 문자열을 배열로 변경.
        var result1 = arr3.split(',');
        console.log(result1);

위와 같이 배열로 변환된것을 확인할 수 있다.
그럼 문자열을 배열로 나눌수 있는 기준은 어떻게 될까?
아래의 split() 함수 안에 들어간 값을 잘 확인해보자.

// 걍 문자열
        var arr3 = '🍎,🍊,🍉,🍇,🍍,🍌,🍒,🍆'
        
// Split()을 활용하여 문자열을 배열로 변경.
        var result1 = arr3.split(','); <<<<<<<<확인
        console.log(result1);

위 코드를 보면 split( ' , ' ) split함수안에 콜론이 들어간걸 확인할수 있다.
당연히 문자열의 과일마다 콜론이 들어가 있기 때문에 그 구분자를 기준으로 배열 인덱스를 생성한다고 보면된다.

만약 문자열 arr3이 아래와 같다면 어찌해야할까?

// 걍 문자열
        var arr3 = '🍎ㅎㅇ🍊ㅎㅇ🍉ㅎㅇ🍇ㅎㅇ🍍ㅎㅇ🍌'
        
// Split()을 활용하여 문자열을 배열로 변경.
        var result1 = arr3.split('ㅎㅇ'); <<<<<<<<확인
        console.log(result1);

과일사이에 ㅎㅇ라는 글자를 기준으로 배열을 나누도록 split()안에
ㅎㅇ라는 구분자 를 넣어준다.