[JavaScript] 자바스크립트의 배열과 내장 함수

리액트 프로젝트를 진행하면서 내가 자바스크립트의 기초가 많이 부족하다는 것을 뼈저리게 느낀다. 사실 순서가 이게 되면 안되는데 라이브러리를 사용하면서 기초가 부족하다는걸 느끼다니... 학과 수업때 자바스크립트를 잘 썼던 기억이 있어서 내가 자바스크립트를 잘한다고 느꼈나보다. 현실은 군대 다녀와서 다 날아갔지만 🥲

CRUD

심지어 CRUD가 뭐의 약자인지도 몰랐다. 데이터 구조를 다루는 문법을 익힐 때는 기본적으로 CRUD 문법을 확인하면 된다.

• Create (생성)
• Read (읽기)
• Update (수정)
• Delete (삭제)

배열의 기본적인 것은 생략하고 앞으로 프로젝트에서 사용할만한 실용적인 함수들을 살펴보겠다.

배열 삭제 (splice)

배열변수.splice(삭제를 시작할 인덱스, 삭제를 시작할 인덱스부터 몇개를 삭제할 것인지 개수)

const exArray = [1, 2, 3, 4];
exArray.splice(1, 3);
console.log(exArray);

// result => [1]

shift

배열의 첫 번째 아이템을 삭제하고, 뒤에 있는 아이템을 앞으로 당김

const exArray = [1, 2, 3, 4];
exArray.shift();
console.log(exArray);

// result => [2,3,4]

concat

두 배열 합치기

const exArray1 = [1, 2, 3, 4];
const exArray2 = [5, 6, 7, 8];
let exArray = exArray1.concat(exArray2);
console.log(exArray);

// result => [1,2,3,4,5,6,7,8]

pop

배열의 끝에 있는 아이템을 리턴해주고, 해당 아이템은 배열에서 삭제

const exArray = [1, 2, 3, 4];
let data = exArray.pop();
console.log(exArray);
console.log(data);

// result => [1,2,3] \n 4

join

아이템 사이에 문자열을 넣어서 하나의 문자열로 만들어줌

let exArray = [1, 2, 3, 4];
exArray = exArray.join("/");
console.log(exArray);

// result => 1/2/3/4

slice

배열의 일부분 반환. slice(a,b) a아이템 인덱스부터 시작해서, b-1 아이템 인덱스까지 추출

let exArray = [1, 2, 3, 4];
exArray.slice(0,1);
console.log(exArray.slice(0,1));

// result => [1]

forEach

간단하게 배열의 각 아이템을 가져옴

let exArray = [1, 2, 3, 4];
exArray.forEach(item => {
  console.log(item);
})

// result => 1 \n 2 \n 3 \n 4

map

배열의 각 아이템에 정의된 함수 적용, 새로운 배열을 리턴

const exArray = [1, 2, 3, 4];
const exArray2 = exArray.map((item) => item * 2);
console.log(exArray2);

// result => [2,4,6,8];

indexOf

배열에서 지정한 데이터가 위치한 인덱스 번호를 리턴

const exArray = [1, 2, 3, 4];
const index = exArray.indexOf(3);
console.log(index);

// result => 2

findIndex

배열의 아이템이 객체일 경우, 해당 객체에서 지정한 데이터 위치를 찾을 수 있는 방법

const array = [
  {
    id: 1,
    name: 'wonse',
  },
  {
    id: 2,
    name: 'shin',
  }
];

console.log(array.indexOf('wonse'));
console.log(array.findIndex(item => item.name === 'wonse'));

// result => -1 \n 0