배열이란?
- 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다.
배열 선언
배열 선언하는 방법은 2개가 있다. 대부분 두 번째 방법을 사용하며 대 괄호 안에 초기 요소를 넣어 주는 것도 가능하다.
let arr = new Array();
let arr = [];
let fruits = ["사과", "오렌지", "자두"];
각 배열 요소엔 0부터 시작하는 숫자(index)가 매겨져 있다. 이 숫자들은 배열 내 순서를 나타낸다.
배열 내 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자인 index를 넣어주면 된다.
let fruits = ["사과", "오렌지", "자두"];
fruits[0]; // 사과
fruits[1]; // 오렌지
fruits[2]; // 자두
동일한 방법으로 수정, 추가가 가능하다.
fruits[2] = "배"; // ["사과", "오렌지", "배"]
fruits[3] = "포도"; // ["사과", "오헨지", "배", "포도"]
length를 사용하면 배열에 담긴 요소 개수를 알 수 있다.
fruits.lwngth; // 4
배열 요소의 자료형엔 제약이 없다.
let arr = ['사과', {name: '오렌지'}, true, function () {alert('자두');}];
// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력합니다.
arr[1].name; // 이보라
// 인덱스가 3인 요소(함수)를 실행합니다.
arr[3](); // alert창에 자두가 뜬다.
pop·push와 shift·unshift
- 큐(queue) 는 배열을 사용해 만들 수 있는 대표적인 자료구조로, 배열과 마찬가지로 순서가 있는 컬렉션을 저장하는 데 사용합니다. 큐에서 사용하는 주요 연산은 아래와 같다.
- psuh - 맨 끝에 요소를 추가합니다.
- shift - 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줍니다. 이렇게 하면 두 번째 요소가 첫 번째 요소가 된다.
배열엔 두 연산을 가능케 해주는 내장 메서드 push와 pop이 있다. 화면에 순차적으로 띄울 메시지를 비축해 놓을 자료 구조를 만들 때 큐를 사용하는 것처럼 큐는 실무에서 상당히 자주 쓰이는 자료구조다.
배열은 큐 이외에 스텍(stack) 이라 불리는 자료구조를 구현할 때도 쓰인다.
- push - 요소를 스택 끝에 집어넣습니다.
- pop - 스택 끝 요소를 추출합니다.
스택을 사용하면 가장 나중에 집어넣은 요소가 먼저 나온다. 이런 특징을 줄여서 후입선출(Last-In-First-Out, LIFO)이라고 부른다. 반면 큐를 사용하면 먼저 집어넣은 요소가 먼저 나오기 때문에 큐는 선입선출(First-In-First-Out, FIFO) 자료구조라고 부른다.
자바스크립트 배열을 사용하면 큐와 스택 둘 다를 만들 수 있다. 이 자료구조들은 배열의 처음이나 끝에 요소를 더하거나 빼는 데 사용된다.
이렇게 처음이나 끝에 요소를 더하거나 빼주는 연산을 제공하는 자료구조를 컴퓨터 과학 분야에선 데큐(deque, Double Ended Queue)라고 부른다.
자바스크립트에서 사용하는 배열 메소드 입니다.
pop()
- 배열 끝 요소를 제거하고, 제거한 요소를 반환한다.
let fruits = ["사과", "오렌지", "배"];
fruits.pop(); // 배열에서 "배"를 제거하고 제거된 요소 띄움.
fruits; // ['사과', '오렌지']
push()
- 배열 끝에 요소를 추가한다.
fruits.push('배');
fruits; // ['사과', '오렌지', '배']
shift()
- 배열 앞 요소를 제거하고, 제거한 요소를 반환한다.
fruits.shift(); // "사과"를 반환하고 삭제한다.
fruits; // ['오렌지', '배']
unshift()
- 배열 앞에 요소를 추가한다.
fruits.unshift('사과');
fruits; // ['사과', '오렌지', '배']
※ push와 unshift는 여러 개를 한 번에 더해줄 수도 있다.
fruits.push('메론', '레몬');
//unshift도 push동일함
공부한 곳!! 모던 Javascript 튜토리얼
내일은 배열의 내부 동작 원리, 성능 등에 대해서 공부할 계획!!
'JS' 카테고리의 다른 글
19-3 JS 배열3 (0) | 2022.11.29 |
---|---|
19-2 JS 배열2 (0) | 2022.11.28 |
18-3 JS 문자열3 (0) | 2022.11.21 |
18-2 JS 문자열2 (0) | 2022.11.18 |
18-1 JS 문자열1 (0) | 2022.11.16 |