[JS] 배열함수

배열

배열은 JavaScript에 내장되어 있는 자료구조입니다. 배열은 객체의 일종이지만, 내부적으로 특별하게 취급되어 일반적인 객체들과는 다른 특징을 갖고 있습니다.

type[]; //'object'

배열 안에 들어있는 값들은 요소(element) 혹은 항목(item)이라고 합니다. "배열 [1, 2, 3]은 세 개의 요소를 갖고있다"

또는 "배열 [1, 2, 3] 의 두 번째 항목은 두 번째 항목은 2 이다." 와 같이 말할 수 있습니다. 객체와 배열의 가장 큰 차이점은 , 배열의 각 요소 간에는 순서가 있다는 점입니다.

배열은 Array 생성자의 인스턴스입니다. 그러니까, 배열의 프로토타입으로 Array.prototype 객체가 지정되어 있습니다. 이 객체에 여러 메소드들이 내장되어 있는데 , 그목록을 확인 해보세요.

배열 생성하기

배열 리터럴

배열은 배열 리터럴(array literal)을 통해서 생성하는 것이 가장 쉽습니다.

const empty = []; // 빈 배열
const numbers = [1, 2, 3]; // 숫자가 들어있는 배열
const strings = ['one', 'two', 'three']; // 문자열이 들어있는 배열
const objects = [{prop: 1}, {prop: 2}, {prop: 3}]; // 객체가 들어있는 배열
const mixed = [1, 'one', {prop: 1}, null]; // 아무거나(?) 들어있는 배열

Array 생성자

Array 생성자를 통해서도 배열을 생성할 수 있습니다.

Array 생성자는 주어지는 인수에 따라 두 가지 서로 다른 방식으로 동작을 합니다.

수 타입의 인수가 하나 주어질 떄는 해당 수 만큼의 길이를 갖는 비어있는 배열을 만들어 냅니다.
이 외에 다른 모양으로 인수가 주어지면 그 인수들을 요소로 갖는 배열을 생성합니다.

new Array(1); //[Empty]
new Array(1000); //[Empty x 1000]

new Array(1, 2, 3); //[1, 2, 3]

Array.of

이렇게 일관적이지 못한 생성자의 동작방식 때문에, ES2015에 Array.of 정적 메소드가 추가되었습니다. 이 메소드는 위의 2번 방식으로만 동작합니다. 따라서 , Array 생성자를 사용할 때에는 1번 방식으로만 사용하고 2번 방식의 코드를 작성할 때는 생성자 대신 Array.of 정적 메소드를 사용하세요.

new Array(1, 2, 3); //이렇게 하지마세요.
Array.of(1, 2, 3); // 대신 이렇게 하세요.


// 'Array.of' 정적 메소드는 인수가 하나이더라도 그 인수를 요소로 갖는 배열을 반환합니다.
Array.of(1); //[1]

// 생성자는 이런 용도로만 사용하세요.
new Array(1000); // [Emty x 1000]

const array = Array.of(1,2,3, "박", [1 , 2, 3])
console.log(array);

Array.from

Javascript에는 유사 배열 객체(array-like-object)와 iterable 이라는 개념이 있어서, 이에 해당하는 값들은 Array.from 정적으로 메소드를 통해 배열로 쉽게 변환될 수 있습니다. 앞의 두 개념에 대해서는 Iterable 챕터에서 자세히 다룹니다.

// 'String' 타입은 래퍼 객체를 통해 iterable로 다루어질 수 있다
Array.from('hello'); //["h", "e" , "l", "l" , "o"]

요소 읽기

배열의 각 요소는 인덱스(index)를 이용해 읽어올 수 있습니다. 인텍스는 객체의 속성 이름과 비슷한 역할을 하지만, 0이상의 정수만이 배열의 인덱스가 될 수 있습니다.

배열을 생성하면, 배열 안에 들어있는 각 요소는 순서대로 0부터 시작하는 인덱스를 갖게 됩니다. 대문자 표기법에 인덱스를 사용함으로써 원하는 요소를 가져올 수 있습니다.

const arr = ['one', 'two', 'three'];
arr[0]; // 'one'
arr[1]; // 'two'
arr[2]; // 'three'
arr[3]; // undefined

위에서 볼 수 있듯이, 인덱스는 0부터 시작합니다. 즉, 첫 번째 요소를 가리키는 인덱스는 1이 아니라 0입니다,

요소 수정하기

객체와 마찬가지로 대괄호 표기법을 이용해서 요소를 수정 할 수 있습니다.

const arr = [false, false, false];
arr[1] = true;
console.log(arr); // [false, true, false]

fill 메소드를 사용하면 한꺼번에 많은 요소를 같은 값으로 바꾸어 버릴 수도 있습니다.

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

// 전체를 0으로 채우기
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0];

//인덱스 2와 4사이를 1로 채우기
arr.fill(1, 2, 4);
console.log(arr); // [0, 0, 1, 1, 0];

Array 생성자와 fill 메소드를 사용하면, 큰배열을 만들고 값을 채워넣는 일을 쉽게 할 수 있습니다.

new Array(1000); // [empty * 1000]
new Array(1000).fill(5); // [5, 5, 5, 5, 5,.....];

배열의 끝 부분에서 요소를 추가/제거하기(push, pop)

push 메소드와 pop 메소드를 사용하면 배열의 끝 부분에서 요소를 추가하거나 제거할 수 있습니다.

const arr = [];
arr.push('one'); // 1(요소가 추가된 후의 배열의 길이를 반환)
arr.push('two', 'three'); // 3

console.log(arr); // ['one', 'two', 'three']

// 베열의 요소 삭제하기
arr.pop(); // 'three'
arr.pop(); //'two'
arr.pop(); // 'one'
arr.pop(); // undefined (더 이상 배열에 요소가 남아있지 않으면 'undefined'를 반환)

메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인(Includes)

includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 boolean 값으로 반환합니다.

arr.includes(valueToFind[, fromIndex])

const arr = [1, 2];

document.writeln(arr.includes(1)); // true
document.writeln(arr.includes(3)); // false
document.writeln(arr.includes(1, 1)); // false
document.writeln(arr.includes(1, 2)); // false
document.writeln(arr.includes(2, -1)); // true

arr.includes(1); // true

arr[0]의 값이 1이므로 true를 리턴합니다.

arr.includes(3); // false

arr에는 3이라는 값이 없으므로 false를 리턴합니다.

arr.includes(1, 1); // false

arr[1] 이후에는 1이라는 값이 없으므로 false를 리턴합니다.

arr.includes(1, 2); // false

두 번째 파라미터인 fromIndex에 배열의 길이보다 크거나 같은 값이 들어가면 무조건 false를 리턴합니다.

여기서 배열의 길이는 2인데, fromIndex 자리에 2가 들어갔으므로 false가 리턴되었습니다.

arr.includes(2, -1); // true

fromIndex 자리에 음수가 들어가면, 실제 시작 index는 '배열의 길이 + fromIndex'로 계산됩니다.

배열의 길이는 2이고, fromIndex는 -1이므로,

실제 검색을 시작하는 index는 1이 됩니다. (2 + (-1))

arr[1]에 2가 있으므로, true가 리턴 되었습니다.

배열의 시작 부분에서 요소를 추가/제거하기(unshift, shift)

반대로 unshift, shift 메소드를 사용해 배열의 시작 부분에서 요소를 추가하거나 제거할 수도 있스빈다.

const arr = [];
arr.unshift(1); // 1 (요소가 추가된 후의 배열의 길이를 반환)
arr.unshift(2, 3); // 3

console.log(arr); // [ 2, 3, 1 ]

// 배열의 요소 삭제하기
arr.shift(); // 2
arr.shift(); // 3
arr.shift(); // 1
arr.shift(); // undefined (더 이상 배열에 요소가 남아있지 않으면 `undefined`를 반환)

요소를 배열 중간에 삽입하기(splice)

자바스크립 splice() 메서드는 배열 객체에 사용할 수 있는 메서드입니다. 이는 기존 요소를 사제하거나 교체하여 배열의 내용을 변경하며, 제거된 요소가 담긴 별도의 배열을 새로 반환합니다

splice() 메서드를 사용할 때는 start 매개변수에 꼭 값을 전달해야 하는데, 이 매개변수는 배열의 변경을 시작할 인덱스를 지정합니다. 위의 예시에서 인수로 전달된 2는 splice() 메서드가 인덱스 2 에서부터 요소를 제거 하기 시작할 것이라는 뜻입니다.

splice 메소드를 사용하면 배열에 속해있는 연속된 여러 요소, 즉 배열의 일부분을 통째로 바꿔 버릴 수 있습니다.

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

// 인덱스 '1'인 요소부터 '3' 개를 바꿔치기 합니다.
//'splice' 메소드는 바꿔치기를 통해 제거된 요소들을 반환합니다.]
arr.splice(1, 3, 'two', 'three', 'four'); // [2, 3, 4]
console.log(arr); // [1, 'two', 'three', 'four', 5]

splice로 반드시 같은 개수의 요소만 바꿔치기할 수 있는건 아닙니다.

const arr = [1, 2, 3, 4, 5];
arr.splice(1, 3); // [2, 3, 4]
console.log(arr); // [ 1, 5]

이렇게 splice 메소드를 배열의 중간 부분에 있는 요소를 제거하는 데도 활용할 수 있습니다.

const idx = [1, 2 , 3 , 4, 5]
idx.splice(2)
console.log(idx);



// [1, 2]

새로운 배열 객체 변환 (slice)

자바스크립트의 slice 함수는 원본 배열을 유지하고 begin부터 end 까지(end미포함)의 새로운 배열 객체를 반환합니다.

arr.slice([begin[,end]])

파라미터

1. begin(Optional)

추출 시작할 배열의 index
음수 index일 경우 배열의 끝에서부터의 길이를 의미

1.예) slice(-2)는 배열의 마지막 2개의 요소를 추출

값이 undefined일 경우 index 0 과 동일 동작
배열의 길이보다 큰 index일 경우 빈 배열 반환

2. end(Optional)

추출 종료할 배열의 index, end index를 제외하고 추출

1.예) slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2, 3) 추출

음수 index일 경우 배열의 끝에서부터의 길이를 의미

1.예) slice(2, -1)는 세번째 요소부터 끝에서 두번째 요소까지 추출

값이 생략 될 경우 배열의 끝(array.length)까지 추출
배열의 길이보단 큰 index일 경우도 마찬가지로 배열의 끝(array.length)까지 추출

반환 값

추출한 요소를 포함한 새로운 배열

ex)

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

      console.log(numbers.slice()); // index 0부터 추출
      // (5) [1, 2, 3, 4, 5]
      console.log(numbers.slice(1)); // index 1부터 추출
      // (4) [2, 3, 4, 5]
      console.log(numbers.slice(-2)); // 마지막요소부터 마지막에서 두번째 요소까지추출
      // (2) [4, 5]
      console.log(numbers.slice(99)); // 배열 길이보다 클 경우 빈 배열
      // []
      console.log(numbers.slice(1, 4)); // index 1부터 index 4까지(index 4제외) 추출
      // (3) [2, 3, 4]
      console.log(numbers.slice(2, -1)); // index 2부터 마지막에서 첫번째 요소까지
      // (마지막에서 첫번째 요소 제와) 추출
      // (2) [3, 4]
      console.log(numbers.slice(2, 99)); // index 2부터 마지막에서 요소까지 추출
      //(end가 배열의 길이보다 큼)
      // (3) [3, 4, 5]

결과를 단일 값으로 리턴하는 배열의 내장 메서드(reduce) ☆☆☆

자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.

arr.reduce(callback(accumulator, currentValue[, index[,array]])[,initialValue]);

calback은 배열의 각 요소에 대해 실행할 reducer 함수로 4개의 인수를 받습니다.

accumulator - callback 함수의 리턴 값을 누적합니다.
currentValue - 현재 처리 중인 배열 요소입니다.
index(Optional) - 현재 처리 중인 배열의 인덱스입니다.
array (Optional) - reduce를 호출한 배열입니다.
initialValue (Optional) - accumulator의 초깃값입니다. 별도의 지정된 값이 없을 때는 배열의 첫 번째 요소가 초깃값으로 사용됩니다.

ex)

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const sum = numbers.reduce(function (accumulator, currentValue) {
        return accumulator + currentValue;
      }, 0);
      console.log("sum = ", sum);

// sum = 55

reduce 함수는 numbers 배열의 요소를 모두 더한 값을 구합니다. 초깃값으로 0(zero)으로 설정했으며, 각 요소가 순회할 때마다 accumulator에 currentValue의 횬재 값이 더해지며 최종 결과는 sum에 리턴됩니다.

화살표 함수로 바꿔 보자.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const sum1 = numbers.reduce(
        (accumulator, currentNumber) => accumulator + currentNumber);

console.log("sum1 =", sum1);

// sum1 = 55

2. ex) 오브젝트 배열에서 원하는 항목의 값만 더해보자

const friends = [
        {
          name: "Gildong",
          age: 30,
          job: "Bandit",
          married: "false",
        },
        {
          name: "Cheolsu",
          age: 12,
          job: "student",
          married: "false",
        },
        {
          name: "Mr.Park",
          age: 32,
          job: "Developer",
          married: "true",
        },
      ];

      // 3명의 나이를 더해봅니다.
      // 여기서 초기값 설정이 반드시 필요합니다.
      const ageSum = friends.reduce((accumulator, currentObject) => {
        return accumulator + currentObject.age;
      }, 0);

      console.log("친구들 나이 합", ageSum);
      
      //친구들 나이 합 74

3. ex) 프로그래머스 문자열 정수의 합

// 한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 
// 각 자리수의 합을 return하도록 solution 함수를 완성해주세요.


function solution(num_str) {
    return [...num_str].reduce((acc, cur) => acc+Number(cur),0)
}

'블록체인 sw개발자' 카테고리의 다른 글

[JS] 함수 (0)	2023.06.30
[JS] while, 구구단 만들기 (0)	2023.06.29
[JS] 호이스팅 var, let의 차이 (0)	2023.06.27
[JS] 호이스팅 (0)	2023.06.27
JS Runtime (0)	2023.06.26

sang969

[JS] 배열함수

배열

배열 생성하기

배열 리터럴

Array 생성자

Array.of

요소 읽기

요소 수정하기

배열의 끝 부분에서 요소를 추가/제거하기(push, pop)

메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인(Includes)

배열의 시작 부분에서 요소를 추가/제거하기(unshift, shift)

요소를 배열 중간에 삽입하기(splice)

새로운 배열 객체 변환 (slice)

1. begin(Optional)

2. end(Optional)

결과를 단일 값으로 리턴하는 배열의 내장 메서드(reduce) ☆☆☆

'블록체인 sw개발자' 카테고리의 다른 글

티스토리툴바

[JS] 배열함수

배열

배열 생성하기

배열 리터럴

Array 생성자

Array.of

요소 읽기

요소 수정하기

배열의 끝 부분에서 요소를 추가/제거하기(push, pop)

메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인(Includes)

배열의 시작 부분에서 요소를 추가/제거하기(unshift, shift)

요소를 배열 중간에 삽입하기(splice)

새로운 배열 객체 변환 (slice)

1. begin(Optional)

2. end(Optional)

결과를 단일 값으로 리턴하는 배열의 내장 메서드(reduce) ☆☆☆

'블록체인 sw개발자' 카테고리의 다른 글

'블록체인 sw개발자' Related Articles

티스토리툴바