JS

19-1 JS 배열1

와라리요 2022. 11. 22. 18:50

배열이란?

 - 순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다.

 

배열 선언

  배열 선언하는 방법은 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