JS 근본 공부 - 배열(Array)

- 배열은 프로그래밍에서 가장 많이 사용되는 자료구조다. 

- 배열의 개념과 활용방법을 익혀보자. 

 

1. 배열은 무엇인가? 

- 배열이란 자료구조 중 하나로 여러개의 데이터를 묶어서 저장하는 방식이다. 

- 일반적으로 배열은 동일한 자료형의 데이터 끼리만 묶어 저장할 수 있지만, JavaScript에서는 자료형과 상관없이 데이터를 배열에 저장할 수 있다. 하지만, 이런 방식의 사용은 권장하지 않는다. 

 

 

2. 자료구조와 object는 무엇이 다른가? 

- object는 연관된 속성과 행동이 모여서 하나의 존재를 이룬다. 

- 자료구조란 데이터를 저장 및 정렬하는 형식/방식을 의미하는 것이다. 

 

 

3. 배열의 특징

- 동일한 자료형의 데이터를 저장한다. 

- 데이터가 순차적으로 저장된다. 

- 저장된 데이터는 index가 부여되어 검색에 용이하다. 

- 검색이 용이한 만큼 삭제도 편리하지만, 비워진 공간에 대한 데이터 재정렬은 쉽지않다. 

 

 

4. 배열 선언방법

const array1 = new Array(); // Array클래스를 이용한 배열객체를 생성
const array2 = [1, 2, 3, 4]; // 괄호를 이용한 배열 생성 

 

 

5. 배열과 함께 사용되는 다양한 API 

- 처음보는 메소드나 API를 사용하기 전에 반드시 관련 문서를 잘 읽어보자. 

 

 

a) forEach

- 배열에 들어있는 각 데이터마다 작성한 연산을 수행하도록 할 수 있다. 

- 기본 사용방법은 아래와 같다. 

// 기본 형식은 다음과 같다.

Array.forEach(function(value, index, array) {
 // 수행할 연산
 });
 
 
// 예시
fruits = ['apple', 'banana'];
fruits.forEach(function(fruit, index, array) {// 필요한 매개변수를 선택할 수 있다.
 console.log(fruit, index, array); 
 });
 
 //위의 코드를 간단하게 작성한다면 아래와 같다
 fruits.forEach((fruit) => console.log(fruit));

 

 

b) push(= add) 

- 배열은 순차적으로 data를 저장하는 방식의 자료구조다.
- 그러므로 새로운 데이터가 저장될 때, 가장 뒤에 저장된다. 

fruits.push('orange');

 

 

 

c) pop(= delete)

- 가장 마지막에 저장된 데이터부터 삭제된다. 

fruits.pop();

 

 

 

d) unshift

- 배열에 데이터를 앞쪽에서 삽입하는 함수이다. 

fruits.unshift("orange");

 

 

 

e) shift

- 배열의 데이터를 앞에서부터 삭제하는 함수

fruits.shift();

 

* shift와 unshift를 사용할 때 주의사항

- pop/push는 배열의 가장 마지막에 위치하는 데이터를 대상으로 수행하기 때문에, 배열의 데이터를 재정렬할 필요가 없다. 

- shit/unshift는 배열의 가장 앞에 위치하는 데이터를 대상으로 수행하기 때문에, 배열의 데이터를 모두 재정렬해야 한다.

- 그러므로 shift/unshift는 pop/push에 비해 굉장히 연산 속도가 느리다.  

 

 

f) splice

- index를 이용해 지정된 위치의 데이터를 삭제하는 함수

- 삭제할 index의 위치와 해당 index부터 몇개의 데이터를 지울 것인지 설정해야한다. 

fruits.push('orange', 'pineapple', 'lemon');
console.log(fruits); 

fruits.splice(1); // 해당 index부터 삭제할 데이터의 개수를 정하지 않으면 
console.log(fruits); // 1번 index부터 모든 데이터가 삭제된다.

 

fruits.push('orange', 'pineapple', 'lemon');
console.log(fruits); 

fruits.splice(1,1); // 삭제할 데이터의 개수를 정하면 해당index로 부터 개수만큼 지워진다. 
console.log(fruits); 

 

- 배열에서 특정 데이터를 삭제 후 해당 index 위치에 새로운 데이터를 삽입할 수도 있다.

fruits.push('orange', 'pineapple', 'lemon');
console.log(fruits); 

fruits.splice(1, 1, 'watermelon'); // 지워진 index 자리에 추가할 데이터를 매개변수로 넣는다. 
console.log(fruits); 

- 삭제된 pineapple 자리에 watermelon이 들어간 것을 확인할 수 있다. 

 

 

 

g) concat

- 배열 간의 합병을 가능하게 하는 함수 

const fruits = ['apple', 'grape', 'watermelon'];
const fruits1 = ['orange', 'pineapple', 'lemon'];
const fruits2 = fruits.concat(fruits1);
console.log(fruits2); 

 

 

 

h) indexOf

- 배열 내부에 특정 데이터의 index 위치를 반환하는 함수

- 해당 데이터가 배열에 존재하지 않으면 -1을 반환한다. 

fruit2.indexOf('orage;);

 

 

 

i) includes

- 배열 내부에 특정 데이터의 존재유무를 boolean으로 반환하는 함수 

fruit2.includes('orange');

 

 

 

j) lastIndexOf

- indexOf는 앞쪽에서부터 데이터를 검색한다면, lastIndexOf는 뒤쪽에서부터 데이터를 검색한다.

fruits.push('apple');
console.log(fruits);

fruits.indexOf('apple');
fruits.lastIndexOf('apple');

 

 

 

[정보출처]

www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8