[JavaScript] 배열(Array)의 매서드

iberis2·2022년 12월 29일
0

배열의 매소드

✍🏻 배열인지 확인 : .Array.isArray()

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];
console.log(Array.isArray(alphabet)) // true

💡 Mutable Method 원본 배열을 변경하는 매서드

.shift() .unshift() .pop() .push()

💡 Immutable Method 원본 배열을 변경하지 않는 매서드

.slice() .concat() .join()

✍🏻 배열의 첫 요소를 삭제 : .shift() , .splice(0, 1)

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];

alphabet.shift();
console.log(alphabet); // [ 'b', 'c', 'd', 'e', 'f', 'g' ]

alphabet.splice(0, 1);
console.log(alphabet); // [ 'c', 'd', 'e', 'f', 'g' ]

✍🏻 배열의 마지막 요소를 삭제 : .pop(), .splice(배열.length - 1, 1)

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];

alphabet.pop();
console.log(alphabet); // [ 'c', 'd', 'e', 'f' ]

alphabet.splice(alphabet.length - 1, 1);
console.log(alphabet); // [ 'c', 'd', 'e' ]

✍🏻 배열의 첫 요소로 값 추가 : .unshift(value), .splice(0, 0, value)

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];

alphabet.unshift("B");
console.log(alphabet); // [ 'B', 'c', 'd', 'e' ]

alphabet.splice(0, 0, "A");
console.log(alphabet); // [ 'A', 'B', 'c', 'd', 'e' ]

✍🏻 배열의 마지막 요소로 값 추가 : .push(value), .splice(배열.length, 0, value)

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];

alphabet.push("F");
console.log(alphabet); // [ 'A', 'B', 'c', 'd', 'e', 'F' ]

alphabet.splice(alphabet.length, 0, "G");
console.log(alphabet); //[ 'A', 'B', 'c', 'd', 'e', 'F', 'G' ]

✍🏻 배열 (복사하기)자르기 : .slice(num)

인덱스[num]부터새로운 배열로 복사하는 것이라고 이해하면 편함!
✔️ 원본 배열은 변하지 않음

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];

let copyAlphabet = alphabet.slice(1); // alphabet[1]부터 복사
console.log(copyAlphabet); // [ 'b', 'c', 'd', 'e', 'f', 'g' ] 

copyAlphabet = alphabet.slice(-1) // 음수의 경우 .slice(배열.length -1)와 동일
console.log(copyAlphabet); // [ 'g' ]

copyAlphabet = alphabet.slice(0, 3); //0번 ~ 3번 이전까지의 인덱스까지 복사
console.log(copyAlphabet); // [ 'a', 'b', 'c' ]

// 원본 배열은 변하지 않음
console.log(alphabet); // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

✍🏻 배열 합치기 : 기준배열.concat(붙이려는 배열/요소)

메서드를 호출한 배열 뒤에 각 '요소'를 순서대로 붙여 새로운 배열을 만듦
✔️ 원본 배열은 변하지 않음

붙여넣는 인수가 배열이면 그 구성요소가 순서대로 붙는다.

let alphabet = ["a", "b", "c"];
let number = [1, 2, 3, 4, 5, 6];

let newAry = number.concat(alphabet);
console.log(newAry); // [1, 2, 3, 4, 5, 6, 'a', 'b', 'c']

// 배열 2개 이어붙이기
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

console.log(num1.concat(num2, num3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

붙이려는 인수가 배열이 아니면 인수 자체가 요소로 들어간다.

let number = [1, 2, 3, 4, 5, 6];

let newAry = number.concat(7);
console.log(newAry) // [1, 2, 3, 4, 5, 6, 7]

값과 배열 모두 합치는 경우에도 요소들만 합쳐진다

let number = [1, 2, 3];

let newAry = number.concat(4, [5, 6]);
console.log(newAry) // [1, 2, 3, 4, 5, 6]

✍🏻 배열의 요소를 string로 합치기: .join()

모든 요소를 연결해 하나의 새로운 문자열로 만들어냄
()괄호 안에 들어가는 인자로 요소들을 이어준다.
✔️ 원본 배열은 변하지 않음

let alphabet = ["a", "b", "c", "d", "e", "f", "g"];
console.log(alphabet.join()) // a,b,c,d,e,f,g
console.log(alphabet.join("")) // abcdefg
console.log(alphabet.join(" ")) // a b c d e f g
console.log(alphabet.join("+")) // a+b+c+d+e+f+g

✍🏻 배열에서 특정 값 찾기

  • 배열.indexOf(item) : 배열 안에 item 이 있으면, item의 인덱스가 리턴
    없으면 -1 이 리턴
    여러번 포함되어 있으면 처음 발견 된 인덱스가 리턴
let brands = ["Google", "Naver", "Kakao", "Naver", "Yahoo"];

console.log(brands.indexOf("Kakao")); // 2
console.log(brands.indexOf("Daum")); // -1
  • 배열.lastIndexOf(item) : 뒤에서부터 탐색
let brands = ["Google", "Naver", "Kakao", "Naver", "Yahoo"];

console.log(brands.lastIndexOf("Naver")); // 3
console.log(brands.indexOf("Daum")); // -1
  • 배열.includes(item) : true / false로 리턴
    ❌ 단, internet explorer에서 지원하지 않음 주의
let brands = ["Google", "Naver", "Kakao", "Naver", "Yahoo"];

console.log(brands.includes("Naver") // true
console.log(brands.includes("Daum")  // false

✍🏻 배열 뒤집기 : .reverse()

let brands = ["Google", "Naver", "Kakao", "Naver", "Yahoo"];

brands.reverse();
console.log(brands); // [ 'Yahoo', 'Naver', 'Kakao', 'Naver', 'Google' ]

💡배열 추가 매소드

profile
React, Next.js, TypeScript 로 개발 중인 프론트엔드 개발자

0개의 댓글