JS 개념정리 04 - 배열

배열 활용 이유

 객체로도 다양한 값을 가진 컬렉션의 처리가 가능하지만, 객체는 순서를 고려하지 않고 만들어진 자료구조기 때문에, 새로운 프로퍼티를 기존 프로퍼티 사이에 넣는 등의 처리도 불가능함. 순서 개념이 중요한 컬렉션을 활용하기 위해 배열을 사용. 다만 배열도 객체인 점을 오해하지 말 것. 배열의 key는 숫자 index일 뿐

 

배열의 선언

• 빈 배열을 만들고 이후에 요소를 추가하거나, 처음 선언할 때 요소를 배정해주는 것도 가능
• 각 요소엔 고유한 인덱스가 부여돼있고, 이 인덱스 값이 순서를 나타냄. 인덱스는 0부터 시작함에 주의

/* 빈 배열 선언 */
let arr = new Array();
let arr = []; // 대개 이 방법으로 많이 선언함

/* 초기 요소 넣어주며 선언 */
let color = ["red", "blue", "green"];

/* 인덱스 */
console.log(color[0]); // 출력 : "red", 배열 첫 번째 값의 인덱스는 0이기 때문

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

 new Array()를 사용할 때, 소괄호 안에 숫자형 인수를 넣어서 배열을 만들면, 그 배열은 요소는 0개면서 길이는 넣은 인수와 같아진 이상한 형태가 됨

let color = new Array(10);
console.log(color[4]); // 출력 : undefined, 인덱스는 10개지만 값은 존재하지 않는 상황
console.log(color.length); // 출력 10

• 인덱스를 활용해 요소를 수정하거나 추가할 수 있음

let color = ["red", "blue", "green"];

/* 요소 수정 */
color[1] = "yellow";
console.log(color); // 출력 : ["red", "yellow", "green"], 배열 두번째 요소에 새로운 값을 할당

/* 요소 추가 */
color[3] = "yellow";
console.log(color); // 출력 : ["red", "blue", "green","yellow"], 빈 인덱스에 새 값을 할당

• 배열 요소에 할당되는 값의 자료형에 제약은 없음

let arr = ["red", {name : "song"}, 4, function(a,b) {return a + b}];

/* 배열에서 객체의 프로퍼티 출력하기 */
console.log(arr[1].name); // 출력 : "song", arr 배열의 두 번째 요소에서 name이란 key를 가진 값

/* 배열에서 함수 실행하기 */
console.log(arr[3](2,3)); // 출력 : 5, arr 배열의 네 번째 요소인 함수에 인자로 2와 3을 넣어 실행

 

▼ Javascript에서의 trailing-commas

final-commas라고도 하고, 우리말로 치면 후행 쉼표 정도의 의미. 자바스크립트에서 통용되는 개념으로, 배열의 마지막 요소 뒤에 콤마를 붙여놓는 식임. 요소의 추가 및 수정에서 유리해지는 장점이 있음

stack과 que

• 둘 모두 순서 개념을 가진 배열을 활용해 만드는 자료구조.  
• stack : 자료를 투입하는 위치와 삭제하는 위치가 같음. 가장 나중에 넣은 자료가 가장 먼저 빠지는 후입선출 LIFO 방식. 웹브라우저 방문기록에 활용돼 뒤로가기를 누르면 바로 이전 페이지로 이동하거나, 실행기록에 활용돼 실행취소(undo)를 했을 때 가장 최근의 실행을 취소하거나 하는 상황에 활용됨.

stack 자료구조

• que : 자료를 투입하는 위치와 삭제하는 위치가 다름. 가장 먼저 넣은 자료가 가장 먼저 빠지는 선입선출 FIFO 방식. 프린터 인쇄 대기열 같이 최초 명령이 제일 먼저 처리돼 나가는 경우나, 은행 대기표 처리 방식 등이 이에 해당함.

que 자료구조

 

배열 관련 메서드

• .pop() : 배열 마지막 순서 요소를 제거하고, 그 요소의 값을 반환. 

let color = ["red", "blue", "green"];
console.log(color.pop()); // 출력 : "green", 제거된 마지막 요소를 반환
console.log(color); // 출력 : ["red", "blue"]

• .push() : 배열 마지막에 새로운 요소를 추가하고, 추가 이후 배열의 요소 개수를 반환(.length와 같은 결과)

let color = ["red", "blue", "green"];
console.log(color.push("yellow")); // 출력 : 4, 배열 요소가 3개에서 하나 늘어났기 때문
console.log(color); // 출력 : ["red", "blue", "green", "yellow"]

/* 여러 요소를 한 번에 추가할 수 있음 */
console.log(color.push("white", "black", "purple"));

• .shift() : 배열 첫 순서 요소를 제거하고, 그 요소의 값을 반환

let color = ["red", "blue", "green"];
console.log(color.shift()); // 출력 : "red", 제거된 마지막 요소를 반환
console.log(color); // 출력 : ["blue", "green"]

• .unshift() : 배열 맨 앞에 새로운 요소를 추가하고, 추가 이후 배열의 요소 개수를 반환

let color = ["red", "blue", "green"];
console.log(color.unshift("yellow")); // 출력 : 4, 배열 요소가 3개에서 하나 늘어났기 때문
console.log(color); // 출력 : ["yellow", "red", "blue", "green"]

/* 여러 요소를 한 번에 추가할 수 있음 */
console.log(color.unshift("white", "black", "purple"));

▼ pop과 push는 빠른데 shift와 unshift는 느린 이유

pop과 push는 기존 배열 맨 뒤를 수정하기 때문에, 수정하는 요소의 처리만 하면 되지만, shift와 unshift는 배열 맨 앞을 수정하기 때문에, 나머지 요소의 인덱스 값이 전부 변함. 배열이 길어지면 길어질 수록 두 차이가 심해짐.

length 프로퍼티

• 배열의 길이를 반환해줌. 배열 요소의 개수라 오해할 수 있지만, 사실 배열에서 가장 큰 인덱스에 1을 더한 값

let color = ["red", "blue", "green"];
console.log(color.length); // 출력 : 3

/* 마지막 인덱스에 1을 더한 값 */
let color = [];
color[999] = "red";
console.log(color.length); // 출력 : 1000, 배열에 요소는 "red"하나지만 인덱스 값이 999기 때문

• length를 통해 배열의 길이를 수동으로 조정할 수 있는데, 증가시키는 경우엔 아무 일도 일어나지 않고, 감소시키는 경우엔 그만큼 요소가 잘려나감. 이때 짧아진 배열은 복구할 수 없음

let color = ["red", "blue", "green", "yellow", "purple"];

/* 증가시키는 경우 */
color.length = 10; 
console.log(color); // 출력 : ["red", "blue", "green", "yellow", "purple"], 그대로 유지

/* 감소시키는 경우 */
color.length = 2;
console.log(color); // 출력 : ["red", "blue"]
color.length = 5;
console.log(color); // 출력 : ["red", "blue"], 다시 원래 길이로 늘린다해서 요소가 복구되진 않음

 

배열과 반복문

• for문 : 배열을 순회할 때 활용. 이때 인덱스를 사용함 

let color = ["red", "blue", "green", "yellow"];
for (let i =0; i < color.length; i++) {
    console.log(color[i]); // i가 인덱스의 역할을 수행
}

/* 배열의 모든 요소를 순서대로 출력 */
"red"
"blue" 
"green" 
"yellow"

• for of문 : 인덱스 활용 없이 배열 요소들의 값만 얻고 싶을 때 활용. 코드가 짧아지니 숙련된 후 배열 순회할 때 쓸 것

let color = ["red", "blue", "green", "yellow"];
for (what of color) {
    console.log(what); // what은 그냥 대충 지은 인자 이름
}

/* 배열의 모든 요소를 순서대로 출력 */
"red"
"blue" 
"green" 
"yellow"

 

▼ 배열과 for in문

배열도 객체의 일종이기 때문에 for in문을 사용할 수는 있지만, 두 가지 문제가 있으니 되도록 사용을 지양할 것

• 객체 중 유사 배열(array-like)객체가 있는데, 배열은 key가 오직 숫자형 index인 반면, 유사 배열 객체엔 숫자형인 아닌 프로퍼티와 메서드가 있을 수 있음. for in문은 객체의 key를 기준으로 순회하기 때문에, 필요 없는 프로퍼티에서 문제가 발생할 확률이 높음
• for in문은 객체와 사용하는 데 최적화돼있기 때문에, 배열에 사용하면 비교적 훨씬 느림. 반복문 자체 속도는 빠른 편이라 병목 지점에서만 문제가 되긴 하지만, 10배에서 100배까지도 차이가 나기 때문에, 적절히 사용하는 편이 좋음