JavaScript - 배열(1)

배열 ?
배열은 특수한 형태의 객체로 순서가 있는 데이터를 저장하고 관리하는데 사용하는 자료구조 입니다.

배열 만들기

let arr = new Array();
let arr = [];

위의 두가지 방법으로 배열을 만들 수 있습니다.
Array() 에 숫자로 인수를 넣어주면 그 숫자만큼의 길이를 가지는 배열이 생성 됩니다. 하지만 요소는 생성되지 않고 arr[숫자]로 요소를 확인해보면 undefined 가 출력 됩니다. new Array() 의 특징을 잘 알지 못한다면 배열을 생성할때는 [] 를 사용하는게 안전하고 좋습니다.

let arr = ["김치찌개", "치킨", "햄버거"];

위와 같이 배열의 초기 요소를 넣어주는것도 가능하며 배열에 요소를 추가하면 인덱스 값이 0 부터 하나씩 매겨집니다. 배열 내에서 특정 요소를 얻고 싶다면 배열의 변수[인덱스] 를 넣어줘 원하는 인덱스의 요소값을 얻을 수 있습니다. 코드로 살펴보면

console.log(arr[0]); // 김치찌개

위와 같이 0 번 인덱스 값에 위치한 "김치찌개" 요소를 가져올 수 있습니다.
배열의 변수[인덱스] 방법을 사용해 인덱스 자리에 요소 값을 변경할수도 있고 추가할수도 있습니다.

arr[2] = "피자"; // 2 번 인덱스 자리의 요소 값을 피자로 변경
arr[3] = "삼겹살"; // 3번 인덱스 자리의 요소 값을 추가

위와 같이 변경, 추가를 할 수 있습니다. 배열 요소 값에는 원시값, 객체, 함수등 어떠한 자료형도 가능합니다.

배열의 값을 추가 삭제하는 메서드

• push : 배열의 끝에 값을 추가합니다.
• pop : 배열의 끝의 값을 꺼내고 꺼낸 값을 반환합니다.
• shift : 배열의 가장 앞에 있는 값을 꺼내고 그 값을 반환합니다. 뒤에 있던 요소들이 앞으로 떙겨지면서 요소의 인덱스 값이 변경 됩니다.
• unshift : 배열의 가장 앞에 값을 추가하고 기존에 있던 요소들이 뒤로 밀려나면서 요소의 인덱스 값이 변경 됩니다.

성능적으로 push, pop 이 shift, unshift 보다 빠릅니다. 그 이유는 값을 추가, 삭제 하고 기존의 요소들이 앞이나 뒤로 이동하는데 시간이 걸리기 때문입니다.

length 프로퍼티

배열에 어떤 값의 추가나 삭제를 하게되면 length 프로퍼티가 갱신 됩니다. length 는 배열의 요소의 개수가 아니라 가장 끝 인덱스 값의 +1 입니다.
직접 배열의 length를 변경할수도 있습니다.

let arr = [1,2,3,4,5,6]
arr.length = 3; // arr = [1,2,3]
arr.length = 6;
console.log(arr[5]) // undefined 출력

위와 같이 length 의 길이를 3으로 하면 뒤에 요소들은 잘려서 삭제됩니다. 다시 길이를 6으로 만들어도 삭제된 요소 값들은 복구되지 않습니다.

배열의 다양한 메서드

배열의 다양한 메서드들을 알아두면 배열을 다루는데 매우 많은 도움이 됩니다.

splice

배열의 요소를 삭제하거나 값을 추가, 교체 할 수 있는 메서드 입니다.
배열의 요소를 삭제할때 배열도 객체이기 떄문에 delete를 사용할수는 있습니다.
예를 들어 1 번 인덱스 자리의 요소 값을 delete를 이용해 삭제하면

let arr = [1,2,3];
delete arr[1];
console.log(arr) // [1, , 3] 출력

위와 같이 출력 됩니다. 요소의 값은 삭제 되었지만 요소의 개수는 3개 그대로 입니다. 우리가 원하는 결과가 아닙니다. delete 는 key에 상응하는 값을 지우기 때문입니다.
splice 를 사용하면 우리가 원하는 결과를 얻을 수 있습니다.

splice(시작인덱스,삭제할개수,추가할 요소 값...) 으로 메서드를 사용하면 됩니다.

값 삭제

let arr = [1,2,3];
arr.splice(1,1); // [2] 반환
console.log(arr); // [1, 3] 출력

위와 같이 splice를 사용하면 1번 인덱스부터 1개를 삭제하고 삭제한 요소를 배열로 반환 합니다. 그 후 arr 은 1번 인덱스 요소 값 2가 삭제된것을 확인할 수 있습니다.

값 추가

let arr = [1,2,3];
arr.splice(1,0,1,2,3); // [] 반환
console.log(arr); // [1, 1, 2, 3, 2, 3] 출력

위와 같이 splice를 사용해 1번 인덱스부터 0개를 삭제하고 3번째 인수부터의 값을 1번 인덱스에 추가한것을 확인 할 수 있습니다. 0개를 삭제하였기 때문에 [] 를 반환합니다.

값 변경

let arr = [1,2,3];
arr.splice(0,1,4); // [1] 반환
console.log(arr); // [4,2,3] 출력

위와 같이 splice를 사용해 0번 인덱스부터 1개를 삭제하고 그 자리에 4를 추가한것을 확인 할 수 있습니다. 결과적으로 원하는 인덱스 자리의 요소 값을 변경한것 입니다.

값 삭제

let arr = [1,2,3];
arr.splice(0,1); // [1] 반환
console.log(arr); // [2,3] 출력

위와 같이 splice를 사용해 0번 인덱스부터 1개를 삭제한것을 확인 할 수 있습니다.

slice

slice 메서드는 기존의 배열을 보존하고 새로운 배열을 만들려고 할때 사용됩니다.

slice(시작 인덱스, 끝 인덱스) 로 메서드를 사용합니다. 끝 인덱스는 포함되지 않습니다. 기존의 배열은 그대로고 새로운 배열을 만들어 반환합니다.

arr.slice() 로 인수를 하나도 넣지 않으면 arr 의 복사본을 얻을수 있다.

concat

concat 메서드는 기존 배열의 요소를 사용해 새로운 배열을 만들거나 요소들을 추가해 새로운 배열을 만들때 사용 합니다.

arr.concat(값,배열 등이 모두 가능하고 개수 제한 없다.) 로 메서드를 사용합니다.

forEach

forEach 함수는 배열의 각각의 요소를 함수에 인수로 넣어 실행 해주는 함수 입니다.

arr.forEach(함수(요소,인덱스,배열) 로 메서드를 사용합니다.

예를 들어 배열의 모든 요소들을 1 씩 더한 값으로 구성되는 배열을 만들려고 합니다. 코드로 보면

let arr = [1,2,3,4,5,6];
arr.forEach(function(item,index) {
  arr[index] = item+1;
});
console.log(arr); //  [2, 3, 4, 5, 6, 7] 출력

위의 코드는 배열의 각각의 요소 값을 1씩 더하고 0번 인덱스부터 요소 값을 저장하는 코드입니다.
인수의 함수가 반환하는 값은 무시가 됩니다.