dolog
배열 본문
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
- 큐(queue) : 배열을 사용해 만들 수 있는 대표적인 자료구조
- push : 맨 끝에 요소를 추가한다
- shift : 제일 앞 요소를 꺼내 저간 후 남아있는 요소들을 앞으로 밀어준다
(첫번째 요소가 사라지고 두번째 요소가 첫번째 요소가 된다)
- 스택(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"