JavaScript - 배열

치맨·2022년 12월 30일

JavaScript

javascript

목록 보기

2/23

자바스크립트에서 배열

자바스크립트에서 배열의 타입은 객체입니다. 자바스크립트에서 배열이라는 타입은 존재하지 않습니다. 그렇다면 배열과 객체의 차이점은 무엇일까요?

구조적으로 객체는 프로퍼티 키, 프로퍼티 값으로 구성되어 있지만 배열은 인덱스와 요소로 구성되어있습니다.
값에 접근하는 방법은 객체는 프로퍼티 키를 통해 접근하지만 배열은 인덱스를 통해 접근합니다.

//객체
 const object = { name: 'KIM' };
console.log(object['name']); // "KIM"

//배열
 const array = ['KIM'];
console.log(arr[0]); // "KIM"

객체는 순서가 없는 반면, 배열은 순서(index) 가 존재합니다.
객체는 길이가 없는 반면, 배열은 길이(length)가 존재합니다.

	객체	배열
구조	프로퍼티 키, 프로퍼티 값	값,인덱스
참조	프로퍼티 키	인덱스
순서	X	O
길이	X	O

자바스크립트에서 배열은 자료구조에서 의미하는 배열과 다릅니다.

자료구조에서의 배열은밀집배열 => 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접입니다.
자바스크립트에서 배열은희소배열 => 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있는 배열 입니다.
문법적으로 희소배열을 허용하지만, 의도적으로 만들지 않도록 주의*
Ex) const arr = [1, ,3] //[ 1, <1 empty item>, 2 ]
자바스크립트에서 배열은 배열의 동작을 흉내낸 특수한 객체 입니다.

배열 생성방법

자바스크립트에서 배열을 생성하는 방법은 총 4가지가 있습니다.

배열 리터럴 []
- 가장 일반적이며 대괄호를 사용하여 배열을 만든다.
- const arr = [1,2,3]
Array 생성자 함수 new Array()
- Array생성자 함수를 통해 배열을 만든다.
- 인수가 0개 일 경우 빈배열이 된다.
  const arr = new Array() // []
- 인수가 1개일 경우 희소배열이 생성된다.
  const arr = new Array(5) // [ <10 empty items> ] 배열의 값은 없지만 크기는 10이다.
- 인수가 2개 이상이거나, 숫자가 아닌 경우 인수를 요소로 갖는 배열을 만든다.
  const arr = new Array(1,2,3) // [1,2,3]
  const arr = new Array({}) // [{}]
Array.of Array.of()
- Array 생성자 함수와 비슷하게 동작한다.
  const arr = Array.of(1,2,3) // [1,2,3]
- 단 인수가 1개인 경우에도 배열을 생성한다.
  const arr = Array.of(1) // [1]
Array.from()
- 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 인수로 받아 배열을 만든다.
- 유사배열 객체를 통해 : Array.from({length:3},(item,index)=>index // [0,1,2]
- 이터러블을 통해 : Array.from('KIM') // ['K','I','M']

배열 고차 함수

조건문과 반복문을 제거하여 복잡성을 해결하고 가독성이 좋은 코드를 작성하기 위해 사용하며 합니다.

forEach
map
filter
reduce
some
every
find
findIndex
flatMap
flat
concat

forEach
- 모든 요소를 순회할때 사용하며, 반환값이 따로 존재하지 않는다.(반환값이 undefined)
- forEach는 for문보다 성능은 안좋지만 가독성 측면에서 좋다. 시간이 많이 걸리는 코드 또는 높은 성능이 필요한 경우가 아니라면 for문보다는 forEach메서드를 사용 하는것이 더 좋다.
- 원본배열을 변경하지 않는다. 단 콜백함수를 통해 원본배열을 수정할 수는 있다.
- 기본형태 :arr.forEach((item,index,arr)=>{})
```
//forEach를 통해 even에 짝수값만 담기 

const test = [1, 2, 3, 4, 5];
const even = [];

const returnValue = test.forEach((item, index, arr) => {
  if (item % 2 === 0) {
    even.push(item);
  }
  
  // arr를 통해 test배열(원본) 수정
  arr[index] = item * 2;
  return arr;
}); 

console.log(returnValue); // undefined
console.log(even); // [ 2, 4, 6, 8, 10 ]
console.log(test); // [ 2, 4 ]
	
```

```

map

기존의 배열을 순회하면서 요소값을 다른값으로 매핑한 새로운 배열을 생성한다.(forEach와 차이점)
원본 배열은 변경되지 않는다.

기본형태 : arr.map((item,index,arr)=>{})

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

 // 짝수는 even, 홀수는 odd로 출력
 const returnValue = test.map((item, index, arr) => {
   return item % 2 === 0 ? 'even' : 'odd';
 });

 
 console.log(returnValue); // [ 'odd', 'even', 'odd', 'even', 'odd', 'even' ] 
 console.log(test); // [ 1, 2, 3, 4, 5, 6 ]  원본배열은 변함이없다.
}

filter

기존 배열을 순회하면서 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
특정 요소를 제거하거나, 중복 요소를 제거 할 수 있다.
원본 배열은 변경되지 않는다.

기본형태 : arr.filter((item,index,arr)=>{})

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

   const returnValue = test.filter((item, index, arr) => {
     return item % 2 === 0;   //2로 나눴을때 0이 true인 요소로만 구성된 새로운 배열을 return
   });

   console.log(returnValue); // [2,4,6]
   console.log(test);   // [1,2,3,4,5,6] 원본 배열은 변함이 없다.
}

reduce

배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
원본 배열은 변경되지 않는다.
기본형태 : arr.reduce((accumulator, currentValue, index, arr)=>{},초기값)

초기값은 선택적으로 설정하지만, 초기값을 설정해주는것이 안전하다.

     const test = [1, 2, 3, 4, 5, 6];
		
   // 평균값 구하기
   const returnValue = test.reduce((acc, cur, index, arr) => {
     return acc + cur / arr.length;
   }, 0);

   console.log(returnValue); // 3.5
   console.log(test); // [1, 2, 3, 4, 5, 6]; 원본 배열은 변함이없다.

some

배열의 요소들을 함수(조건)을 통과하는데 한개라도 통과하면 true, 아니면 false를 출력
빈 배열로 함수(조건)을 통과하면 무조건 false를 출력
원본 배열은 변경되지 않는다.

기본형태 : arr.some((item,index,arr)=>{})

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

   const returnValue = test.some((item, index, arr) => {
     return item <= 1;
     // return item<=0   // false출력 0이하의 수는 없기 때문
   });

   console.log(returnValue); // true  조건에 만족하는 1이하의 수 1이 존재하기 때문
   console.log(test); //  [1, 2, 3, 4, 5, 6];  원본 배열은 변함이 없다.

every

some의 반대버전으로 배열의 모든 요소들을 함수(조건)을 통과하는데 모두 통과하면 true, 한 요소라도 통과하지 못한다면 false를 출력
빈 배열을 함수(조건)에 적용시키면 무조건 true를 반환
원본 배열은 변경되지 않는다.

기본형태 : arr.every((item,index,arr)=>{})

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

   const returnValue = test.every((item, index, arr) => {
     return item <= 5; //false 출력 5이하의 수가 아닌 6이 존재하므로
     // return item <= 6; // true
     // return []; // true
   });

   console.log(returnValue); 
   console.log(test); // [1, 2, 3, 4, 5, 6]; 원본 배열은 변함이 없다.

find

주어진 배열을 순회하면서 콜백 함수 실행의 반환값이 true에 해당하는 첫번째 요소를 반환
만약 true인 요소가 존재하지 않는다면 undefined을 반환한다.
원본 배열은 변경되지 않는다.
빈 배열은 1을 반환한다.

기본형태 : arr.find((item,index,arr)=>{})

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

   const returnValue = test.find((item, index, arr) => {
     return item % 2 === 0; // 2 조건에 만족하는 2,4,6 중 첫번째 수인 2
     // return item >= 7; // undefined 조건에 맞는 요소가 없으므로 undefined
     // return []; // 1을 return
   });

   console.log(returnValue);
   console.log(test); // [1, 2, 3, 4, 5, 6] 원본배열에 변함이 없다.

findIndex

배열의 요소를 순회하면서 콜백 함수 실행의 반환값이 true에 해당하는 첫번째 요소의 인덱스 값을 반환
만약 true요소가 존재하지 않는다면 -1을 반환한다.
빈배열은 0을 반환한다.
원본 배열은 변함이 없다.

기본형태 : arr.findIndex((item,index,arr)=>{})

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

   const returnValue = test.findIndex((item, index, arr) => {
     return item % 2 === 0; // 2 조건에 만족하는 2,4,6 중 첫번째 수인 2의 index값 1
     // return item >= 7; // -1 조건에 맞는 요소가 없으므로 -1
     // return []; // 0을 return
   });

   console.log(returnValue);
   console.log(test); // [1, 2, 3, 4, 5, 6] 원본배열에 변함이 없다.

flat

중첩된 배열구조를 정해진 깊이만큼 평탄하게 만들 수 있는 함수
기본형태 : arr.flat(depth)

depth는 0,1,2 ... Infinity가 있다.

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

     console.log(test.flat(0)); // [1, [2, [3, [4, [5, [6]]]]]] 0개의 [] 를 없앰
     console.log(test.flat(1)); // [1, 2, [3, [4, [5, [6]]]]] 1개의 [] 를 없앰
     console.log(test.flat(2)); // [1, 2, 3, [4, [5, [6]]]] 2개의 [] 를 없앰
     console.log(test.flat(3)); // [1, 2, 3, 4, [5, [6]]] 2개의 [] 를 없앰 3개의 [] 를 없앰

     console.log(test.flat(Infinity)); // [1, 2, 3, 4, 5, 6] 제일 큰 부분을 제외하고 []를 다 없앰

     console.log(returnValue);

flatMap

flat과 map의 기능을 같이 할 수 있다.
기존의 배열을 순회하면서 콜백함수의 실행 결과를 리턴한값으로 이루어진 새로운 배열에 대해 중첩된 배열구조를 평탄하게 만들 수 있다
단 1단계만 평탄화한다. 만약 map을 통해 중첩된 배열의 평탄화의 깊이를 지정해야한다면 map, flat을 사용한다.
원본 배열은 변함이 없다.

기본형태 : arr.flatMap((item,index,arr)=>{})

   const test = ['test'];

     const returnValue = test.flatMap((item, index, arr) => {
       return item.split(''); 
     });

     const returnMap = test.map((item, index, arr) => {
       return item.split('');
     });

     console.log(returnValue); // [ 't', 'e', 's', 't' ]
     console.log(returnMap); // [ [ 't', 'e', 's', 't' ] ]
     console.log(returnMap.flat()); [ 't', 'e', 's', 't' ]
     console.log(test); // [ 'test' ] 원본배열에 변함이 없다.

concat

인자로 주어진 배열이나, 값들을 기존 배열에 합쳐서 새로운 배열을 반환한다.
원본 배열은 변함이 없다.

기본형태 : arr.concat(arr || value)

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

   console.log(arr1.concat(arr2, arr3, 7)); // [1,2,3,4,5,6,7];
   console.log(arr1.concat(arr2, 7)); // [1,2,3,4,7];
   console.log(arr1.concat(7)); // [1,2,7];

   console.log(arr1); // [1, 2];
   console.log(arr2); // [3, 4];
   console.log(arr3); // [5, 6];

Ref

자바스크립트 Deep Dive

치맨

기본기가 탄탄한 개발자가 되자!

이전 포스트

JavaScript - 변수

다음 포스트

JavaScript - 배열

javascript

목차

자바스크립트에서 배열

자바스크립트에서 배열의 타입은 객체입니다. 자바스크립트에서 배열이라는 타입은 존재하지 않습니다. 그렇다면 배열과 객체의 차이점은 무엇일까요?

자바스크립트에서 배열은 자료구조에서 의미하는 배열과 다릅니다.

배열 생성방법

자바스크립트에서 배열을 생성하는 방법은 총 4가지가 있습니다.

배열 리터럴 `[]`

Array 생성자 함수 `new Array()`

Array.of `Array.of()`

Array.from()

배열 고차 함수

조건문과 반복문을 제거하여 복잡성을 해결하고 가독성이 좋은 코드를 작성하기 위해 사용하며 합니다.

forEach

map

filter

reduce

some

every

find

findIndex

flat

flatMap

concat

Ref

JavaScript - 변수

JavaScript - 함수

0개의 댓글

JavaScript - 배열

javascript

목차

자바스크립트에서 배열

자바스크립트에서 배열의 타입은 객체입니다. 자바스크립트에서 배열이라는 타입은 존재하지 않습니다. 그렇다면 배열과 객체의 차이점은 무엇일까요?

자바스크립트에서 배열은 자료구조에서 의미하는 배열과 다릅니다.

배열 생성방법

자바스크립트에서 배열을 생성하는 방법은 총 4가지가 있습니다.

배열 리터럴 []

Array 생성자 함수 new Array()

Array.of Array.of()

Array.from()

배열 고차 함수

조건문과 반복문을 제거하여 복잡성을 해결하고 가독성이 좋은 코드를 작성하기 위해 사용하며 합니다.

forEach

map

filter

reduce

some

every

find

findIndex

flat

flatMap

concat

Ref

JavaScript - 변수

JavaScript - 함수

0개의 댓글

배열 리터럴 `[]`

Array 생성자 함수 `new Array()`

Array.of `Array.of()`