[JavaScript] 배열

배열(Arrays)이란?

-Ordered collections of values

-for문과 인덱스를 사용하여 배열의 모든 요소를 순회할 수 있다

  *ES6 : 인덱스를 사용하지 않고 배열의 모든 요소를 순회하는 방법 -> for(const item of arr) {...}

-[ ] 안에는 다양한 data type이 함께 담길 수 있다. ['string', number, variables, expression, function calls, [other arrays...]];

 

*유사배열객체(Array-like object) : 생김새는 index를 갖는 요소의 나열(순서 있는 목록), 즉 배열과 같아 위치 기반으로 접근이 가능하다. length 프로퍼티 값을 가지지만 forEach()나 map() 등 배열의 built-in 메소드는 이용 불가능하다. Array.from()나 나머지 패턴을 이용하면 배열로 변환 가능(얕은 복사)하다.

  ->배열처럼 동작하지만 Array의 인스턴스가 아니다! 

예) String, Maps, Sets, arguments, HTMLCollection, NodeList(얘는 forEach 가능) 등

 

-Create :

1) "Array literal" syntax : const arr = [...];

2) "Array constructor function" syntax : const arr= new Array(...);

 

    const fruits = [

        "apple",      

        "orange",    

        "plum",       

    ];                      

-Read & Update :  

fruits[0];  //  apple

fruits[1] = "pear";  //  orange -> pear

fruits[3] = "lemon";  //  lemon

 

-Delete

delete fruits[2];  //  true (plum -> undefined)

 

-Methods : 

.length; : 배열의 크기 (마지막 인덱스값에 1을 더한 값)

    *arr.length = 0; 을 통해 배열을 비울 수 있다

.toString();  :  요소들을 쉼표로 구분한 문자열을 반환함

    *문자열 형 변환이 일어난다. [1,2] + "1";  //  "1,21"

 

.push('...');  :  배열 끝에 새로운 요소를 추가하고, 변경된 배열의 크기를 반환함 (*여러 개 요소를 한 번에 추가할 수 있다)

.pop();   :   배열 끝 요소를 제거하고, 제거한 요소를 반환함

.unshift('...');  :  배열 앞에 요소를 추가하고, 변경된 배열 크기를 반환함 (*여러 개 요소를 한 번에 추가할 수 있다)

.shift();  :  배열 앞 요소를 제거하고, 제거한 요소를 반환함

 

Array.isArray([...]);  //  true or false

.indexOf('...');  //  index or -1

.includes('...');  //  true or false

 

.slice(start, end);  // 요소를 복사하여 새로운 배열을 반환 (*음수 -> 배열 끝에서부터 셈)

.splice(index, count, subs);  //  삭제된 요소로 구성된 새로운 배열을 반환. 추가,삭제,교체가 모두 가능한 만등 메소드임. *원본변형

   *교체 예시) ['a', 'b', 'c'].splice(1,0,'e') // ['a', 'e', 'b', 'c']

.concat(...);  //  기존 배열에 다른 배열을 추가하여 새로운 배열을 반환함

.reverse();  //  요소를 역순으로 정렬. *원본변형

.join(...);

.at(...);

 

.forEach(fn);  //  콜백함수를 인자로 받는다. 배열의 각 순회마다 함수가 호출된다

.find(fn);

.filter(fn);

.map(fn);

.sort(fn); // fn이 없으면 각 요소의 유니코드 값 순서에 따라 정렬한다. *원본변형(mutable)

.reduce(fn, init);

(https://sanxang.tistory.com/39)

 

*console.table([1, 2]);  //  각 index와 value가 표로 나타남

 

 

*Creating Array dynamically

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

*new Array(5);  //  [empty * 5];

-인자가 1개이면 인자 값은 배열의 길이를 나타내고, 아무 요소가 없는 배열을 반환함.

 

2. new Array(5).fill(1);  //  [1,1,1,1,1]

*[1,1,1,1,1].fill(2,1,3); // [1,2,2,2,1]

-fill()의 첫번째 인자는 채울 값, 두번째는 시작 인덱스, 마지막은 끝 인덱스임.

-fill()은 mutable 메소드이다.

 

3. Array.from({ length:5 }, ()=>1);  //  [1,1,1,1,1]

*Array.from({ length:5 }, ( _ , i ) => i+1));  //  [1,2,3,4,5]

-underscore는 일반적으로 사용하지 않는 변수를 지칭한다. 위 식의 콜백함수에서 첫번째 인자인 '현재 순회하는 요소'는 함수 내에서 사용되지 않으므로 _로 나타낼 수 있다. 만약 인덱스가 필요 없었다면 콜백함수에 아무 매개변수도 지정하지 않아도 된다.

-Array.from()는 초기에 Array-likes-structure와 같은, 소위 [Iterable]를 만들기 위해 고안된 배열 메소드이다. 메소드 이름에서부터 알 수 있듯이 다른 것들'로 부터' 배열을 만드는 메소드이다.