JavaScript Array method 2.원본배열을 수정하지 않는 메서드

원본 배열을 수정하지 않고, 새로운 배열 혹은 값을 반환하는 메서드를 Immutable 메서드라고 한다

1.join() - 모든 배열의 요소를 연결해서 하나의 문자로 변환한다.

> arr.join(separator)

· separator: 배열의 각 요소를 구분할 문자열을 지정한다.
· 반환값: 배열의 모든 요소들을 연결한 하나의 문자열을 리턴한다. 배열의 길이가 0이라면 빈 문자열을 리턴한다.
· 요소가 undefined 혹은 null이면 빈 문자열로 변환된다.

let greet = ["H", "e", "l", "l", "o"];
console.log(greet.join());     // "H,e,l,l,o"
console.log(greet.join(""));   // "Hello"
console.log(greet.join("+ ")); // "H+ e+ l+ l+ o"

2.indexof() -문자열의 인덱스 찾기 (정수 리턴)

arr.indexOf(searchElement, position)

· searchElement: 찾고자 하는 배열의 요소를 적는다.
· position: searchElement를 찾기 시작하는 위치를 나타내는 인덱스 값이다.
· 반환값: searchElement 중, 첫 번째로 나온 인덱스를 리턴한다. 만약 찾을 수 없으면 '-1'을 리턴한다.

let fruit = ["apple", "banana", "coconut", "kiwi"];
 
console.log(fruit.indexOf("banana")); // 1
console.log(fruit.indexOf("kiwi"));   // 3
console.log(fruit.indexOf("cat"));    // -1 :: 없을 경우

3.includes() -문자열 포함여부 확인하기 (boolean리턴)

arr.includes(searchElement, position)

· searchElement: 찾고자 하는 배열의 요소를 적는다.
· position: searchElement를 찾기 시작하는 위치를 나타내는 인덱스 값이다. 기본값은 0이다. <필수X>
· 반환값: 배열 요소를 찾았을 경우 true, 찾지 못했을 경우 false를 리턴한다.

let num = [1, 2, 3]
console.log(num.includes(2));     // true
console.log(num.includes(4));     // false
console.log(num.includes(3, 3));  // false
console.log(num.includes(3, -1)); // true

4.slice() - 배열 추출하기

arr.slice(begin, end)

· begin: 추출 시작점에 대한 인덱스이다. <필수X>
· end: 추출 종료점에 대한 인덱스이다. 해당 인덱스 전까지 추출한다.<필수X>
· 반환값: 추출한 요소를 포함한 새로운 배열을 리턴한다.
· end값이 배열의 길이보다 크다면, 배열 끝까지 추출하다.
· end값이 생략되면, slice()는 배열의 끝까지 추출하다.
· start값이 end값보다 크거나 같다면, 빈 배열을 추출하다.

const color = ['red', 'blue', 'green', 'pink', 'white'];
console.log(color.slice(0));     // ["red", "blue", "green", "pink", "white"]
console.log(color.slice(2));     // ["green", "pink", "white"]
console.log(color.slice(2, 4));  // ["green", "pink"]
console.log(color.slice(2, 100));// ["green", "pink", "white"]
console.log(color.slice(-3, 4)); // ["green", "pink"]
console.log(color.slice(2, 2));  // []
console.log(color.slice(4, 2));  // []

배열 복사

/** 배열의 특성인 참조 타입으로 
 *  인해 원본값과 참조한 값이 같이 바뀜
 */
let arr1 = [1,2,3,4,5];
let arr2 = arr1;
arr2[0] = 5;
console.log(arr1); // [5, 2, 3, 4, 5]
console.log(arr2); // [5, 2, 3, 4, 5]
console.log(arr1 === arr2); // true
 
/* slice()를 통해 원본값을 그대로 복사*/
let arr3 = [1, 2, 3, 4, 5];
let arr4 = arr3.slice();
arr4[0] = 5;
console.log(arr3); // [1, 2, 3, 4, 5]
console.log(arr4); // [5, 2, 3, 4, 5]
console.log(arr3 === arr4); // false

6.toString() -배열을 문자열로 반환

arr.toString()

· 반환값: 배열을 표현하는 문자열을 리턴한다.

let num = ["one", 2, "three", 4, 5, "six"];
console.log(num.toString()); // "one,2,three,4,5,six"

<참고 블로그>

https://opentogether.tistory.com/105?category=865289