[JavaScript] 배열(Array) , 대표적인 Array 내장함수

배열(Array)

- 배열은 여러 개의 항목들이 들어있는 리스트와 같습니다. 

- 배열은 [대괄호]를 이용하여 선언합니다. 배열 안에는 "문자열", 숫자, {객체} 등을 넣을 수 있습니다. 섞어서 넣는 것도 가능합니다. 

- 배열의 인덱스는 0부터 시작합니다. 이 인덱스를 활용하여 값을 조회, 수정, 추가 ,삭제 등을 할 수 있습니다. 

 

 

대표적인 Array 내장함수

 

push()

- 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환합니다. push()는 기존의 배열을 수정합니다.

 

pop()

- 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다. pop()은 기존의 배열을 수정합니다. 

- 맨 뒤에 원소를 바닥날 때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다. 

 

unshift()

- 배열의 첫 번째 자리[0]에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환합니다. 기존의 배열을 수정합니다.

 

shift() 

- 배열의 첫 번째 요소[0]를 제거한 후, 제거한 요소를 반환합니다. 기존의 배열을 수정합니다. 

- 맨 앞의 원소를 바닥날 때까지 하나씩 추출합니다. 다 추출했으면 빈 배열을 반환합니다. 

 

splice()

- 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는 데 사용합니다. 리턴 값은 삭제한 배열 요소입니다. 

삭제한 요소가 없더라도 빈 배열을 반환합니다. 

arr.splice(start, deleteCount, el)

start - 수정할 배열 요소의 인덱스 

deleteCount - 삭제할 요소 개수, 제거하지 않을 경우 0

el - 배열에 추가될 요소 

let arr = [1,5,7];

arr.splice(1,0,2,3,4); // return : [], arr: [1,2,3,4,5,7]
arr.splice(1,2); // return : [2,3], arr: [1,4,5,7]

 

forEach()

- 기존에 있는 for문을 callback 함수를 통해 유사한 기능을 수행할 수 있도록 해줍니다. 즉, 배열 안의 모든 원소에 접근하고 싶을 때 사용합니다. 

- forEach는 return이 없기 때문에 callback 함수에 의해서 어떤 결과물을 내놓고 싶으면 함수 밖의 변수를 사용해야 합니다. 

- 예외를 던지지 않고는 forEach()를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다. 

const arr = [0,1,2,3,4,5];

arr.forEach((currentValue, index, array) => {
	console.log(`${array}의 ${index}번째 요소 : ${currentValue}`);
});

/*
0,1,2,3,4,5의 0번째 요소 : 0
0,1,2,3,4,5의 1번째 요소 : 1
0,1,2,3,4,5의 2번째 요소 : 2
0,1,2,3,4,5의 3번째 요소 : 3
0,1,2,3,4,5의 4번째 요소 : 4
0,1,2,3,4,5의 5번째 요소 : 5
*/

 

map()

- 배열에 있는 값들을 가지고 원하는 방식으로 변환 및 활용하고 싶을 때 사용합니다. 

- 배열 내의 모든 요소 각각에 대하여 Callback 함수를 호출한 반환 값을 모아 새로운 배열을 반환합니다. 

- callback 함수는 undefined를 포함한 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 

- 값이 삭제되거나 아직 값이 할당 혹은 정의되지 않은 인덱스에 대해서는 호출되지 않습니다. 

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.map(n => n * n);

console.log(squared);
//[1, 4, 9, 16, 25, 36, 49, 64] 출력.


const items = [
	{
    	id: 1,
        text: 'hello'
    },
    {
    	id: 2,
        text: 'bye'
    }
];

const texts = items.map(item => item.text);

console.log(texts);

// ["hello", "bye"] 출력.

 

indexOf()

- 해당 값이 속해 있는 인덱스 번호를 반환합니다. 

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

const index = superheroes.indexOf('토르');
console.log(index);
// 2 출력.

 

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.findIndex(todo => todo.id === 3);
console.log(index);
// 2 출력.

const todo = todos.find(todo => todo.id === 3);
console.log(todo);
// Object {id: 3, text: "객체와 배열 배우기", done: true} 출력.

 

filter()

- 특정 조건을 만족하는 원소들을 찾아서 그 원소들로 새로운 배열을 만드는 함수입니다. 

- 세 가지를 매개변수(인자)로 받습니다. 

  (1) element : 처리할 현재 요소.

  (2) index : element의 인덱스

  (3) array : 현재의 전체 배열( filter()를 호출한 배열)

 

반환 값은 특정 조건을 만족하는 원소들로 이루어진 새로운 배열입니다.

어떤 원소도 특정 조건을 만족하지 못했으면 빈 배열을 반환합니다.

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

const tasksNotDone = todos.filter(todo => todo.done === true);

console.log(tasksNotDone);

//[Object, Object, Object] 출력.
// 0: Object
//	id: 1
//	text: "자바스크립트 입문"
//	done: true
// ~2 까지 출력 

 

splice()

- 기존 배열을 특정 인덱스부터 특정 인덱스까지 삭제하고 반환합니다.

 

slice()

-  splice와 다르게 기존의 배열을 건드리지 않습니다.. 시작 인덱스부터 끝 인덱스 전까지 자릅니다.

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 2); // index부터 2개를 삭제한다.

console.log(spliced); // [30, 40] 출력. (삭제된 원소들 출력)
console.log(numbers); // [10, 20] 출력. (삭제하고 남은 결과 출력)


const numbers = [10, 20, 30, 40];

const sliced = numbers.slice(0, 2); // 0번째 원소부터 2번째 원소 전까지 자른다.

console.log(sliced); // [10, 20] 출력. (삭제된 원소들 출력)
console.log(numbers); // [10, 20, 30, 40] 출력. (그대로 유지)

 

concat

- 두 배열을 합쳐줍니다. 기존의 배열은 수정하지 않고 합친 새로운 배열을 반환합니다.

 

join

- 배열을 String으로 변환해줍니다. 기존의 배열은 수정하지 않고 새로운 String 값을 반환합니다. 

인자로는 구분자를 넣어줍니다. 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const concated = arr1.concat(arr2);
// 스프레드 연산자 사용해서 const concated = [...arr1, ...arr2];도 가능하다.
console.log(concated);
// [1, 2, 3, 4, 5, 6] 출력.


const array = [1, 2, 3, 4, 5];

console.log(array.join()); // 1,2,3,4,5 출력.
console.log(array.join(' ')); // 1 2 3 4 5 출력.
console.log(array.join(', ')); // 1, 2, 3, 4, 5 출력.

 

reduce

- 배열 안의 모든 원소들을 활용하여 연산할 때 사용합니다. 
- 4가지를 인자로 받습니다. 

  (1) accumulator : 누적된 값

  (2) current : 배열 안의 각 원소들을 가리킵니다.

  (3) index : 배열 안의 각 원소가 몇 번째 인덱스인지 알려줍니다.

  (4) array : 함수를 실행하고 있는 배열 자기 자신을 의미합니다.

const numbers = [1,2,3,4,5];

const sum = numbers.reduce((accumulator, current) => 
                          accumulator + current, 0);
// 0은 accmulator의 초기값이다. 

console.log(sum);
// 15 출력


const avg = numbers.reduce((accumulator, current, index, array) => {
    if(index == array.length-1) {
        return (accumulator + current) / array.length;
    }
    return accumulator + current;
}, 0);

// 마지막 인덱스 전 까지는 그냥 더하고 마지막 인덱스에는 더하고 배열의 길이 만큼 나눠준다.
// 즉, 평균을 구할 수 있다.

console.log(avg);
// 3 출력.

간단하게 동작 방법을 설명하자면,

 

- sum (합)

accumulator는 간단하게 acc, current는 cur이라고 명칭 하겠습니다. 

acc : 0 , cur : 1 =>  (acc = 1)

acc : 1 , cur : 2 =>  (acc = 3)

acc : 3 , cur : 3 =>  (acc = 6)

acc : 6 , cur : 4 =>  (acc = 10)

acc : 10 , cur : 5 => (acc = 15)    // 반환.

이러한 순서로 cur이 마지막 원소인 5에 다다르는 순간 acc는 15를 갖게 되고 모든 원소를 순환했으므로,

최종적으로 acc는 15를 반환하게 됩니다. 

 

- avg (평균)

네 번째 인자인 array에는 현재 배열인 numbers가 속하게 됩니다. 그리고 numbers 배열의 길이는 5이고 

마지막 원소를 나타내는 인덱스는 4입니다. 

 

즉, 마지막 인덱스 전까지는 sum의 동작 방식과 같지만 마지막 인덱스를 호출할 때에는 마지막 인덱스를 

더하고 최종 더한 값에 numbers 배열의 길이를 나눠주게 됩니다. 이 값이 곧 평균값이 됩니다.

 

reduce 다른 예시 (숫자가 아닌 자료형)

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

const counts = alphabets.reduce( (acc, cur) => {

    // acc배열 안에 해당 원소가 있는지 확인 한다.
    // acc['a'] 혹은 acc.a와 같음
    if(acc[cur]) {
        acc[cur] += 1;
    }
    
    // 초기 acc는 빈 배열이므로 해당 원소가 존재하지 않는다면 acc[cur]에 1이 들어간다.
    else {
        acc[cur] = 1;
    }
    
    return acc;

}, {});
// acc 초기값으로 빈 객체{}를 넣어준다


console.log(counts);

// Object {a: 3, b: 1, c: 2, d: 1, e: 1}가 출력된다.

간단하게 설명드리자면, 주석과 같습니다.

 

결론부터 말씀드리면 위 코드는 alphabets 배열 안에 들어있는 알파벳 원소들이 각각 몇 개를 갖고 있는지 세는 

코드입니다. 그리고 그 결과를 counts 변수에 넣어 저장하게 되는 것입니다. 

 

초기에 acc는 빈 객체이므로 처음에 들어오는 원소인 'a'는 존재하지 않으므로 acc ['a']에 1의 값이 들어갑니다. 

그 이후에 들어오는 'a'는 acc ['a']가 이제 빈 값이 아니니까 원래 있던 값에 +1을 하게 됩니다. 

 

마찬가지로 또 이후에 들어오는 'b', 'c', 'd' , 'e' 또한, 기존에 acc [cur]이 존재한다면 +1, 존재하지 않는다면 

1의 값을 넣어주게 됩니다.