[자바스크립트 문법] 자바스크립트 배열(Array) ,push( ), length( ), splice( ) 메서드

안녕하세요~ 이번에는 자바스크립트 배열(Array)에 대해 알아보겠습니다. 배열을 알아보고 push( ), lengh( ), splice( )메서드와 메서드가 동작하는 기능에 대해 간단히 알아보겠습니다. 

목차
1. 배열
1-1. 배열의 개념
1-2. 배열을 사용하는 이유
1-3. 배열의 문법
1-4. 배열을 사용한 예시 코드
2. 배열 메서드 
2-1. push( )
2-2. push( ) 메서드를 사용한 예시코드
2-3. length( )
2-4. length( ) 메서드를 사용한 예시코드 
2-5. splice( )
2-6. splice( ) 메서드를 사용한 예시코드

 

서론

먼저 자바스크립트에서 배열에 입문하기전 배열에 대해 생각해보신적 있으신가요?  뭔가 나열하는 것처럼 생각하실 수도 있으십니다. 그럼 자바스크립트에서 배열의 개념과 배열을 직접 코드로 작성해보면서 "배열" 이라는 것에 한걸음 더 가깝게 접근해봅시다

 

본론

1. 배열(Array)

 

1-1. 배열의 개념 

자바스크립트에서 배열은 여러 개의 데이터를 한 곳에 묶어서 관리할 수 있는 박스 라고 생각하시면 더 이해하기 쉬울 겁니다.

그럼 배열을 왜 사용할까요? 

 

1-2. 배열을 왜 사용할까?

배열을 사용하는 대표적인 이유 3가지
1️⃣ 여러 값을 한 변수에 저장하기 위해
2️⃣ 데이터를 반복적으로 처리하기 위해
3️⃣ 데이터를 추가, 삭제, 정렬하기 쉽게

 

 

1-3. 배열의 문법 

배열은 [  ] 를 사용하여 구분합니다.  [  ] 안에 많은 데이터를 저장하여 하나의 변수에 관리할 수 있습니다.

[예약어] [변수명] = [];  // 배열을 표현하는 구문 [];

⚠️주의 
배열[Array]과 객체{Object}는 다르다.

 

배열은 순서대로 값을 저장하는 "목록🗒 " ,  객체는 "키-값으로 데이터를 저장하는 "사전📙 " 

// 배열의 형태 
const arr = [1, 2, 3,];

 

// 이전에 배웠던 객체의 형태
const object = {
    name : "soon"
}

 

1-4. 배열을 사용한 예시코드 
배열 없이 사용한 코드 VS 배열을 사용하여 많은 데이터를 하나의 변수 안에  관리한 코드

// 배열 없이 여러 값을 관리
let student1 = "수호";
let student2 = "카리나";
let student3 = "윈터";

// 배열로 관리
let students = ["수호", "카리나", "윈터"];
console.log(students[0]); // 수호 출력

이렇게 배열은 [ ] 인덱스 번호로 값을 호출할 수 있습니다.   즉, 코드에서 ["수호"] 가 0번째, ["카리나"] 가 1번째, ["윈터"] 가 2번째가 됩니다. 

 

2. 배열 메서드 

2-1. push( ) 메서드 

 

push( ) 메서드란? 

 배열에다 새로운 값을 맨끝에다가 추가하는 메서드

2-2. push( ) 메서드를 사용한 예시코드

let food= ["자장면", "짬뽕"];

// push : 배열의 맨끝의 값 추가
food.push("탕수육");
console.log(food); // ["자장면", "짬뽕", "탕수육"]

2-3. length( ) 속성

 

length( ) 속성이란? 

배열에 몇 개의 값이 들어 있는지 알려주는 속성

 

 

2-4. length( ) 사용한 예시 코드

let food = ["자장면", "짬뽕", "탕수육", "깐풍기"];
console.log(food.length); // 4

2-5. splice( ) 

배열에서 특정 부분을 추가하거나 삭제하는 데 사용하는 메서드

splice( ) 메서드이 기본 문법 

array.splice(시작 인덱스, 삭제할 요소의 개수, 추가할 요소1, 추가할 요소2, ...);

 

2-4. splice( ) 사용한 예시 코드

let fruits = ["apple", "banana", "cherry", "melon"];

// 인덱스 1부터 2개 요소 삭제
fruits.splice(1, 2);

console.log(fruits); // ["apple", "melon"]

 

let fruits = ["apple", "banana", "cherry"];

// 인덱스 2에 "watermelon"를 추가
fruits.splice(2, 0, "watermelon");

console.log(fruits); // ["apple", "banana", "watermelon", "cherry"]

결론

자바스크립트에서 배열을 사용하면 여러 개의 데이터를 관리할 수 있고,  배열 메서드를 사용하여 배열의 요소를 삭제하거나 추가하고 배열의 길이를 확인할 수 있습니다. 이상으로 배열에 대한 부분을 학습해봤습니다. 감사합니다 😁😁