[JS] 자바스크립트의 배열

JavaScript에서 배열(Array)은 데이터를 순서대로 저장하는 데 사용되는 매우 중요한 자료형 중 하나입니다. 배열은 숫자, 문자열, 객체 등 다양한 타입의 데이터를 저장할 수 있으며, 이를 다루기 위해 다양한 메소드(함수)를 제공합니다. 이번 포스팅에서는 JavaScript 배열과 배열을 다루는 주요 메소드들에 대해 살펴보겠습니다.

 

 

 

자바스크립 배열 - 커버 이미지

 

자바스크립트의 배열과 주요 메소드

 

목차

 

1. 배열이란?

2. 배열 메소드

3. 배열 메소드 사용 시 주의사항

마무리

추천글

 

 

배열

배열은 객체(object)의 일종으로, 인덱스를 기반으로 여러 데이터를 저장하는 자료구조입니다. 배열의 길이는 동적으로 변하며, 배열 안에 모든 타입의 데이터를 혼합하여 저장할 수 있습니다.

// 빈 배열 선언
let arr = [];

// 숫자를 포함한 배열
let numArr = [1, 2, 3, 4, 5];

// 다양한 타입을 포함한 배열
let mixedArr = [1, "apple", true, { key: "value" }];

 

배열의 요소에 접근하기 위해서는 인덱스를 사용합니다. 자바스크립트의 배열의 인덱스는 0부터 시작합니다.

console.log(mixedArr[0]) // 1
console.log(mixedArr[1]) // apple

배열 메소드

배열을 효율적으로 관리하고 조작하기 위해 다양한 메소드들이 제공됩니다. 자주 사용되는 배열 메소드와 그 사용 방법을 알아보겠습니다.

 

• push : 배열의 마지막에 새로운 요소를 추가합니다.
  

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

• pop : 배열의 마지막 요소를 제거하고, 그 값을 반환합니다.
  

  let arr = [1, 2, 3];
  let popValue = arr.pop();
  console.log(popValue) // 3
  console.log(arr) // [1, 2]

• unshift : 배열의 앞에 요소를 추가합니다.
  

  let arr = [1, 2, 3];
  arr.unshift(0)
  console.log(arr) // [0, 1, 2, 3]

• shift : 배열의 첫 번째 요소를 제거하고, 그 값을 반환합니다.
  

  let arr = [1, 2, 3];
  let shiftValue = arr.shift();
  console.log(shiftValue) // 1
  cosole.log(arr); // [2, 3]

• concat : 두 개 이상의 배열을 합쳐 새로운 배열을 반환합니다.
  

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5];
  let contcatArr = arr1.concat(arr2);
  console.log(concatArr) // [1, 2, 3, 4, 5]

• slice : 배열의 일부 요소를 추출해 새로운 배열을 반환합니다. 추출한 원본 배열은 변하지 않습니다. slice(begin, end) 형태로 사용합니다. 
  
  begin : 추출 시작점에 대한 인덱스를 의미합니다. 음수인 경우 배열의 끝에서부터의 위치를 나타내고, 입력하지 않아 undefined인 경우는 0번 인덱스부터 추출합니다.
  end : 추출을 종료할 인덱스를 의미합니다. slice는 end를 제외한 (end-1) 인덱스의 요소까지 추출합니다.
   end를 생략하면 배열의 끝(arr.length) 까지 추출합니다.
  

  let arr = [1, 2, 3, 4, 5]; 
  let sliceArr = arr.slice(1, 4); 
  let sliceArr2 = arr.slice(3); 
  let sliceArr3 = arr.slice(-3); 
  let sliceArr4 = arr.slice(); 
  
  console.log(sliceArr); // [2, 3, 4] 
  console.log(sliceArr2); // [4, 5] 
  console.log(sliceArr3); // [3, 4, 5] 
  console.log(sliceArr4); // [1, 2, 3, 4, 5]

• splice : 배열의 요소를 추가, 제거 또는 교체합니다. 원본 배열을 수정하고 배열에서 제거된 요소를 담은 배열을 반환합니다. 제거한 요소가 없는 경우 빈 배열을 반환합니다. splice(start, deleteCount, item) 형태로 사용합니다.
  
  start : 배열의 변경을 시작할 인덱스를 의미합니다. 음수인 경우 배열의 끝에서부터의 위치를 나타냅니다.
  deleteCount : 배열에서 제거할 요소의 수입니다. 생략하거나 (arr.length - start) 보다 값이 큰 경우 start부터 모든 요소를 제거합니다. 0인 경우 요소를 삭제하지 않습니다.
  item : 배열에 추가할 요소입니다. 지정하지 않으면 요소를 제거하기만 합니다.
  
  교체
  

  let arr = [1, 2, 3, 4, 5];
  arr.spilce(1,2, 10, 11);
  console.log(arr) // [1, 10, 11, 4, 5] : 1번 인덱스부터 2개 요소를 10, 11로 교체

  
  추가
  

  let arr = [1, 2, 3, 4, 5];
  arr.spilce(5, 0, 10);
  console.log(arr) // [1, 2, 3, 4, 5, 10] : start가 arr.length 보다 커 요소를 추가만 한다

  
  삭제
  

  let arr = [1, 2, 3, 4, 5];
  arr.spilce(1, 2);
  console.log(arr) // [1, 4, 5] : start부터 2개의 요소를 삭제

• forEach : 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행합니다.
  

  let numbers = [1, 2, 3, 4];
  numbers.forEach(function(num) {
      console.log(num); // 1\n 2\n 3\n 4
  });

• map : 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 만듭니다.
  

  let number = [1, 2, 3, 4];
  let squared = numbers.map(function(num) {
      return num * num;
  });
  consloe.log(squared); // [1, 4, 9, 16]

• filter() : 배열의 각 요소에 대해 주어진 조건을 만족하는 요소만을 새로운 배열로 반환합니다. 
  

  let number = [1, 2, 3, 4];
  let evenNumbers = numbers.filter(function(num) {
      return num % 2 === 0;
  });
  console.log(evenNumbers); // [2, 4]

• reduce() : 배열의 모든 요소를 누적하여 하나의 값으로 줄이는 데 사용됩니다.
  
  reduce의 4가지 인자
  
  1. accumulator : 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.
  2. currentValue : 현재 처리할 요소
  3. currentIndex : 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1로 시작합니다.
  4. array : reduce를 호출한 배열 
  

  let numbers = [1, 2, 3, 4];
  let sum = numbers.reduce(function(acc, num) {
      return acc + num;
  }, 0); // 콜백의 첫번째 인자(0) : initialValue
  
  console.log(sum); // 10

• find() : 배열에서 조건을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없다면 undefined를 반환합니다.
  

  let numbers = [1, 2, 3];
  let found = numbers.find(function(num) {
      return num > 2;
  });
  
  console.log(found) // 3

• includes() : 배열에 특정 값이 포함되어 있는지 확인합니다. 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다.
  

  let numbers = [1, 2, 3];
  let hasTwo = numbers.includes(2);
  let hasFour = numbers.includes(4);
  
  console.log(hasTwo); // true
  console.log(hasFour); // false

• sort() :  배열의 요소를 정렬합니다. 기본적으로는 문자열 기준으로 정렬되지만, 숫자를 정렬할 때는 비교 함수를 전달해야 합니다.
  

  let numbers = [3, 1, 4, 2, 10];
  numbers.sort();
  
  console.log(numbers); // [1, 10, 2, 3, 4] : 문자열 기준으로 정렬하기 때문에 "10"이 "2"보다 먼저 오게 된다.
  
  ---- 숫자 정렬 ----
  numbers.sort(function(a, b) {
  	return a - b;
  })
  
  console.log(numbers); // [1, 2, 3, 4, 10] : 숫자 기준으로 오름차순

  
  
  

배열 메소드 사용 시 주의사항

 

• 불변성: 배열 메소드 중 일부는 원본 배열을 변경하고, 일부는 새로운 배열을 반환합니다. 예를 들어, push()나 splice()는 원본 배열을 변경하지만, slice()나 concat()은 원본 배열을 변경하지 않고 새로운 배열을 반환합니다. 배열을 다룰 때 불변성을 유지해야 할 경우, 원본 배열을 변경하지 않는 메소드를 사용하는 것이 좋습니다.
• 고차 함수: forEach(), map(), filter(), reduce()와 같은 메소드는 함수형 프로그래밍의 기초가 되는 고차 함수로, 배열의 각 요소를 처리하는 데 매우 유용합니다. 반복적인 작업을 줄이고, 간결하고 직관적인 코드를 작성하는 데 큰 도움이 됩니다.

 

 

 

 

 

 

자바스크립트에서 배열은 데이터를 저장하고 관리하는 데 매우 유용한 자료구조이며, 다양한 메소드를 제공해 배열을 쉽고 효율적으로 다룰 수 있습니다. 각 메소드의 특징과 사용법을 이해하고 적절히 활용하면, 배열과 관련된 작업을 더 효율적으로 처리할 수 있습니다.

 

자바스크립트 배열과 메소드들을 잘 활용해 더 나은 코드를 작성해 보세요! 😊

 

 

추천글

 

2024.09.12 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트의 자료형

[JS] 자바스크립트의 자료형