TIL : Javascript Array

javscript는 다른 언어와는 다르게 타입을 동적으로 정의되게 때문에 하나의 자료구조에 타입이 서로 다른 Object들을 담을 수 있다. 항상 같은 타입을 담으려고 하쟈 ㅎㅎ

선언과 APIs 정리!

선언

const arr = new Array();
const arr2 = [1,2,3];

출력 방식

for

const arr = ["apple", "banana", "carrot", "mango"];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for...of

const arr = ["apple", "banana", "carrot", "mango"];

for (let value of arr) {
    console.log(value);
}

forEach!!!!

배열 안 각각의 element에 대한 callback 함수를 실행할 수 있다!!즉 배열의 element마다 우리가 설정한 함수를 호출한다고 이해하자!!

• 사용법!

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

• 총 두 가지의 parameter가 존재한다!
• ?:가 붙은 두번째 parameter는 선택 사항이다!
• 첫 번째 parameter는 콜백함수로, 내가 설정한 함수를 배열의 요소 하나 하나 마다 호출해 주는 것!

arr.forEach(function (value, index, arr) {
    console.log(value, index, arr);
});

Arrow function을 사용하여 더욱 간결하게 적용할 수 있다.

arr.forEach((value, index, arr) => {
    console.log(value, index, arr);
});

add, delete , copy

배열의 끝에다 add, delete

push, pop

const arr = ["apple", "banana", "carrot", "mango"];

arr.pop();
arr.push("peach");

console.log(arr);

이 때! pop()을 사용해 꺼내온 요소는 변수에 저장해 사용할 수 있다!!

const arr = ["apple", "banana", "carrot", "mango"];

const element = arr.pop();

console.log(arr);
console.log(element);

배열의 첫부분 add, delete

shift, unshift

const arr = ["apple", "banana", "carrot", "mango"];

const ele = arr.shift();
arr.unshift("orange");
console.log(arr);
console.log(ele);

• 마찬가지로 shift를 통해 return된 요소를 변수에 저장해 활용할 수 있다.
• 이 두 가지 방법 중 성능적으로 더 효율적인 경우는 pop과 push다!
• pop과push는 배열의 다른요소들에 영향을 미치지 않고, 마지막 부분의 값에만 영향을 미치기 때문이다.
• 반면, shift,unshift의 경우에는 다른 배열들이 더하고 뺀 부분을 채워가며 인덱싱을 다시 해줘야 하기 때문에 더 많은 비용을 필요로 한다!

앞 뒤 말고 내가 원하는 시점에서 add , delete!!

splice

사용법

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

• 첫 번째 parameter에서는 어디서 부터 시작 할것인지
• 두 번째 parameter에서는 몇개나 지울 것인지 정해주면 된다(optional)
• 두 번째 parameter가 optional이기 때문에, 첫 번째 parameter만 입력해 준다면 해당 index 부터 끝까지 다 지워버린다!

const arr = ["apple", "banana", "carrot", "mango"];

arr.splice(2, 3);

console.log(arr);

• 결과는 index 2 ~ 3 까지인 carrot, mango를 지웠으니
• ["apple","banana"] 두가지만 남게 된다!

사용법2

splice(start: number, deleteCount: number, ...items: T[]): T[];

• 이 api가 좋은 이유!! 파라미터를 추가적으로 입력해, 원하는 인덱스에 값을 추가할 수도 있다!

const arr = ["apple", "banana", "carrot", "mango"];

arr.splice(2, 2, "grape", "melon");

console.log(arr);

배열 합치기!! ( concat )

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

parameter에 합치고자 하는 배열을 넣어주면 합쳐진 새로운 배열을 생성해 낸다!

const arr = ["apple", "banana", "carrot", "mango"];

const arr2 = ["pineapple", "egg"];

const mixedArr = arr.concat(arr2);
console.log(mixedArr);

index 찾기! ( searching )

const arr = ["apple", "banana", "carrot", "mango"];

//index 찾기
console.log(arr.indexOf("banana")); //1
console.log(arr.indexOf("peach")); //-1
console.log(arr.includes("mango")); //true
console.log(arr.includes("peach"));//false

그런데 만약 배열에 중복된 값이 존재한다면, index를 어떻게 찾아야할까?

lastIndexOf

const arr = ["apple", "banana", "carrot", "mango", "banana"];

console.log(arr.indexOf("banana")); //1
console.log(arr.lastIndexOf("banana")); //4

• indexOf는 배열에서 가장 먼저 등장하는 요소의 index값을 return한다.
• lastIndexOf는 같은 요소가 여러개 존재하더라도, 가장 마지막에 있는 해당 index 값을 return 한다!