dolog

배열 본문

JavaScript/자료구조와 자료형

배열

dokite 2022. 8. 1. 01:11

key: value(property)을 사용해 식별할 수 있는 값을 담은 집단 ➡️ 객체

그러나 순서가 있는 컬렉션이 필요할 때가 종종 있다

 

객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에 새로운 프로퍼티를 ‘사이에’ 끼워 넣을 수 없다

이럴때 사용할 자료구조가 바로 배열이다

 

배열 선언

 

let arr = new Array();

let arr = []; // 대부분 많이 사용하는 배열 선언 방법

 

더 디테일하게 선언하면 ⬇️

 

let fruits = [ “apple”, “orange”, “plum” ];

 

  • 0부터 시작하는 index가 존재한다 : 배열 내 순서
  • 배열 내 특정 요소를 얻고싶다면 [ ] 안에 해당 index 숫자를 넣어줘야 한다 

 

let fruits = [ “apple”, “orange”, “plum” ];

 

console.log(fruits[0]); // apple

console.log(fruits[2]); // plum

 

  • 같은 방법으로 배열의 각 요소를 수정할 수 있고 추가할 수도 있다

 

fruits[2] = “pear”;

fruits[3] = “lemon”; // [ “apple”, “orange”, “pear”, “lemon” ]

 

  • length를 사용하면 배열에 담긴 요소가 몇개인지 알 수 있다

 

console.log(fruits.length); // 4

console.log(fruits); // 배열 요소 전체 출력

 

  • 배열 요소의 자료형엔 제약이 없다

 

let arr = [ ‘apple’, { name: ‘shim’ }, true, function() { console.log(‘hi’); } ];

 

console.log(arr[1].name); // shim

arr[3](); // 3번째 순서인 함수 실행

 

trailing 쉼표를 사용하여 객체처럼 쉼표로 끝날 수 있다

 

let fruits = [

‘apple’,

‘plum’,

‘orange’,

];

 

pop · push와 shift · unshift(= deque, Double Ended Queue)

#queue #stack

 

  1. 큐(queue) : 배열을 사용해 만들 수 있는 대표적인 자료구조

- push : 맨 끝에 요소를 추가한다

- shift : 제일 앞 요소를 꺼내 저간 후 남아있는 요소들을 앞으로 밀어준다

(첫번째 요소가 사라지고 두번째 요소가 첫번째 요소가 된다)

 

  1. 스택(stack) : 배열 자료구조 중 하나로 한 쪽 끝에 요소를 추가하거나 제거

- push : 요소를 스택 끝에 집어넣는다

- pop : 스택 끝 요소를 뺀다

 

이 둘의 가장 큰 차이점은 큐는 앞/뒤가 뚫려있는 빨대같은 구조지만 스택은 하나만 뚫려있는 통같은 구조이다 ➡️ 스택을 사용하면 후입선출, 큐를 사용하면 선입선출이 가능하다

 

본격적인 데큐(deque)

  • 배열 에 무언가를 해주는 매서드

 

1)pop : 배열 끝 요소를 제거, 제거한 요소를 반환

 

let fruits = [ “apple”, “orange”, “plum” ];

console.log(fruits.pop()); // plum

console.log(fruits); // apple, orange

 

2)push : 배열 끝에 요소를 추가

 

let fruits = [ “apple”, “orange” ];

 

fruits.push(“pear”);

console.log(fruits); // apple, orange, pear

 

  • 배열 에 무언가를 해주는 매서드

 

1)shift : 배열 앞 요소를 제거하고, 제거한 요소를 반환

 

let fruits = [ “apple”, “orange”, “plum” ];

console.log(fruits.shift()); // apple

console.log(fruits); // orange, plum

 

2)unshift : 배열 앞에 요소를 추가

 

let fruits = [ “orange”, “plum” ];

fruits.unshift(apple)); 

console.log(fruits); // apple, orange, plum

 

let fruits = [“apple”];

 

fruits.push(“orange”, “pear”);

fruits.unshift(“pineapple”, “lemon”);

 

console.log(fruits); // [“pinapple”, “lemon”, “apple”, “orange”, “pear”]

 

배열의 내부 동작 원리

 

배열의 본질은 객체이며, 객체처럼 [ ]을 사용해 접근한다 그러나 배열은 key가 number 인 점이 객체와 다르다

 

// 객체처럼 참조를 통해 복사된다

let fruits = [ “banana” ] 

let arr = fruits;

 

console.log(arr === fruits);

 

arr.push(“pear”);

console.log(fruits); // [ “banana”, “pear” ]

 

// 일반 객체처럼 다루면 ?

 

let fruits = [ ];

fruits[99999] = 5;

fruits.age = 25;

// 문제는 발생하지 않지만 배열 이점이 사라진다

 

잘못된 예시)

  • arr.test = 5 같이 숫자가 아닌 값을 키로 사용하는 경우
  • arr[0]과 arr[1000] 만 추가하고 그 사이에 아무런 요소가 없는 경우
  • arr[1000], arr[999] 같이 요소를 역순으로 채우는 경우

 

성능

  • 속도 : shift / unshift < pop / push

 

fruits.shift(); // 배열 맨 앞 요소를 제거

// shift의 연산의 동작 수행

// index가 0인 요소를 제거

// 모든 요소를 왼쪽으로 이동, index가 1은 0, 2는 1

// length 프로퍼티 값을 갱신

 

즉 배열에 요소가 많으면 요소가 이동하는 데 걸리는 시간이 길고 메모리 관련 연산도 많아진다

반면에, pop / push 는 배열의 끝에서 제거나 추가만 하면 되서 요소들의 이동이 없으므로 빠른 속도로 처리가 된다

 

fruits.pop(); // 배열 끝 요소를 제거

// 기존 index가 그대로 유지

 

반복문(for 문과 for..of 문) - 순회 시, index 사용

 

// for 문

let fruits = [ “apple”, “orange”, “plum” ];

 

for ( let i = 0 ; i < fruits.length ; i++ ) {

console.log(fruits[i]);

}

 

// for..of 문

let fruits = [ “apple”, “orange”, “plum” ];

 

// 배열 요소를 대상으로 반복 작업을 수행한다

for ( let fruits of fruits ) {

console.log(fruits);

}

 

// 다른점은 for..of 문은 현재 요소의 index를 얻을 순 없고 값만 얻을 수 있다

 

length 프로퍼티

  • 배열 내 요소 중 가장 큰 index에 1을 더한 값이다
  • 중요한 건 요소의 갯수가 아니다 !

 

let fruits = [];

fruits[123] = “apple”;

 

console.log(fruits.length); // 124

// 그러나 이렇게는 사용하지 않아야 한다(…)

 

  • length 값을 감소시키면 배열이 잘리는데 짧아진 배열은 다시 되돌릴 수 없다!

*수동으로 증가시키면 아무일도 일어나지 않는다

 

let arr = [1, 2, 3, 4, 5];

 

arr.length = 2; // 2개만 남기고 삭제

console.log(arr); // [1, 2]

 

arr.length = 5;

console.log(arr[3]); // undefined, 삭제된 요소들은 복구 X

 

new Array()

 

let arr = new Array(“apple”, “orange”, “plum”);

 

new Array()를 잘 사용하지 않는 이유

 

// 숫자형 인수를 하나 넣어서 만들어 보자

 

let arr = new Array(2);

 

console.log(arr[0]); // undefined, 요소가 하나도 없는 배열이다

console.log(arr.length); // 2, 요소는 없지만 길이는 인수와 같아진다

 

그래서 new Array(number) 는 모두 undefined 로 출력된다

 

다차원 배열(multidimensional array)

  • 행렬을 저장하는 용도로 사용된다

 

let matrix = [

[1, 2, 3],

[4, 5, 6],

[7, 8, 9]

];

 

console.log(matrix[1][1]); // 큰 배열 에서 1, 작은 배열에서 1 ➡️ 5

 

toString()

  • 요소를 쉼표로 구분한 문자열이 반환되는 매서드

 

let arr = [1, 2, 3];

 

console.log(arr); // 1, 2, 3

console.log( String(arr) === ‘1,2,3’ ) // true

 

// 문자열로 반환

console.log( [] + 1 ); // 1

console.log( [1] + 1 ); // 11

console.log( [1, 2] + 1 ); // 1, 21

 

// 이항 덧셈 연산자 +는 하나가 문자열이면 나머지도 문자열로 반환

console.log( "" + 1 ); // "1"

console.log( "1" + 1 ); // "11"

console.log( "1,2" + 1 ); // "1,21"

'JavaScript > 자료구조와 자료형' 카테고리의 다른 글

배열과 메서드 2  (0) 2022.08.02
배열과 메서드 1  (0) 2022.08.01
문자열 2  (0) 2022.07.31
문자열 1  (0) 2022.07.29
숫자형 2  (0) 2022.07.28