배열, 객체, 유사 배열 객체, Array.from, map

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준

---

0. 유사 배열 객체

- 배열또한 객체이므로  이를 이용하여 배열이 아님에도 배열처럼 사용할 수 있는 객체

- 중요한 것은 배열이 아니기때문에 배열에 사용할 수 있는 push, pop 등의 함수를 사용할 수 없다.

- index 를 통해 접근 가능, 반드시 length 가 필요

- argument 도 유사배열 객체(https://cbw1030.tistory.com/12, http://taewan.kim/tip/argument_parameter/)

 

     1). 사용하는 이유

          - 함수의 결과값을 배열로 출력하고 싶을 때

          - " 함수에서 처리 결과로 배열을 반환하고 싶을때 또는, Array에서 기본으로 내포되어있는 기능을 제공하고 싶지 않거나 Array에 내포되어있지 않은 기능을 제공하고싶을때 사용한다. " (https://poizon.tistory.com/11)

 

 

     2). 배열, 객체, 유사 배열 객체 비교

          - 배열은 index 를 통해 element 에 접근 가능

 

array = [ 'fir', 'sec', 'thr' ]

array[0] = 'fir';

fir

sec

thr

---

          - 객체는 Key 와 Value 를 가짐

 

newObject = {              

    fir_key: 'fir',              

    sec_key: 'sec',          

    thr_key: 'thr'              

}                                   

newObject.fir_key = 'fir'; //key를 사용하여Value 접근

Object.keys(newObject) //key접근

fir: 'fir'      sec: 'sec' thr: 'thr'

---

          - 유사배열은 객체의 속성과 배열의 특징을 가짐

          - index 와 length 를 가짐

          - 주의할 것은 index 를 순차대로 지정할것

 

newArrLikeObject = {             

    0: 'fir',              

    1: 'sec',           

    2: 'thr',             

    length: 2          

}                                          

newArrLikeObject[0]= 'fir'; //index를 사용하여 value에 접근

for (let key in newArrLikeObject) { console.log(key); } //fir_key, sec_key, thr_key, length

0: 'fir'      1: 'sec'   2: 'thr'    length: 1

0: 'fir'      1: 'sec'   2: 'thr'    length: 2

---

	배열	객체	유사배열객체
속성	array	object	object
접근 방법(value	array[index]	object.key	object.key
필수 조건		Key / Value	index 필요 / length 필요

 

---

 

1. Array.from

- 배열을 만드는 함수

- " Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. " (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

 

     1). 문자열을 배열로 만들기

          const newArr = Array.form(new Set('string'));

          console.log(newArr); 

          - 출력 => [ 's', 't', 'r', 'i', 'n', 'g' ]

 

     2). 문자열을 배열의 [0]로 만들기

          const newArr = Array.form(Array('string');

          console.log(newArr); 

          - 출력 => [ 'string' ]

 

     3). index = 5 의 배열 만들기

          const newArr = Array.from(Array(index).keys())

          console.log(newArr)

          - 출력 => [ 0, 1, 2, 3, 4 ]

---

2. map
- 배열 안 모든 요소를 호출 및 접근하여 배열을 반환하는 함수

- forEach 함수와 유사하지만, map 함수는 필수로 반환값을 가진다.

	map	forEach
방식	배열 안 모든 요소를 호출 및 접근
반환값	배열	기존 배열 신규 배열 undefined

     0). 사용법

          let testArr = ["Mon", 1, "Tue", 2, "Wed", 3];

          testArr.map((element: string | number, index?: number, array?: any[]) => {

           ...

          - element: testArr 배열의 요소 (string, number)
          - index: element 의 index (testArr[0] ~ index = 0)

          - array: testArr 배열

 

          const newArr = testArr.map((element: string | number, index: number, array: any[]) => {

          console.log(element); //Mon, 1, Tue, 2, Wed, 3

          console.log(index);     //0, 1, 2, 3, 4, 5

          console.log(array);     //["Mon", 1, "Tue", 2, "Wed", 3]
          })

 

          - 배열(testArr) 의 요소에 접근하는 것이 목표기 때문에 element는 필수값

          - 안써도 에러는 안나는데. 이러면 map 함수를 쓰는 이유가 없다.

 

     1). 배열 안 내용 활용

          const newString: string = 'newString';
          testArr = testArr.map((element) => newString);                             

          //['newString', 'newString', 'newString', 'newString', 'newString', 'newString']
          - testArr 의 index == 6, 각각의 요소가 newString 으로 변환 및 배열이 반환됨