배열

배열은 연관된 데이터를 모아서 통으로 관리하기위해 사용된다.

여러가지 데이터를 담을 수 있다. 그러나 보통 한가지 타입만 담는것이 일반적이다.

배열 생성 방법

1. 배열 리터럴

코드 📄

const arr= [1, 2, 3]; 

2. 생성자 함수
   코드 📄

const arr =new Array(3);  // arr: [3 empty items]
const arr2 = new Array(1, 2, 3); // arr2: [1,2,3]

• Array 생성자 함수를 사용해 만들어진 arr은 Array 배열객체이다.
• 인자로 한개가 들어오면 배열의 길이를 나타낸다.
• 인자로 두개 이상이 들어오면 배열의 요소를 나타낸다.

3. Array.of()
   코드 📄

const arr = Array.of(1,2,3); 
console.log(arr) ;  //[1,2,3]

• 전달된 인수를 요소로 갖는 배열 생성

4. Array.from()

   유사 배열 객체(HTMLCollection,nodeList, arguments함수) 또는 이터러블 객체를 변환하여 새로운 배열 생성

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike: 배열로 변환할 유사 배열 객체 또는 반복 가능한 객체.
• mapFn (선택 사항): 배열의 각 요소에 대해 호출할 맵핑 함수.
• thisArg (선택 사항): mapFn을 실행할 때 this로 사용할 값.

유사 배열 객체 반환
코드 📄

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);
console.log(array); // ['a', 'b', 'c']

이터러블 객체 반환
코드 📄

const str= "Hello";
const array= Array.from(str);
console.log(array); // ['H', 'e', 'l', 'l', 'o']

맵핑함수 사용하여 반환
코드 📄

const array = Array.from([1, 2, 3], x => x * 2);
//맵핑함수는 배열의 각 요소에 대해 호출되며, 새 배열을 생성
console.log(array); // [2, 4, 6]

---

배열의 정적 속성

Array[@@species]

배열 메소드에서 반환값을 구성할 때 사용되는 배열의 생성자를 반환시켜준다.

구문
Array[Symobl.species]; // [Function: Array]
Array 객체에 대한 기본 생성자를 반환한다.

코드 📄

class Array{
  static get [Symbol.species](){
    return this;
  }
}

배열의 인스턴스 속성

length

배열의 길이를 읽는 Array 객체의 프로퍼티

코드 📄

let arr= [1,2,3,4,5];
arr.length =2; // 2로 쓰기
console.log(arr)//[1,2]
arr.length=5; 
console.log(arr); // // [ 1, 2, <3 empty items> ]

• length는 읽기와 쓰기가 모두 가능하다.
• length값은 명시적으로 변경 가능하다.
  • 원래 있는 배열의 length값을 감소시키면 배열이 짤린다.

---

배열의 메소드

정적 메소드

Array.isArray(array)

인자로 들어온 값이 배열이 맞는지 true, false 반환

Array.from(array,?mapFn, ?this)

순회가능 , 유사배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 만든다.

mapFn은 요소와 인덱스로 이루어져 있다.

코드 📄

function func(){
    return Array.from(arguments);
}

console.log(func(1,2,3));

Array.of(elememt,...)

인자의 갯수, 유형에 상관없이 가변인자를 갖는 새 Array 인스턴스를 만든다.

코드 📄

console.log(Array.of(1));
console.log(Array.of(1,2,3,4,5));

인스턴스 메소드

@@iterator

순회 가능 프로토콜을 구현하는 메소드로 배열의 인덱스 값을 산출하는 새 Array 인스턴스를 반환한다.

Array.prototype.values 와 동일한 값을 반환한다.

구문

array[Symbol.iterator]()

코드 📄

function func(item){
    const iterator1 =item[Symbol.iterator];
    if(typeof iterator1 !=='function'){
        console.log(item, '넌 순회가능하지 않아');
        return;
    }
   for(const value of item){
    console.log(value);
   }
}

func('abcd');

includes()

배열안에 특정 아이템이 있는지 체크해 true,false 반환

• includes(item, fromIndex?)
• fromIndex에서 시작해서 item을 찾으면 true반환
• fromIndex는 option

코드 📄

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

indexOf(item, fromIndex?)

특정 item의 인데스 위치를 찾아 반환

• fromIndex생략시 처음부터 검색
• 요소를 발견하면 해당 인덱스 반환, 못찾으면 -1 반환

코드 📄

const fruit =['apple','banana','orange'];
console.log(fruit.indexOf('apple'); // 0

lastIndex0f(item, fromIndex?)

indexOf와 검색을 끝에서부터 시작한다는 점만 다르다.

기존 배열을 변경하는 메소드

join()

배열의 모든 요소를 인수로 전달받은 구분자로 구분해 문자열로 반환한다. 기본 구분자(,)

코드 📄

let arr = [1,2,3,4,5];
let arr2=arr.join(' '); 
console.log(arr2);// '1 2 3 4 5'

push(),unshift()

push() : 배열 끝에 요소 추가하고 배열길이를 return
unshift() : 배열 앞에 요소 추가하고 배열길이를 return

코드 📄

const animals =['cat','dog','tiger','lion'];
console.log(animals.push('monkey')); // 5
console.log(animals); //['cat','dog','tiger','lion',"monkey"];
console.log(animals.unshift('bear'));  // 6
console.log(animals); //['cat','dog','tiger','lion',"monkey","bear"];

pop(), shift()

pop() : 요소를 끝에서 제거하고 제거한 요소 반환
shift() : 배열 앞 요소 제거하고 제거한 요소 반환

코드 📄

console.log(animals.pop());  // bear
console.log(animals); //  ['cat','dog','tiger','lion',"monkey"]

console.log(animals.shift()); // cat
console.log(animals);//['dog','tiger','lion',"monkey"]

splice()

원하는 요소를 중간에 추가하거나 삭제할 수 있다.

• splice(index[, deleteCount, elem1,…,elemN);
  • index[ : 삭제 시작 인덱스
  • deleteCount: 제거할 요소의 갯수
  • elem1..elemN : 추가할 요소들

코드 📄

let arr= ["I","study","JavaScript","right","now"];
arr.splice(0,3,"Let's","dance"); // index 0부터 3개 삭제하고 뒤에 요소들 추가
console.log(arr) // ["Let's", "dance", "right", "now"]

---

새로운 배열을 반환하는 메소드

slice()

배열을 잘라 새로운 배열을 만든다.

slice([start],[end]);

• start 인덱스부터 (end를 제외한) end인덱스까지의 요소를 복사한 새로운 배열을 반환
• slice에 인자를 전달하지 않으면 원본 배열의 복사본 생성하여 반환

코드 📄

let arr = ["t", "e", "s", "t"];
arr.slice(0,2); // t e
arr.slice(-2) // s t   인덱스번호가 -2인 요소~끝까지 

concat()

여러개의 배열을 붙여 새로운 배열을 반환한다.

• concat(arg1,arg2…) : 인수에는 배열이나 값이 온다.
  • 메서드를 호출하면 기존배열의 요소와 인수에 있던 요소들을 모아 새로운 배열 반환

코드 📄

let arr = [1,2];
arr.concat([3,4],5,6); // 1,2,3,4,5,6

reverse()

배열의 순서를 거꾸로 만들어 새로운 배열을 반환한다.

코드 📄

let arr= [1,2,3,4,5];
let arr2= arr.reverse();
console.log(arr2); // [5,4,3,2,1]

fill(value, start, end)

인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경하고 수정된 배열을 반환한다.

코드 📄

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

arr.fill(6,0,3);
console.log(arr); // [ 6, 6, 6, 4, 5 ]

flat(depth)

배열의 하위 배열 요소가 지정된 깊이까지 풀린다음 연결된 새 배열을 생성한다.

코드 📄

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

console.log(arr.flat(1));
// [ 1, 2, 3, 4, 5, [ 6, 7, 8 ] ]
console.log(arr.flat(2));
/*
[
  1, 2, 3, 4,
  5, 6, 7, 8
]
*/

flatMap(callback,?this)

인자에있는 콜백함수를 적용하고 한단계 평탄화된 새 배열을 반환한다.

코드 📄

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

console.log(arr.flatMap((item)=>[item,item*2]));
/*
[
  1, 2, 2, 4,  3,
  6, 4, 8, 5, 10
]
  */