자바스크립트 배열 생성, 추가, 삭제 방법

자바스크립트에서 배열(Array)을 사용하면 데이터를 조금 더 간단하고 깔끔하게 표현하고 저장할 수 있습니다. 이번 포스트는 자바스크립트에서 배열을 생성하는 방법, 생성된 배열에 새로운 값을 추가하는 방법, 기존 배열에 있는 값을 삭제하는 방법을 다룹니다. 

 

Javascript

 

자바스크립트, 배열은 무엇인가? 

자바스크립트에서 배열은 Object와 같은 리스트를 의미합니다. 실제로 F12키를 눌러서 나오는 console에서 배열을 생성하고, typeof를 했을 때 반환하는 값도 Object입니다. 배열은 다양한 값을 보관해주는 하나의 object를 의미합니다. 

javascript array

다른 변수와 다른 점은 배열을 사용하면 각각의 값에 접근할 수 있고, for 문이나 배열 함수를 이용해서 각 값을 효율적으로 연산할 수 있습니다. 배열이 없다면, 값을 담을 변수를 하나씩 생성해야 하고, 처리할 때도 여러 번 불러야 하므로 매우 비효율적인 코딩이 될 수 있습니다. 

---

자바스크립트 배열 생성 

자바스크립트에서 배열을 만드는 방법은 대괄호 [](square bracket)를 사용하는 것입니다. 대괄호 안에서 쉼표(,)로 값을 구분합니다. 

const arr = ['apple', 'banana', 'grape'];
console.log(arr);

배열 안에는 다양한 종류의 데이터가 들어갈 수 있습니다. 문자열, 숫자, 객체, 다른 배열도 가능합니다. 하나의 배열에 여러 개의 데이터 타입을 저장하는 것도 가능합니다. 

const normalArray = [1, 2, 3, 'flower', [1,2,3]];

---

자바스크립트 배열 길이 

배열에 몇 개의 값이 들어있는지 알고 싶다면, length를 이용해서 배열의 길이를 알 수 있습니다. 

const normalArray = [1, 2, 3, 'flower', [1,2,3]];
console.log(normalArray.length);
//결과: 5
const fruitArray = ['apple', 'banana', 'grape'];
console.log(fruitArray.length);
//결과: 3

---

배열 인덱스 위치를 모를 때 

특정 값이 있다는 사실은 아는데, 몇 번째 값인지 몰라서 접근할 수 없을 때, indexOf() 함수를 사용하면 값의 위치를 알 수 있습니다. indexOf() 함수는 찾고자 하는 값을 인수(argument)로 요구합니다. 찾고자 하는 값이 없다면 -1을 반환해주는 메서드입니다. 

const fruit = ['apple', 'banana', 'pineapple'];
console.log(fruit.indexOf('banana')); 
//결과: 1

매개변수(인자, parameter) vs 인수(argument)

매개변수는 함수를 정의할 때 괄호 안에 지정하는 변수이고, 인수는 함수를 호출할 때 함수에 전달하는 구체적인 값을 말합니다. function sayHello(name){ }; 이렇게 생긴 함수가 있다면, name 부분이 매개변수입니다. Argument는 함수를 사용할 때 전달하는 구체적인 값을 말하므로, 위 코드에서 보면 'banana'가 인수입니다. 

---

자바스크립트 배열 추가 push, unshift

이미 생성된 배열에 값을 추가하고 싶을 때 push()를 사용합니다. push를 사용하면 배열의 끝부분에 값을 추가해줍니다. 

push() 함수를 실행하면 추가된 값을 포함한 배열의 길이가 return 됩니다. 

const arr = [10, 20, 30, 40];
console.log(arr.push(50));
//결과: 5
arr.push(60,70)
//결과: 7

arr.unshift(5);
//결과: 8
console.log(arr);
//결과: [5, 10, 20, 30, 40, 50, 60, 70]

만약에 배열 앞쪽에 값을 추가하고 싶다면 unshift()를 사용하면 됩니다. 

---

자바스크립트 배열 삭제 pop, shift

기존에 있는 값을 삭제하고 싶을 때 pop()을 사용하면 됩니다. pop 메서드는 사라진 값을 return 해줍니다. 배열의 첫 번째 값을 삭제하고 싶다면 shift 메서드를 사용하면 됩니다. 

 

const arr = [10, 20, 30, 40, 50];
arr.pop(); //50
console.log(arr);// [10, 20, 30, 40]
arr.shift(); //10
console.log(arr);// [20, 30, 40]