본문 바로가기
  • 성장일기
공부/JavaScript

배열(Array)

by 3000 2021. 6. 28.

배열(Array)

변수의 종류중 하나로, 배열에는 다양한 값을 저장할 수 있다.

배열의 특징

const animals = ["rabbit","turtle","giraffe"];
[] 안에 값을 넣어 선언을 할 수 있으며,

console.log(animals[0]);
animals[0] [] 안에 인덱스를 넣어 해당 부분에 접근할 수 있다. 

// rabbit

배열은 참조 값을 저장하기 때문에 다음과 같이 얕은 복사로 할당할 경우에

animals2의 값을 바꾸면 animals의 값도 바뀌는 문제가 생길 수 있다.

const animals2 = animals;
animals2[0] = "cat";
console.log(animals);
// ["cat", "turtle", "giraffe"]

console.log(animals2);
// ["cat", "turtle", "giraffe"]

따라서 전개 연산자(...)를 사용해 깊은 복사를 한다면 이를 해결할 수 있다.

const animals2 = [...animals];
animals2[0] = "cat";
console.log(animals);
// ["rabbit", "turtle", "giraffe"]

console.log(animals2);
// ["cat", "turtle", "giraffe"]

배열의 타입

배열은 typeof를 사용할 경우 "object"라 나온다.
그렇기 때문에 object만을 입력받아야 하는 조건을 만들땐, Array.isArray()를 사용하면 된다.
array 타입이 맞을경우 true, 아니면 false를 반환한다.

console.log(Array.isArray(animals));
// true

자주 사용하는 메소드

forEach 배열 순환

animals.forEach((item,index)=>{
    console.log(item,index);
})
// rabbit 0
// turtle 1...

map 배열 순환후 반환

배열 내의 모든 요소 각각에 주어진 함수를 호출, 새로운 배열을 반환한다.
foeEach와 마찬가지로 (item,index,array)를 받아올 수 있다.

const animals = ["rabbit","turtle","giraffe"];
const animals2 = animals.map(item => item);
// ["rabbit","turtle","giraffe"]

push 배열 끝 추가

animals.push("cat");
// ["rabbit","turtle","giraffe","cat"]

pop 배열 끝 제거

animals.pop();
// ["rabbit","turtle","giraffe"]

shift 배열 앞 제거

animals.shift();
// ["turtle","giraffe"]

unshift 배열 앞 추가

animals.unshift("rabbit");
// ["rabbit","turtle","giraffe"]

indexOf 배열 안 인덱스 찾기

animals.indexOf("rabbit");
// 0

splice 인덱스 위치 제거 및 교체

animals.splice(index,number,item1,item2...); // index = 0, number=1;
// ["turtle","giraffe"]

// 여러개 제거하기
animals.splice(1,2);
// ["rabbit"]

// 제거 후 교체
animals.splice(1,1,"cat");
// ["rabbit", "cat", "giraffe"]

slice 배열 복사

const animalsCopy = animals.slice(); // slice(start,end)
// ["rabbit","turtle","giraffe"]

concat 배열 합체

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

기존 배열을 변경하지 않고 새로운 배열을 반환한다.

const animals = ["rabbit","turtle","giraffe"];
const animals2 = ["cat"];
const animalsConcat = animals.concat(animals2);
// ["rabbit","turtle","giraffe","cat"]

join 배열을 하나의 문자열로

기존 배열을 변경하지 않고 새로운 문자열을 반환한다.

const animals = ["rabbit","turtle","giraffe"];
const animalsJoin = animals.join("-"); // ()안에 구분할 문자를 넣는다. ("") 공백 없이
// "rabbit-turtle-giraffe"
반응형

'공부 > JavaScript' 카테고리의 다른 글

유용한 JS 고차함수  (0) 2021.07.07
DOM 조작  (0) 2021.07.05
클로저 함수  (0) 2021.07.01
객체(Object)  (0) 2021.06.29
알면 좋은 자바스크립트 최신 문법  (1) 2021.06.17

댓글