Array 메서드 | #2-1 Immutable (불변성) 메서드

 

▼ 원본 배열이 변하는 메서드

[JavaScript] Array 메서드 | #1 원본 배열 자체를 수정하는 메서드

---

#2-1 Immutable (불변성) 메서드

"원본 배열을 수정하지않고, 새로운 배열 또는 값을 반환하는 메서드"

 

join()

-모든 배열의 요소를 연결해 하나의 문자열로 변환

 

arr.join(separator)

◾ separator: 배열의 각 요소를 구분할 문자열을 지정합니다. [Optional]

◾ 반환값: 배열의 모든 요소들을 연결한 하나의 문자열을 리턴합니다. 만약 배열의 길이가 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"

---

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 :: 없을 경우

---

includes()

- 문자열 포함여부 확인하기 (Boolean 리턴 - Explorer 지원 X)

 

arr.includes(searchElement, position)

◾ searchElement: 찾고자 하는 배열의 요소를 적습니다.

◾ position: searchElement를 찾기 시작하는 위치를 나타내는 인덱스 값입니다. 기본값은 0입니다. [Optional]

◾ 반환값: 배열 요소를 찾았을 경우 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

 

---

slice()

- 배열 추출하기

 

 

arr.slice(begin, end)

◾ begin: 추출 시작점에 대한 인덱스입니다. [Optional]
◾ end: 추출 종료점에 대한 인덱스입니다. 해당 인덱스 전까지 추출합니다. [Optional]
◾ 반환값: 추출한 요소를 포함한 새로운 배열을 리턴합니다.
◾ 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

---

toString()

- 배열을 문자열로 변환하기

 

arr.toString()

◾ 반환값: 배열을 표현하는 문자열을 리턴합니다.

 

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