자바스크립트 기초. Array (2) - 배열 API

워낙 종류가 많고 하나하나 자세하게 설명하면서 넘어가면 몇 날 며칠이 걸릴 것 같아서 이번 글은 수박 겉핥기처럼 빠르게 지나가려고 한다.

아래의 두가지 배열을 가지고 모든 API들을 찍어 먹어 보도록 하자.

 

const Animal = ["lion", "dog", "mouse", "ddoddi", "cat"];
const Num = [2, 4, 6, 8, 10];

*API간의 연관성은 전혀 고려하지 않고 ECMAScript(2015)에 작성되어 있는 순서 그대로 한글로 간소화하여 옮겼다. => 이후는 원본이 아닌 내가 설명을 위해 혹은 그냥 사족으로 남긴 글이다.

 

 

1 ) length : number

: 배열의 길이를 가져오거나 설정한다. 이것은 배열의 가장 높은 숫자를 가진 인덱스보다 하나 더 높은 숫자이다.

=> (그래서 마지막 배열을 불러올 때 length -1을 입력하는 것이다.)

에에~ 데이터가 5개 들어가있는데 length가 5면 똑같은 거 아닌가요? 인덱스는 0부터 시작한다. 정신차리자.

console.log(Animal.length); // 5

 

2) toString(): string

: 배열의 문자열 표현을 반환한다.

=> 일단 익히기는 했는데 다재다능한 join을 두고 굳이 toString을 써야할 이유가 있을까?

console.log(Animal.toString()); // lion,dog,mouse,ddoddi,cat

 

3) toLocaleString() : string

: 배열의 문자열 표현을 반환한다. toLocaleString메서드를 사용하여 변환.

해당 국가의 문화 혹은 관습에 맞게 Locale을 변환한다.

console.log(Num.toLocaleString("ar-EG")); // ٢,٤,٦,٨,١٠

 

4) pop(): T

: 배열의 마지막 요소를 제거하고 반환한다. 배열이 비어있으면 undefined를 반환한다.

console.log(Animal.pop()); // cat
console.log(Animal); // ['lion', 'dog', 'mouse', 'ddoddi']

 

5) push():T

: 배열 끝에 새로운 요소룰 추가하고 배열의 새로운 길이를 반환한다.

console.log(Animal.push("cat")); // 5
console.log(Animal);  //  ['lion', 'dog', 'mouse', 'ddoddi', 'cat']

 

6) concat ( ..items:ConcatArray<T>[]):T[]

: 두 개 이상의 배열을 결합하며 기존 배열을 수정하지 않고 새 배열을 반환한다.

const stigma = Animal.concat(Num);
console.log(stigma); // ['lion', 'dog', 'mouse', 'ddoddi', 'cat', 2, 4, 6, 8, 10]

 

7) join(separator?:string):string

: 배열의 모든 요소를 지정된 구분 기호 문자열로 구분하여 문자열에 추가한다.

=> toString과 똑같은 역할을 하는데 구분 기호 문자열도 마음대로 바꿀 수 있다.

const homunculus = Animal.join("-");
console.log(homunculus); // lion-dog-mouse-ddoddi-cat

 

8) reverse():T[];

: 배열의 요소를 뒤집는다. 배열을 변경하고 동일한 배열에 대한 레퍼런스를 반환한다.

console.log(Animal.reverse()); // ['cat', 'ddoddi', 'mouse', 'dog', 'lion']
console.log(Animal); // ['cat', 'ddoddi', 'mouse', 'dog', 'lion']
console.log(Num.reverse()); // [10, 8, 6, 4, 2]

 

9) Shift():T||undefined

: 배열의 가장 첫 번째 인덱스에 있는 요소를 제거하고 값을 반환한다. 배열이 비어있다면 undefined를 반환하고 배열을 수정하지 않는다.

console.log(Animal.shift()); // cat
console.log(Animal); // ['ddoddi', 'mouse', 'dog', 'lion']

 

10) slice(start?:number, end?:number): T[]

: 뱌열과 섹션의 복사본을 반환한다. 시작과 끝 모두 음수 인덱스를 사용하여 배열 끝에서 오프셋을 나타낼 수 있다. ( ex -2는 배열에서 마지막 두 번째 요소를 나타낸다)  시작 지점과 끝 지점을 지정하지 않았다면 배열의 시작부터 끝까지 범위가 지정된다.

=> 원본을 수정하지 않는다.

console.log(Animal.slice(0, 2)); // ['ddoddi', 'mouse']
console.log(Animal); // ['ddoddi', 'mouse', 'dog', 'lion']

 

11) sort(compareFn?:(a: T, b: T)) => number):this;

: 배열을 자리에 정렬한다. 이 메서드는 배열을 변경하고 동일한 배열에 대한 레퍼런스를 반환한다.

=> 문자열의 경우에는 아무런 값도 입력하지 않고 호출해도 문자열 순서대로 배열이 되지만 숫자는 아스키 코드표 순서대로 배열되기 때문에 우리가 원하는 오름차순이나 내열차순으로 정렬되지 않는다. 따라서 a - b나 b - a를 입력해줘야 한다.

쉽게 이야기하자면 return a - b;라고 입력했을 때 a가 b보다 작으면 음수가 될 것이다, 그러면 양수가 나올 때까지 값을 바꿔서 계산한다. 모든 계산 값이 양수가 나올 때까지 계산해서 오름차순으로 정렬하는 것이다. b - a의 경우 반대로 내림차순이다.

Animal.sort();
console.log(Animal); // ['ddoddi', 'dog', 'lion', 'mouse']
Num.sort();
console.log(Num); // [10, 2, 4, 6, 8]
Num.sort(function (a, b) {
  return a - b;
});
console.log(Num); // [2, 4, 6, 8, 10]

 

12) splice(start number, deletecountnum?) : T[];

: 배열에서 요소를 제거한다. 그리고 필요한 경우 그 자리에 새 요소를 삽입하며 삭제된 요소 변환.

=> slice와 다르게 기존 배열을 수정한다.

console.log(Animal.splice(0, 2)); // ['ddoddi', 'dog']
console.log(Animal); // ['lion', 'mouse']
console.log(Animal.splice(0, 0, "ddoddi", "dog")); // []
console.log(Animal); // ['ddoddi', 'dog', 'lion', 'mouse']

 

13) unshift(..items:T[]): number;

: 배열의 시작 부분에 새로운 요소를 삽입하고 새로운 배열의 길이를 반환한다.

console.log(Animal.unshift("cat")); // 5
console.log(Animal); // ['cat', 'ddoddi', 'dog', 'lion', 'mouse']

 

14) indexOf(searchElement:T, fromindex?:number):number

: 배열에서 처음 만나는 값의 인덱스를 반환하거나 존재하지 않는다면 -1을 반환한다.

console.log(Animal.indexOf("dog")); // 2
console.log(Animal.indexOf("Trex")); // -1

 

15) lastIndexOf(searchElement:T, fromindex?:number):number

: indexOf와 기능은 같으나 인덱스를 마지막으로부터 역방향으로 검색한다.

=> 역방향으로 검색한다고 숫자가 뒤집히는 것은 아니다.

console.log(Animal.lastIndexOf("cat")); // 0
console.log(Animal.lastIndexOf("Trex")); // -1

 

16) every<S extend T>(precicate: (value: T, index:number, array: T[]) => value is S, this Arg?:any): this is S[];

: 지정된 콜백 함수가 배열의 ' 모든 '요소에 true를 반환하는지 여부를 결정

console.log(Num.every((item) => item % 2 === 0)); // Num의 모든 값이 짝수인가?
                                                  // true
console.log(Num.every((item) => item % 3 === 0)); // false

 

17) forEach(callbackfn: (value:T, index:number, array:T[]) => void, thisArg?:any):void

: 배열의 각 요소마다 지정된 작업을 수행한다.

=> forEach는 return이 없다. 

const NewAnimal = Animal.forEach(function (name) {
  console.log(name + 꾸);//cat꾸 ddoddi꾸 dog꾸 lion꾸 mouse꾸 순차 반환
});
console.log(NewAnimal); //undefined

 

18)map<U>(callbackfn:(value:T,index:number,array:T[])=>U, thisArg?:any):U[];

: 배열의 각 요소에 정의된 함수를 호출하고 결과가 포함된 배열을 반환한다.

=> forEach와의 가장 명확한 차이는 return의 존재 유무다.

const newAnimal = Animal.map(function (name) {
  return name + "뿡";
});
console.log(Animal); // ['cat', 'ddoddi', 'dog', 'lion', 'mouse']
console.log(newAnimal); // ['cat뿡', 'ddoddi뿡', 'dog뿡', 'lion뿡', 'mouse뿡']

 

19) filter (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];

: 콜백 함수에 지정된 조건을 충족하는 배열 요소 반환

const FilterAPI = Num.filter((Num) => Num < 4);
console.log(Num); // [2, 4, 6, 8, 10]
console.log(FilterAPI); // [2]

 

20)reduce(callbackfn: (previousValue: T, currentValue: T, curremtindex: number, array:T[])) => T):Tl

:배열의 모든 요소에 대해 지정된 콜백 함수를 호출. 콜백 함수 반환 값은 누젹된 결과이며 다음 콜백 함수 호출 시 인수로 제공.

=> total + var, 0에서 시작 값을 0으로 정해준 것이다. 0 + 2의 결과인 2가 previous값에 등록되고 currentvalue 값에 등록된 4와 더해지고 결과 값인 6이 다시 previous에 등록되고 .. 배열을 모두 읽을 때까지 반복한다.

console.log(Num); // (5) [2, 4, 6, 8, 10]
const Calculater = Num.reduce((total, val, idx, Num) => total + val, 0);
console.log(Calculater); // 30

 

21)reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

: 기능은 reduce와 같으나 우측에서부터 누산을 시작한다.

console.log(Animal); // ['cat', 'ddoddi', 'dog', 'lion', 'mouse']
const Animalhoarder = Animal.reduceRight((name, element) => name + element);
console.log(Animalhoarder); // mouseliondogddoddicat

 

번외)split(splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[];

: 문자열을 배열로 변경한다.

=>String API로 분류되어 있으나 배열과 많은 관계가 있는 것 같아 들고왔다.

const practice = "apple, smasung, MS";
const Practice = practice.split("-");
console.log(Practice); // ['apple, smasung, MS']