자바스크립트 : 배열 객체

01. find()

const foundElement = 배열.find(function(element, index, array) { return 조건; // 조건이 true일 때 현재 요소를 반환 });

find 메서드는 주어진 조건을 만족하는 배열의 첫 번째 요소를 반환합니다. 조건을 만족하는 요소를 찾지 못하면 undefined를 반환합니다.

{
    const array = [5, 12, 8, 130, 44];
    const found = array.find(element => element > 10);

    console.log(found); // 12
}

위의 코드에서 find 메서드는 배열 array에서 조건을 만족하는 첫 번째 요소를 찾습니다.
여기서는 10보다 큰 첫 번째 요소를 찾아 반환합니다.
따라서 found 변수에는 12가 할당되고 콘솔에 출력됩니다.

결과 확인하기

02. forEach()

"배열.forEach(function(element, index, array) {});

forEach 메서드는 배열의 각 요소에 대해 한 번씩 제공된 함수를 실행합니다.

{
    const array = [1, 2, 3, 4, 5];
    array.forEach(element => console.log(element * 2));
}

위의 코드에서 forEach 메서드는 배열 array의 각 요소에 대해 주어진 함수를 실행합니다.
각 요소는 2를 곱한 결과가 콘솔에 출력됩니다.

결과 확인하기

03. filter()

const newArray = 배열.filter(function(element, index, array) {return 조건; // 조건이 true일 때 요소를 새 배열에 포함});

filter 메서드는 주어진 함수로 구현된 조건을 만족하는 배열의 모든 요소를 포함하는 새로운 배열을 생성합니다.

{
    const array = [1, 2, 3, 4, 5];
    const newArray = array.filter(element => element % 2 === 0);

    console.log(newArray); // [2, 4]
}

위의 코드에서 filter 메서드는 배열 array에서 주어진 함수에 따라 조건을 만족하는 요소만을 필터링하여 새로운 배열을 생성합니다.
여기서는 짝수만을 필터링하여 [2, 4] 배열을 생성하고, 이를 newArray 변수에 할당하여 콘솔에 출력합니다.

결과 확인하기

04. map()

const newArray = 배열.map(function(element, index, array){return 새로운 값;});

map 메서드는 주어진 함수를 사용하여 배열의 모든 요소에 대해 새로운 배열을 생성합니다.
새로운 배열은 각 요소에 함수를 적용한 결과로 이루어집니다.

{
    const array = [1, 2, 3, 4, 5];
    const newArray = array.map(element => element * 2);

    console.log(newArray); // [2, 4, 6, 8, 10]
}

위의 코드에서 map 메서드는 배열 array의 각 요소에 대해 주어진 함수를 적용하여 새로운 배열을 생성합니다.
여기서는 각 요소를 2배로 만들어 [2, 4, 6, 8, 10] 배열을 생성하고,
이를 newArray 변수에 할당하여 콘솔에 출력합니다.

결과 확인하기

05. includes()

array.includes(element, start)

includes 메서드는 JavaScript에서 배열이 특정 요소를 포함하고 있는지 판별할 때 사용됩니다.
이 메서드는 배열에 지정된 요소가 있으면 true를, 없으면 false를 반환합니다.

{
    const fruits = ['apple', 'banana', 'mango', 'orange'];
    const hasMango = fruits.includes('mango');  // true
    const hasCherry = fruits.includes('cherry');  // false
    
    console.log('Does the array include mango?', hasMango);  // Does the array include mango? true
    console.log('Does the array include cherry?', hasCherry);  // Does the array include cherry? false         
}

fruits.includes('mango')는 배열에 'mango'가 포함되어 있으므로 true를 반환합니다.
fruits.includes('cherry')는 배열에 'cherry'가 없으므로 false를 반환합니다.

결과 확인하기

06. indexOf()

array.indexOf(searchElement, fromIndex)

indexOf 메서드는 배열에서 지정된 요소를 찾아 첫 번째로 발견된 인덱스를 반환합니다.
만약 배열에 해당 요소가 없으면 -1을 반환합니다.

{
    const array = [1, 2, 3, 4, 5];
    const index = array.indexOf(3);

    console.log(index); // 2
}

위의 코드에서 indexOf 메서드는 배열 array에서 숫자 3을 찾아 첫 번째로 발견된 인덱스를 반환합니다.
여기서는 2를 반환합니다.

결과 확인하기

07. join()

array.join(separator)

join 메서드는 JavaScript에서 배열의 모든 요소를 연결하여 하나의 문자열로 만들 때 사용됩니다. 이 메서드는 배열의 각 요소 사이에 지정된 문자열을 삽입하여 최종 문자열을 생성합니다.

{
    const words = ['Hello', 'world', 'this', 'is', 'JavaScript'];
    const sentence = words.join(' ');  // "Hello world this is JavaScript"
    const csvFormat = words.join(',');  // "Hello,world,this,is,JavaScript"
    
    console.log('Sentence:', sentence);  // Sentence: Hello world this is JavaScript
    console.log('CSV format:', csvFormat);  // CSV format: Hello,world,this,is,JavaScript                    
}

words.join(' ')는 배열의 모든 요소를 공백(' ')을 사용하여 연결합니다. 이로 인해 문장처럼 읽히는 문자열이 생성됩니다.
words.join(',')는 배열의 모든 요소를 쉼표(',')로 연결하여 CSV 형식과 같은 문자열을 생성합니다.

결과 확인하기

08. push()

array.push(element1, element2, ..., elementN)

indexOf 메서드는 배열에서 지정된 요소를 찾아 첫 번째로 발견된 인덱스를 반환합니다.
만약 배열에 해당 요소가 없으면 -1을 반환합니다.

{
    const array = [1, 2, 3];
    array.push(4, 5);

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

위의 코드에서 push 메서드는 배열 array의 끝에 숫자 4와 5를 추가합니다.
결과적으로 배열은 [1, 2, 3, 4, 5]가 됩니다.

결과 확인하기

09. reduce()

array.reduce(function(accumulator, currentValue, currentIndex, array) { return newAccumulatorValue; }, initialValue);

reduce 함수는 배열의 각 요소를 순회하며 하나의 값으로 줄여나가는 고차 함수입니다. 배열의 모든 요소를 누적하여 최종적으로 하나의 값을 반환합니다. 이를 통해 배열을 효과적으로 처리할 수 있습니다.

{
    const numbers = [1, 2, 3, 4, 5];
    const sum = numbers.reduce((acc, cur) => acc + cur, 0);
    
    console.log(sum); // Output: 15
}

위의 코드에서 push 메서드는 배열 array의 끝에 숫자 4와 5를 추가합니다.
결과적으로 배열은 [1, 2, 3, 4, 5]가 됩니다.

결과 확인하기

10. reverse()

array.reverse()

reverse() 함수는 JavaScript에서 배열의 순서를 뒤집는 메서드입니다.
이 함수는 기존 배열을 변경하며, 새로운 배열을 반환하지 않습니다.

{
    const array = [1, 2, 3, 4, 5];
    array.reverse();
    
    console.log(array); // Output: [5, 4, 3, 2, 1]
}

이 예제에서는 [1, 2, 3, 4, 5]라는 배열이 있습니다.
reverse() 메서드를 호출한 후에는 배열의 순서가 뒤집혀 [5, 4, 3, 2, 1]이 됩니다.

결과 확인하기

11. slice()

array.slice(start, end)

slice() 메서드는 배열의 일부분을 추출하여 새로운 배열을 반환합니다.
이 메서드는 기존 배열을 변경하지 않습니다.

{
    const array = [1, 2, 3, 4, 5];
    const slicedArray = array.slice(1, 4);
    
    console.log(slicedArray); // 출력: [2, 3, 4]
}

이 코드에서는 [1, 2, 3, 4, 5] 배열에서 인덱스 1부터 (포함) 인덱스 4까지 (미포함)의 요소들을 추출하여 slicedArray에 저장합니다.
따라서 slicedArray는 [2, 3, 4]가 됩니다.

결과 확인하기

12. splice()

array.splice(start, deleteCount, item1, item2, ..., itemN)

splice() 메서드는 배열의 내용을 추가하거나 제거하여 배열을 수정합니다. 이 메서드는 기존 배열을 변경합니다.

splice() 메서드는 세 가지 매개변수를 받습니다:

시작 인덱스 (필수): 배열에서 변경을 시작할 위치를 나타냅니다.
제거할 요소의 개수 (선택적): 시작 인덱스부터 제거할 요소의 수를 나타냅니다. 생략하면 시작 인덱스부터 끝까지의 모든 요소를 제거합니다.
추가할 요소들 (선택적): 배열에 추가할 요소들입니다. 이 부분이 생략되면 요소를 제거만 합니다.

{
    const array = [1, 2, 3, 4, 5];
    array.splice(2, 1, 'a', 'b');
    
    console.log(array); // 출력: [1, 2, 'a', 'b', 4, 5]
}

이 코드에서는 [1, 2, 3, 4, 5] 배열에서 인덱스 2부터 시작하여 1개의 요소를 제거하고,
그 위치에 'a'와 'b'를 추가합니다. 따라서 변경된 배열은 [1, 2, 'a', 'b', 4, 5]가 됩니다.

결과 확인하기

13. sort()

array.sort(compareFunction)

sort() 메서드는 배열의 요소를 적절한 순서로 정렬합니다.
이 때, 기본적으로는 문자열로 변환한 값에 따라 정렬이 이루어집니다.
원본 배열을 변경하며, 정렬된 배열을 반환합니다.

만약 정렬 순서를 정의하기 위해 비교 함수를 제공하지 않으면,
요소들은 문자열로 변환된 후 Unicode 코드 포인트 순서로 정렬됩니다.

{
    const numbers = [5, 2, 8, 1, 4];
    numbers.sort((a, b) => a - b);
    
    console.log(numbers); // 출력: [1, 2, 4, 5, 8]
}

이 코드에서는 [5, 2, 8, 1, 4] 배열을 오름차순으로 정렬하기 위해 sort() 메서드를 호출하고,
비교 함수를 제공하여 숫자의 크기를 기준으로 정렬합니다.
결과적으로 정렬된 배열은 [1, 2, 4, 5, 8]가 됩니다.

결과 확인하기