04. Array

in Javascript

선언방법

1
2
3
4
5
var colors = new Array();
var colors = new Array(10); // length가 10인 배열

var colors = Array();
var colors = ["red", "blue"];

속성

  • Array.prototype.length
1
2
var numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5

배열 길이보다 큰 인덱스를 지정하면, 길이가 자동으로 늘어남.

length 프로퍼티 변경시, 데이터 제거/빈슬롯 추가

colors[colors.length] = "black"; 과 같이 마지막 데이터 추가 가능

  • Array.prototype

배열 생성자를 위한 프로토타입, 모든 배열 객체에 새로운 속성과 메서드를 추가할 수 있다.

1
2
3
4
5
if (!Array.prototype.first) {
  Array.prototype.first = function() {
    return this[0];
  }
}

메서드

  • Array.isArray()

주어진 값이 배열인지 아닌지 확인 if(Array.isArray(value))

문자열

  • Array.prototype.toString()

배열 값을 string으로 출력

1
2
3
var colors = ["red", "blue", "green"];
colors.toString(); // red,blue,green
alert(colors); // red,blue,green

alert의 경우 자동으로, toString을 실행하여 출력해준다.

  • Array.prototype.join()

array.join(‘구분자’)

1
2
3
4
5
var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

스택 & 큐

  • Array.prototype.push()

리턴 : 배열의 길이

배열의 마지막 인덱스에 데이터를 추가함

  • Array.prototype.pop()

리턴 : 마지막 인덱스 데이터

배열의 마지막 데이터를 꺼냄.

  • Array.prototype.unshift()

리턴 : 배열의 길이

배열의 맨 앞 인덱스에 데이터를 추가함.

  • Array.prototype.shift()

리턴 : 첫번째 인덱스 데이터

배열의 첫번째 인덱스 데이터를 꺼냄

1
2
3
4
5
6
7
8
9
var a = [1, 2];
a.push(3); // 3
a.push(5); // 4
// 1,2,3,5
a.pop(); // 5
a.unshift(0); // 4
// 0,1,2,3
a.shift(); // 0
// 1,2,3

조작

  • Array.prototype.sort()

파라미터 : 정렬순서 정의 함수

리턴 : 정렬된 배열(새로운 배열 만들지 않음)

1
2
3
4
5
6
7
var scores = [1, 10, 21, 2]; 
scores.sort(); // [1, 10, 2, 21]
// 10이 2,
// Unicode 코드 포인트 순서에서 '10'이 '2'앞에 오기 때문에.

scores.sort(function(v1, v2) { return v1-v2; });
// [1, 2, 10, 21]

compare 함수는 결과가 양수일경우 두 숫자를 교환, 음수일 경우는 이동시키지 않는다.

  • Array.prototype.reverse()

배열의 인덱스를 반전시킨다.

  • Array.prototype.concat()

파라미터 : 값 또는 배열

리턴 : 값들이 합쳐진 ‘새배열’

1
2
3
4
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow"); // red,green,blue,yellow
var colors3 = colors2.concat("powerblue", ["tomato", "brown"]);
// red,green,blue,yellow,powerblue,tomato,brown
  • Array.prototype.slice()

파라미터 : 시작인덱스[, 마지막 인덱스]

리턴 : 조작된 ‘새배열’

인자로 넘긴 시작인덱스부터 , 마지막인덱스(옵션) 까지 가져와 새 배열을 만든다.

ex) 길이가 5인 배열에서, slice(-2, -1) = slice(3, 4) 와 같다

  • Array.prototype.splice()

파라미터 : 인덱스, 인덱스부터 지울 갯수, 인덱스에 추가할 data

리턴 : 삭제한 데이터의 배열을 반환/ 본래 배열 또한 조작되어 있음.

1
2
3
4
5
6
7
8
var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0, 1);
// colors : ["green", "blue"]
// removed : ["red"]
colors.splice(1, 0, 'yellow', 'orange')
// colors : ["green", "yellow", "orange", "blue"]
colors.splice(1, 1, 'red', 'blue');
// ["green", "red", "blue", "orange", "blue"]

위치/탐색

  • Array.prototype.indexOf()

파라미터 : 비교할 값

리턴 : Index 해당값이 있다면, 없으면 -1

배열에서 해당 값을 찾아 인덱스를 반환한다. 주의할 점은 === 로 비교된다는 것이다.

1
2
3
4
5
6
7
8
9
10
var a = [1,2,3];
a.indexOf("1"); // -1
var a = [1,2,3];
a.indexOf(2); // 1

var person = {name: '니콜'};
var people = [{name: '니콜'}];
var morePeople = [person];
people.indexOf(person); // -1
morePeople.indexOf(person); // 1
  • Array.prototype.lastIndexOf()

파라미터 : 비교할 값

리턴 : Index 해당값이 있다면, 없으면 -1

배열에서 해당 값을 찾아 인덱스를 반환한다. 주의할 점은 === 로 비교된다는 것이다.

  • Array.prototype.findIndex()

인자로 받은 함수의 조건에 일치하는 첫번째 인덱스 값을 리턴한다.

파라미터 : 조건 함수(element, index, array)

리턴 : 찾은 첫번째 인덱스, (없다면) -1

1
2
3
4
5
function isBigEnough(element) {
  return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3
  • Array.prototype.find()

인자로 받은 함수의 조건에 일치하는 첫번째 값을 리턴한다.

파라미터 : 조건 함수(element, index, array)

리턴 : 찾은 첫번째 값

1
2
3
4
5
6
7
8
9
10
11
12
var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries));
// { name: 'cherries', quantity: 5 }
  • Array.prototype.includes()

배열에 특정 요소가 포함되어 있는지 여부 확인

파라미터 : 찾을 값, 시작할 인덱스

1
2
3
var a = [1, 2, 3];
a.includes(2); // true 
a.includes(4); // false

반복

  • Array.prototype.every()

배열의 모든 값이 조건에 일치하는지 확인한다.

파라미터 : 함수(item, index, array), (옵션) this로서 사용할 값

리턴 : true/false

1
2
3
4
var numbers = [1,2,3,4,5,6];
var everyResult = numbers.every(function(item, index, array) {
    return item > 2;
});
  • Array.prototype.some()

배열에서 하나라도 조건에 일치하는 값이 있다면, true를 반환한다.

파라미터 : 함수(item, index, array), (옵션) this로서 사용할 값

리턴 : true/false

  • Array.prototype.filter()

반환 배열에 포함시킬지 결정한다.

파라미터 : 함수(item, index, array), (옵션) this로서 사용할 값

리턴 : 필터된 새로운 배열

1
2
3
4
var numbers = [1,2,3,4,5,6];
var filterResult = numbers.filter(function(item, index, array) {
    return item > 3;
}); // [4, 5, 6]
  • Array.prototype.map()

원래 배열에 연산한 새 배열을 리턴해준다. (배열의 length는 바뀌지 않음)

파라미터 : 함수(item, index, array), (옵션) this로서 사용할 값

리턴 : 연산된 새로운 배열

1
2
3
4
var numbers = [1,2,3,4,5,6];
var mapResult = numbers.map(function(item, index, array) {
    return item + 2;
}); // [3,4,5,6,7,8]
  • Array.prototype.forEach()

배열을 순회한다.

파라미터 : 함수(item, index, array), (옵션) this로서 사용할 값

리턴 : 없음

1
2
3
4
var numbers = [1,2,3,4,5,6];
numbers.forEach(function(item, index, array) {
	console.log('index : ' + index + ' item : ' + item);
});
  • Array.prototype.reduce()

배열 값들에 대해, 함수를 실행하여 값을 계산

파라미터 : 함수(이전에 반환된값, 현재값, index, array), (옵션) 초기값

리턴 : 결과값

1
2
3
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue;
}); // 10

ES6 문법

  • Array.from()

(유사배열 객체)를 배열로 만든다.

유사 배열 객체 (length 속성과 인덱싱된 요소를 가진 객체)

반복 가능한 객체 (Map과 Set와 같이 객체의 요소를 얻을 수 있는 객체)

파라미터 : 유사배열 객체, (옵션) 배열모든 요소에 호출할 map함수, (옵션) this로 사용할 값

리턴 : 배열 객체

1
2
3
4
5
6
7
8
9
10
11
12
13
// Set
var s = new Set(["foo", window]);
Array.from(s); // ["foo", window]

// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]  

// String
Array.from("foo");                      
// ["f", "o", "o"]

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
  • Array.prototype.entries()

배열의 각 인덱스에 대한 key/value 쌍을 가지는 새로운 Array Iterator객체를 반환. 

1
2
3
4
5
6
var arr = ['a', 'b', 'c'];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, 'a']
console.log(eArr.next().value); // [1, 'b']
console.log(eArr.next().value); // [2, 'c']

eArr.next().value 의 결과는 key와 value 쌍을 가지는 배열이다.

  • Array.prototype.keys()

배열의 각 인덱스에 key 들을 가지는 새로운 Array Interator 객체를 반환

1
2
3
4
5
6
7
var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
  • Array.prototype.values()

배열의 각 인덱스에 대한 value를 가지는 새로운 Array Iterator 객체를 반환

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 니콜라스 자카스

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea