오늘은 배열(Array)과 배열에서 쓰이는 메서드 몇가지를 알아보겠습니다!

배열(Array)이란?

하나의 변수에 값을 여러개 저장할수 있는 자료형을 배열(Array)라고 합니다.

배열(Array) 선언하기😃

배열(Array)은 여러 개의 데이터값을 하나의 배열 이름으로 묶어서 대괄호[]로 선언 할수있다.
대괄호[]안에 값을 입력하지 않고 선언하면 빈 배열이 만들어 지기도 합니다.!

배열명 ["값1", "값2", .....]   //기본적인 배열
배열명 [ ]                    // 빈 배열 선언

계절 이름을 변수에 할당하는 프로그램을 만들고 싶을때 배열을 사용 할때와 안할때 코드를
예시로 한번 보겠습니다!

let spring = "봄";
let summer = "여름";
let fall = "가을";
let winter = "겨울";

이렇게 배열을 사용하지 않을때는 변수를 4개나 정의해서 각각 할당해야해서 번거롭습니다
하지만 배열을 사용하면 아래처럼 간단하게 코드를 작성 할수있습니다.

let season = ["봄", "여름", "가을", "겨울"];

인덱스(index)

인덱스(index)는 쉽게 말하면 배열안에 있는 여러개의 요소를 번호로 표시한다고 생각하면 됩니다
말로만하면 이해하기 어려우니 아래 직접 만든 그림 그림을 보겠습니다!

배열(Array)의 메서드

배열에서 쓰이는 메서드는 엄청 많지만 오늘은 6가지만 알아 볼려고 합니다!

✔️concat메서드

concat은 서로 다른 배열을 합쳐서 새로운 배열을 반환해주는 메서드 입니다.

let nums = [1, 2, 3 , 4];            // [1, 2, 3, 4]
let chars = ["a", "b", "c", "d"];    // ["a", "b", "c", "d"]
//2개를 연결할때
let numsChars = nums.concat(chars);   // [1, 2, 3, 4, "a", "b", "c", "d"]
//3개를 연결할때
let third = nums.concat(chars, nums); // [1, 2, 3, 4, "a", "b", "c", "d", 1, 2, 3, 4]
//배열에 값 이어붙일때
let num1 = nums.concat(1, 2, 3);      // [1, 2, 3, 4, 1, 2, 3]

✔️slice 메서드

시작과 끝 인덱스를 지정해서 요소를 꺼내는 기능을 하는 메서드다.

첫번째 인자에는 배열의 인덱스의 시작점 이고
두번째 인자에는 배열의 인덱스의 끝점 이 들어갑니다!

et colors = ["red", "green", "blue", "white", "black"];
//인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
let colors2 = colors.slice(2);     // ["blue", "white", "black"]
//인덱스 값이 2부터 3인 요소까지 꺼내기
let colors3 = colors.slice(2, 4);  // ["blue", "white"]  
// 인덱스 값이 음수가 들어갈때
let colors4 = colors.slice(-1)     //["black"]

✔️splice 메서드

splice는 배열 내의 특정한 요소를 삭제하거나, 다른 요소를 대치하거나, 새로운 요소를 추가할때 상요하는 메서드입니다.

첫번째 인자는 배열의 인덱스의 시작점 이고
두번째 인자는 삭제할 요소의 개수 이고
세번째 인자 이후에는 추가하고 싶은 요소를 넣으면 됩니다.
그림에는 인자 3개가 들어갔지만 필요에 따라 인자를 최소 1개만 쓸 수도 있습니다.

let numbers = [1, 2, 3, 4, 5];
//인자가 1개인 경우 요소 삭제하기
let newNumbers = numbers.splice(2);         // [3, 4, 5]
console.log(numbers);                       // [1. 2]
//인자가 2개인 경우 요소 삭제하기
let study = ['html', 'css', 'js'];
let newStudy = study.splice(1, 1);          // ['css']
console.log(study);                         // ['html', 'js']
//인자가 3개인 경우 요소 삭제 및 추가하기
let study = ['html', 'css', 'js'];
let newStudy = study.splice(2, 1, 'wep');   // ['js']
console.log(study);                         // ['html', 'css', 'wep']

✔️push 메서드와 unshift 메서드

push랑 unshift 메서드는 서로 반대 되는 메서드라서 같이 설명 하겠습니다.
push 메서드는 배열 끝에 요소를 추가하는 메서드이고
unshift 메서드는 배열 맨 앞에 요소를 추가하는 메서드입니다.

let nums = [1, 2, 3, 4];
let newNums = nums.push('a', 'b');     // [1, 2, 3, 4, 'a', 'b']
let nums = [1, 2, 3, 4];
let newNumbs = nums.unshift('a', 'b'); // ['a', 'b', 1, 2, 3, 4]

✔️pop 메서드

pop 메서드는 배열 뒤에 있는 요쇼를 꺼낼때 사용 하는 메서드입니다.

let chars = ['a', 'b', 'c', 'd'];
let result = chars.pop()              // ['d']
console.log(chars)                    // ['a', 'b', 'c']

참고

MDN Wep Docs 배열
MDN Wep Docs array 메서드
JAVASCRIPT.INFO 배열
📒 Do it! HTML+CSS+자바스크립트 웹 표준의 정석

회고🤔

요번 주제인 배열과 메서드는 요번주 내내 문제를 풀면서 나를 머리아프게도 하고 좌절하게도 만들었던
파트 였었는데 계속 검색도 하고 스터디를 같이 하는 동료한테 물어보기도 하다보니 조금씩 이해가 되는거 같았다.

늘 MDN이나 구글에 검색을해서 이게 뭐였지? 하면서 찾아보면서 하다보니 내가 이렇게 기억력이
안좋았나 생각도 들었는데 다들 똑같은 방법으로 검색하면서 한다고 해서 그나마 위안이 조금 된거 같다.

요번 글은 설명을코드로 주구장창 할려고 했던거 같은데 다음에는 내가 나중에 글을 볼때 어떤 내용인지 한눈에 들어오고 한번에 이해가 되도록 간결하게 설명할수 있도록 노력을 해야겠다