[Javascript] 배열(Array)

Wecode 2주차(Javascript) 미션 겸, Array Method 복습을 위한 학습.

---

1. 배열(Array) 이란?

인덱스를 가지는 복수의 자료를 순차적으로, 한 개의 변수에 저장할 수 있는 자료구조이다.

배열에 들어가는 값들은 요소(element, item...)이라고 하며, 각각의 인덱스로 접근할 수 있다.

 

- 배열 선언방법

배열을 선언하는 방법은, 2가지가 있으나 현재는 대괄호([])를 사용하는 후자를 통용한다.

let array = new Array();			// []
let array = new Array(3);			// [ , , ] 세 칸 짜리 메소드
let array = [];					// []

let array = new Array(1, 2, NaN, "글자");		// [1, 2, NaN, '글자']
let array = [1, 2, NaN, '글자'];				// [1, 2, NaN, '글자']

 

- 배열의 특징

• 배열에 들어가는 요소들은, number / string / NaN / array(다차원 배열) / object / function 등 다양하다. - 추후 변수 정리필요!

• 배열은 번호가 메겨진 인덱스로 접근 가능하다. 

    * 배열은 숫자 인덱스 vs 객체(Object)는 지정된 이름의 인덱스를 사용

• 배열에서 사용하는 특정 Method 활용하여, 접근 / 추가 / 삭제 등이 가능하다.

---

2. 배열(Array) 요소 접근하기

기본적으론, 배열내에서 인덱스 번호로 접근한다. (1번째 인덱스 번호 = 0)

 

- 배열 요소 접근 및 확인

const list = ['a', 'b', 'c'];

let A = list[0];
console.log(A);			// a

console.log(list[1]);		// b

 

- 배열 요소 치환하기

Javascript Array에선 배열 요소를 다이나믹하게 수정할 수 있다.

console.log(list[2]);		// c

list[2] = 'z';
console.log(list[2]);		// z

---

3. 배열(Array)의 메소드(Method)

배열의 추가 및 삭제부터 순회, 정렬, 필터링 등 다양한 기능을 제공하는 메소드가 있다.

각각의 메소드들의 기능을 간단하게 정리하였다. (중요하거나 어렵다고 생각되는 메소드는 파란 글씨)

 

1) 기본 기능

- isArray(ES6)

 

변수가 배열인지 확인

Array.isArray('array');				// false;
Array.isArray(['a','r','r','a','y'])		// true;

 

- length

 

배열의 길이를 반환

const list = ['a', 'b', 'c', 'd', 'e'];

console.log(list.length);			// 5

 

- join(구분자)

 

배열 요소들을 연결해 하나의 string 형태로 만듬

const list = ['a', 'b', 'c', 'd'];

console.log(list.join());			// 'a,b,c,d' === list.toString()
console.log(list.join('-'));			// 'a-b-c-d'

유사한 기능으로 toString(), 반대의 기능으로 split(구분자) 문자열 메소드가 있다.

const string = 'array';

const stringArray = string.split('');
console.log(stringArray);			// ['a', 'r', 'r', 'a', 'y']

 

 

2) 추가 및 삭제관련 기능

- concat(배열)

 

배열에 다른 값 혹은 배열을 합침 (원본바뀜)

let list = ['a', 'b', 'c', 'd', 'e'];

list.concat('f', 'g');
console.log(list);			// ['a', 'b', 'c', 'd', 'e', 'f', 'g']

list.concat(['h', 'i');
console.log(list);			// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

 

- push(요소), pop()

 

배열의 뒤에서 추가 및 삭제 (원본바뀜)

let array = [1, 2, 3];

array.push(4);
console.log(array);			// [1, 2, 3, 4]

let popNum = array.pop();
console.log(array);			// [1, 2, 3]
console.log(popNum);			// 4

 

- unshift(요소), shift()

 

배열의 앞에서 추가 및 삭제 (원본바뀜)

let array = [1, 2, 3];

array.unshift(0);
console.log(array);			// [0, 1, 2, 3]

let sftNum = array.shift();
console.log(array);			// [1, 2, 3]
console.log(sftNum);			// 0

 

- splice(인덱스, (지울 개수), (추가할 요소))

 

배열의 인덱스부터 지울 개수만큼 삭제함 (원본변경). 검색 기능의 slice()와 혼동되기 쉽다!

let list = [1, 2, 3, 4, 5];

let delList = list.splice(1,3);
console.log(list);			// [1, 5]
console.log(delList);			// [2, 3, 4]

// 삭제 후 추가도 가능!
let list2 = ['a', 'b', 'c', 'd'];

list.splice(1,2,'e','f');
console.log(list2);			// ['a', 'e', 'f', 'd']; 인덱스 1부터 2개 b,c 삭제. 이후 e,f 추가

 

 

3) 검색 관련 기능

- slice(시작 인덱스, (끝 인덱스))

 

배열의 시작 인덱스부터 끝 인덱스 바로 전까지 배열을 추출 (원본유지). 추가/삭제 기능의 splice()와 혼동되기 쉽다!

let list = [1, 2, 3, 4];

let list2 = list.slice(2);
console.log(list2);			// [3, 4]

let list3 = list.slice(1,3);
console.log(list3);			// [2, 3] 3번째 인덱스인 4 바로 전인 3까지만 추출

 

- includes(찾는 요소)

 

배열 내 찾는 요소가 포함되었는지 확인. (boolean 반환)

const list = [1, 2, 3];

list.includes(2);			// true
list.includes(4);			// false

 

- indexOf(찾는 요소), lastIndexOf

 

배열 내 찾는 요소의 인덱스를 반환. 요소가 중복 포함되어 있어도 첫 인덱스만 반환.(lastIndexOf는 끝 인덱스)

const list = [1, 2, 2, 3];

list.indexOf(2);			// 1
list.lastIndexOf(2);			// 2

 

- every(function(요소) {조건}), some(function(요소) {조건})

 

배열의 원소가 조건함수를 통과하는 지 확인. every는 모든 요소가 통과시 true / some은 하나라도 통과시 true. (boolean 반환)

const list1 = [2, 4, 6];
const list2 = [2, 3, 5];
const list3 = [1, 3, 5];

list1.every(element => { element % 2 === 0 });			// true
list2.every(element => { element % 2 === 0 });			// false
list3.every(element => { element % 2 === 0 });			// false

list1.some(element => { element % 2 === 0 });			// true
list2.some(element => { element % 2 === 0 });			// true
list3.some(element => { element % 2 === 0 });			// false

 

- find((요소) => {조건}), findIndex((요소) => {조건})

 

콜백함수 조건을 만족하는 요소가 있는지 배열을 검사하는 메서드이다. find는 요소를, findIndex는 인덱스를 반환

 

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.find(todo => todo.id === 3);
// { id: 3, text: '객체와 배열 배우기', done: true }

const index = todos.findIndex(todo => todo.id === 3);
// 2

 

4) 정렬, 재조합, 필터링 관련 기능

- reverse()

 

배열을 역순으로 정렬 (원본바뀜)

let list = ['a', 'b', 'c', 'd'];

list.reverse();
console.log(list);			// ['d', 'c', 'b', 'a']

 

- sort(function(이전값, 다음값) {조건})

 

배열을 정렬하는데 사용. 기본적으론 유니코드 코드 포인트로 정렬되며, 간단한 Arrow Function으로 오름차순/내림차순 정렬 가능.

let list = [3, 20, 12, 1, 4];

list.sort();				// [1, 12, 20, 3, 4]
list.sort((a,b) => a - b);		// 오름차순: [1, 3, 4, 12, 20]
list.sort((a,b) => b - a);		// 내림차순: [20, 12, 4, 3, 1]

 

- map(function(요소, 자리수) {조건}), forEach(function(요소, 자리수) {조건})

 

배열 요소 각각에 접근해서, 조건함수를 실행. 차이는 forEach는 실행만 하고, map은 실행결과의 배열을 반환.(원본유지)

let list = [1, 2, 3, 4];

// map case
const list2 = list.map((element) => { element * 3 });

console.log(list2);			// [3, 6, 9, 12]
console.log(list);			// [1, 2, 3, 4]

// forEach case
const list3 = list.forEach((element) => { element * 3});
console.log(list3);			// undefined

let list4 = [];
list.forEach((element) => { list4.push(element * 3) });
console.log(list4);			// [3, 6, 9, 12]

 

 

- filter(function(요소) {조건})

 

배열 요소들 중 조건함수를 만족하는 배열을 반환함. (원본유지)

let list = [1, 2, 3, 4, 5, 6];

let list2 = list.filter((element) => {element % 2 === 0});
console.log(list2);			// [2, 4, 6]
console.log(list);			// [1, 2, 3, 4, 5, 6]

 

- reduce(function(누적값, 다음값) {조건}, (초기값)), reduceRight

 

어쩌면, 모든 array 메소드 중 가장 중요하다고 생각한다. 그만큼 이해하기도 난해한 reduce()!

 

기본적인 개념은, 배열 내 요소를 순서대로 병합해서 하나의 값으로 반환한다. reduceRight()는 끝에서부터 역순 병합.

또한 초기값을 지정할 경우, 초기값을 기준으로 병합되기에 아래처럼 값이 달라진다.

let list = [1, 2, 3, 4, 5];

list.reduce((a,b) => { return a + b });			// 15
list.reduce((a,b) => { return a + b }, 10);		// 25

 

reduce는 초기값을 빈 배열([])로 둠으로써, map이나 filter의 기능도 구현할 수 있다.

// reduce vs map

let list = [1, 2, 3];
let init = [];

const reducer = (accumulator, value) => {
  accumulator.push(value * 2);
  return accumulator;
};

const reduceResult = list.reduce(reducer, init);
console.log(reduceResult);			// [2, 4, 6]

const mapResult = list.map(x => x * 2);
console.log(mapResult);				// [2, 4, 6]



// reduce vs filter

let list = [1, 2, 3, 4, 5, 6];
let init = [];

const reducer = (accumulator, value) => {
  if (value % 2 !== 0) {
    accumulator.push(value);
  };
  return accumulator;
};

const reduceResult = list.reduce(reducer, init);
console.log(reduceResult);			// [1, 3, 5]

const filterResult = list.filter(x => x % 2 !== 0);
console.log(filterResult);			// [1, 3, 5]

---

다음에는, 객체(Object) 관련된 메서드들도 공부해야겠다. (values(), entries()...)

 

[출처]

- 벨로퍼트 모던 자바스크립트 : learnjs.vlpt.us/basics/09-array-functions.html

- 2dubbing 님의 블로그 : https://2dubbing.tistory.com/55