[JavaScript] 배열의 접근자 메서드

접근자 메서드

기존 배열을 수정하지 않고 다른 모습으로 가공한 새로운 문자열 or 배열로 반환한다.

 

종류

• join
• concat
• slice
• indexOf & lastIndexOf
• toString & toLocaleString

join 메서드

배열의 모든 요소 값을 문자열로 변경하고 인수로 받은 문자로 연결해서 문자열을 반환한다.

• 요소 값이 undefined, null일 경우 그 요소 값을 빈 문자로 간주
• 인수로 받은 문자를 지정하지 않으면 default는 쉼표(,)다.

let a = ["A", "B", "C"];

a.join();
a.join("/");

 

결과

"A,B,C" // default

"A/B/C" // a.join("/");

"string" // typeof a.join("/");

 

concat 메서드

인수로 받은 값을 그 배열의 요소로 추가해서 새로운 배열을 생성한다.

• 배열이 인수일 때 그 배열을 펼쳐, 각각의 요소를 기존 배열에 추가 (배열 자체가 들어가는 것 아님)
• 인수 값이 어떤 객체의 참조면 그 참조 값을 복사(얕은 복사). 따라서 원본 객체를 수정하면 concat 메서드가 반환한 배열의 요소도 함께 바뀜.
• 배열이 인수일 때 그 배열의 요소로 또 다른 배열을 갖고 있을 경우, 그 배열은 배열 자체로 들어감

- 기본 형태

let b = [item ...];
b.concat(item, item, ... items);

let b = ["A", "B", "C"];
b.concat(["1", "2"], "Z", "Y", true, 10);

결과

(9) ["A", "B", "C", "1", "2", "Z", "Y", true, 10] // b.concat

(3) ["A", "B", "C"] // 기존 배열 b를 수정하지 않음

 

- 인수로 객체의 참조를 받을 때

let bb = ["A", "B", "C"];
let cc = ["100", "200"];
bb.concat(["1", "2"], "Z", "Y", cc);

cc = ["AA", "BB"]; // cc 값 변경

bb.concat(["1", "2"], "Z", "Y", cc);

결과

(9) ["A", "B", "C", "1", "2", "Z", "Y", "100", "200"]

(9) ["A", "B", "C", "1", "2", "Z", "Y", "AA", "BB"] // cc 값 변경

 

- 인수로 받은 배열 안에 또다른 배열을 갖고 있을 때

let bbb = ["A", "B", "C"];
bbb.concat("D", [["E", "F", "G"]]);

결과

(5) ["A", "B", "C", "D", Array(3)] // Array(3) => ["E", "F", "G"]

 

slice 메서드

배열의 일부 요소를 제거하여 그것으로 새로운 배열을 반환한다. 제거한 요소가 없을 경우 빈 배열을 반환한다.

 

- 기본 형태

let d = [item, item, ...];
d.slice(begin, end);

• begin : 제거할 요소의 시작 위치 인덱스. 음수를 입력하면 그 음수 값과 배열 길이(length)를 더한 값을 시작 위치로 간주한다. 생략하면 0으로 간주한다.
• end : 제거할 요소의 종료 위치 인덱스. 주의할 점은 end에 적힌 인덱스에 위치한 요소 이전까지 제거한다. 음수를 입력하면 그 음수 값과 배열 길이(length)를 더한 값을 마지막 위치로 간주한다. 바꿔 말하면 음수는 뒤에서 n번째라는 뜻이다. 생략하면 배열의 끝으로 간주한다.

let d = ["A", "B", "C", "D", "E", "F"];

d.slice(1, 4);
d.slice(1, -1);
d.slice(-2, -3);
d.slice(-3, -2);

 

결과

(3)["B", "C", "D"]

(4) ["B", "C", "D", "E"]

[] // 제거된 요소가 없으니 빈 배열

["D"]

 

indexOf & lastIndexOf 메서드

배열 안에서 인수로 지정한 값을 검색해서 가장 먼저 찾은 요소의 인덱스를 반환한다.

• 찾지 못했을 경우 -1 반환
• indexOf : 인덱스가 작은 쪽부터 순서대로 검색
• lastIndexOf : 인덱스가 큰 쪽부터 역순으로 검색

기본 형태

let e = [item, item ...];
e.indexOf("value", start);

• 첫 번째 인수 : 검색할 값
• 두 번째 인수 : 시작 인덱스 위치.
  • 생략하면 0으로 간주한다.
  • 배열 길이를 넘는 값을 입력하면 검색되지 않는다. => -1 반환
  • 값이 음수일 때는 값에 배열 길이를 더한 값을 시작 위치로 간주한다.

let e = ["A", "A", "B", "C", "D", "E", "F"];

e.indexOf("A");
e.lastIndexOf("A");

문자열 A를 검색하려고 했는데 배열 e에는 A가 두 개가 존재한다. 이때 indexOf와 lastIndexOf를 사용했을 때의 인덱스 위치는 다르게 된다. 

 

결과

0 // indexOf
1 // lastIndexOf

 

lastIndexOf와 동일한 인덱스를 반환하고 싶다면 아래와 같이 시작 위치를 지정하면 된다.

e.indexOf("A", 1);

결과

1

 

배열 길이를 초과하는 값을 시작위치로 설정

e.indexOf("A", 7);

 결과

-1

 

toString & toLocaleString 메서드

배열의 요소를 문자열로 변환하여 쉼표로 연결한 문자열을 반환한다.

• Object.prototype에 있는 같은 이름의 메서드를 다시 정의한 것이다.
• toString 메서드는 join 메서드와 동일한 결과를 반환한다.
• toLocaleString 메서드는 해당 지역에 맞는 언어로 번연한 문자열로 변환한다.

let date = new Date();
let a = ["A", "B", "C", date, ["AA", "BB"]];

a.toString();

a.toLocaleString();

a.join();

결과 

"A,B,C,Thu Sep 10 2020 12:10:29 GMT+0900 (대한민국 표준시),AA,BB" // a.toString();

"A,B,C,Thu Sep 10 2020 12:10:44 GMT+0900 (대한민국 표준시),AA,BB" // a.join();

"A,B,C,2020. 9. 10. 오후 12:10:38,AA,BB" // a.toLocaleString();