자바스크립트 배열

배열의 선언

var emptyArr = [];
 
console.log(emptyArr[1]); // undefined
console.log(emptyArr.length); // 0
 
var arr = [1, 2, 3, "hello", null, true, []];
 
console.log(arr[1]); // 2
console.log(arr[4]); // null
console.log(arr.length); // 7
console.log(typeof arr); // object
 

new Array() 문으로 선언할 수도 있지만, 보통은 배열 리터럴로 대괄호({})를 사용해서 배열을 선언합니다.

배열은 대괄호 내에 접근하고자 하는 원소에 배열 내 위치 인덱스 값을 넣어서 접근합니다. 배열 내의 첫 번째 원소는 인덱스 0부터 시작합니다.

---

배열의 요소 생성

1 2 3 4 5 6 7 8 9 10

var emptyArr = []; console.log(emptyArr[0]); // undefined   emptyArr[0] = 100; emptyArr[3] = "hello"; emptyArr.push(5); emptyArr[7] = true; console.log(emptyArr); // [100, undefined*2, "hello", 5, undefined*2, true] console.log(emptyArr.length); // 8

자바스크립트의 배열은 동적으로 배열 원소를 추가할 수 있습니다. 특히, 자바스크립트 배열의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있습니다. 또한 push메서드를 총해서 뒤에 순차적으로 추가할 수 있습니다.

---

배열 탐색

배열의 순회는 for문을 통해서 순회할 수도 있지만 forEach를 이용하면 i++ 증감자를 따로 생성할 필요가 없어 실수를 줄일수 있고 편리합니다.

forEach

// for 반복문을 forEach로 바꾸기
const items = ["item1", "item2", "item3"];
const copy = [];
 
// 이전
for (let i = 0; i < items.length; i++) {
  copy.push(items[i]);
}
 
// 이후
items.forEach(function(item) {
  copy.push(item);
});

forEach메소드는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다.

callback은 요소 값, 요소인덱스, 순회 중인 배열 순으로 함께 호출 됩니다.

map

var numbers = [1, 4, 9];
// numbers배열의 각 요소를 제곱한 새로운 sqrt배열 생성
var sqrt = numbers.map(element => {
  return element * element;
});
// [1, 16, 81];
 
// 좀더 간단하게 각 요소를 제곱한 새로운 roots배열 생성
var roots = numbers.map(Math.sqrt);
// [1, 16, 81]

map메소드는 callback함수를 각각의 요소에 대해서 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다.

filter

function isBigEnough(value) {
  return value >= 10;
}
 
// isBigEnough함수에 정의한 10보다 큰 수에 대한 새로운 배열 생성
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

filter메소드는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true인 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다.

---

배열의 유용한 메서드들

배열을 좀더 쉽고 편리하게 조작할수 있게 여러 메서드를 제공합니다.

indexOf

var arr = [1, 2, 2, 3];
console.log(arr.indexOf(2));    // 1
console.log(arr.indexOf(4));    // -1
console.log(arr.indexOf(2, 2)); // 2

indexOf 메소드의 인자로 지정된 요소를 배열에서 검색하여 인덱스를 반환합니다. 중복되는 요소가 있는 경우 첫번째 인덱스만 반환하고 만일 해당하는 요소가 없을 경우, -1을 반환합니다.

concat

var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];
 
var c = a.concat(b);
console.log(c); // ['a', 'b', 'c', 'x', 'y', 'z']
 
var d = a.concat('String');
console.log(d); // ['a', 'b', 'c', 'String']
 
var e = a.concat(b, true);
console.log(e); // ['a', 'b', 'c', 'x', 'y', 'z', true]
 
// 원본 배열은 변하지 않는다.
console.log(a); // [ 'a', 'b', 'c' ]

concat 메소드의 인수로 넘어온 값들(배열 또는 값)을 자신의 복사본에 요소로 추가하고 반환합니다. 이때 원본 배열은 변경되지 않습니다.

join

var arr = ['a', 'b', 'c', 'd'];
 
var x = arr.join();
console.log(x);  // 'a,b,c,d';
 
var y = arr.join('');
console.log(y);  // 'abcd'
 
var z = arr.join(':');
console.log(z);  // 'a:b:c:d'

배열 요소 전체를 연결하여 생성한 문자열을 반환합니다. 구분자(separator)는 생략 가능하며 기본 구분자는 , 입니다.

+연산자보다 빠릅니다.

slice

원본 배열을 변경하지않고 인자로 지정된 배열의 부분을 복사하여 반환합니다.

const items = ["a", "b", "c"];
 
// items[0]부터 items[1] 이전(items[1] 미포함)까지 반환
let res = items.slice(0, 1);
console.log(res); // [ 'a' ]
 
// items[1]부터 items[2] 이전(items[2] 미포함)까지 반환
res = items.slice(1, 2);
console.log(res); // [ 'b' ]
 
// items[1]부터 이후의 모든 요소 반환
res = items.slice(1);
console.log(res); // [ 'b', 'c' ]
 
// 인자가 음수인 경우 배열의 끝에서 요소를 반환
res = items.slice(-1);
console.log(res); // [ 'c' ]
 
res = items.slice(-2);
console.log(res); // [ 'b', 'c' ]
 
// 모든 요소를 반환 (= 복사본(shallow copy) 생성)
res = items.slice();
console.log(res); // [ 'a', 'b', 'c' ]
 
// 원본은 변경되지 않는다.
console.log(items); // [ 'a', 'b', 'c' ]

첫번째 매개변수에 해당하는 인덱스를 갖는 요소부터 두번째 매개변수에 해당하는 인덱스를 가진 요소 전까지 복사됩니다. 만약 slice 메소드에 인자를 전달하지 않으면 원본 배열의 복사본을 생성하여 반환합니다.

 

참고자료: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach()

참고자료: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map()

참고자료: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter()

참고자료: https://poiemaweb.com/js-array

Array | PoiemaWeb

참고자료: https://www.edwith.org/boostcourse-web/lecture/16745/

[LECTURE] 1) 자바스크립트 배열 : edwith