[JavaScript] 배열

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다.

이 때 배열 내부에 들어 있는 값을 요소라고 한다.

[요소, 요소, 요소, ... , 요소]

 

 

---

 

 

배열에 요소를 추가해보자. 총 2가지 방법이 있다.

1. push() 메소드를 사용하는 방법
2. concat() 메소드를 사용하는 방법
3. unshift() 메소드를 사용하는 방법
4. 인덱스를 사용하는 방법

 

 

첫번째 방법부터 살펴보자. push() 메소드는 배열의 끝에 원소를 추가하는 방법이다. 사용방법은 다음과 같다.

배열.push(요소)

 

두번째 방법을 살펴보자. concat() 메소드는 복수의 원소를 배열에 추가하는 방법이다. 사용방법은 다음과 같다.

var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li);

 

세번째 방법을 살펴보자. unshift() 메소드는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li);

 

네번째 방법을 살펴보자. 다음의 예시를 살펴보자.

const fruits = ['사과','배','바나나']
undefined
fruits[10] = '귤'
'귤'
fruits
(11) ['사과', '배', '바나나', empty × 7, '귤']

배열의 길이는 고정이 아니기 때문에 3개의 요소를 가진 배열을 만든 뒤, 10번째 인덱스에 요소를 추가해버리면

4~9번째 인덱스는 아무 것도 없는 empty가 된다.

 

 

---

 

 

이번에는 배열에서 요소를 제거하는 방법에 대해 알아보자. 일반적으로 2가지 방법이 있다.

1. 인덱스를 기반으로 제거하는 방법
2. 값을 기반으로 제거하는 방법
3. shift() 메소드를 이용하는 방법
4. pop() 메소드를 이용하는 방법

 

 

첫번째 방법은 splice() 메소드를 사용한다. 사용법은 다음과 같다.

배열.splice(인덱스, 제거할 요소의 개수)

예시를 살펴보자.

const fruits = ['사과','배','바나나','오렌지','망고']
undefined
fruits.splice(3,2)
(2) ['오렌지', '망고']
fruits
(3) ['사과', '배', '바나나']

3번째 인덱스로부터 2개의 요소가 삭제된 것을 확인할 수 있다. (첫번째 요소의 인덱스는 0이다)

 

 

두번째 방법은 특정 값의 위치를 찾는 indexOf() 메소드와 앞서 배운 splice() 메소드를 사용한다.

const 인덱스 = 배열.indexOf(요소) 배열.splice(인덱스,1)

예시를 살펴보자.

const items = ['사과', '배', '바나나']
undefined
const index = items.indexOf('바나나')
undefined
index
2
items.splice(index,1)
['바나나']
items
(2) ['사과', '배']
items.indexOf('바나나')
-1

참고로 indexOf()메소드는 배열 내부에 요소가 없을 경우 -1을 리턴한다.

 

세번째 방법은 배열의 첫번째 원소를 제거하는 방법이다. shift() 메소드를 사용한다. 결과는 b, c, d, e 다.

var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li);

 

네번째 방법은 배열 끝점의 원소를 배열 li에서 제거한다. pop() 메소드를 사용한다. 결과는 a, b, c, d 다.

var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li);

 

 

---

 

 

 

이번에는 배열의 특정 위치에 요소를 추가하는 법을 알아보자. 이번에도 splice() 메소드가 사용된다. 하지만 사용법이 약간 다르다.

배열.splice(인덱스, 0, 추가할 요소)

예시를 보자.

const items = ['사과','귤','바나나','오렌지']
undefined
items.splice(1,0,'양파')
[]
items
(5) ['사과', '양파', '귤', '바나나', '오렌지']

 

 

 

---

 

 

 

이외에도 다음의 강의노트를 보며 공부해보자.

https://github.com/dream-ellie/learn-javascript/blob/master/notes/array.js

 

'use strict';

// Array🎉

// 1. Declaration
const arr1 = new Array();
const arr2 = [1, 2];

// 2. Index position
const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[fruits.length - 1]);
console.clear();
// 3. Looping over an array
// print all fruits
// a. for
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// b. for of
for (let fruit of fruits) {
  console.log(fruit);
}

// c. forEach
fruits.forEach((fruit) => console.log(fruit));

// 4. Addtion, deletion, copy
// push: add an item to the end
fruits.push('🍓', '🍑');
console.log(fruits);

// pop: remove an item from the end
const poped = fruits.pop();
fruits.pop();
console.log(fruits);

// unshift: add an item to the benigging
fruits.unshift('🍓', '🍋');
console.log(fruits);

// shift: remove an item from the benigging
fruits.shift();
fruits.shift();
console.log(fruits);

// note!! shift, unshift are slower than pop, push
// splice: remove an item by index position
fruits.push('🍓', '🍑', '🍋');
console.log(fruits);
fruits.splice(1, 1);
console.log(fruits);
fruits.splice(1, 0, '🍏', '🍉');
console.log(fruits);

// combine two arrays
const fruits2 = ['🍐', '🥥'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

// 5. Searching
// indexOf: find the index
console.clear();
console.log(fruits);
console.log(fruits.indexOf('🍎'));
console.log(fruits.indexOf('🍉'));
console.log(fruits.indexOf('🥥'));

// includes
console.log(fruits.includes('🍉'));
console.log(fruits.includes('🥥'));

// lastIndexOf
console.clear();
fruits.push('🍎');
console.log(fruits);
console.log(fruits.indexOf('🍎'));
console.log(fruits.lastIndexOf('🥥'));