Array.from 너의 정체는 무엇이냐

나는 요즘 코테를 준비하면서 머리가 매우 어지러운 상태다 .. 
프로그래머스 레벨 0 문제는 모두 마스터 했고 레벨 1 ,2 단계 문제들을 풀어보고 있는 상태다.  
완전 탐색 ,dfs , 스택 ,큐 ,,, 등 다양한 유형의 문제들을 접하게 되면서 일단 제로 베이스에서 시작하는 건 도저히 진전이 되지 않아 다른 사람들이 푼 코드들을 많이 뜯어보고 손으로 작성해보며 공부하는 중이다. 

다양한 코드들을 보고 공부 하던 중 Array.from 이 매우 눈에 띄었다. 이상하게 낯선 느낌을 주는 문법이었다..
코드의 상단에서 선언하면서 쓰이는데 왜이렇게 안외워지던지 이건 내가 블로그로 작성을 해야 완벽하게 이해하고 넘어 갈 수 있을 것 같아서 Array.from 에 대해 포스팅을 쓰게 되었다 . (개념에 대한 이해는 MDN을 참고하였다.) 

 

Array.from 이란 ? 
Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서
얕게 복사된 새로운 Array 인스턴스를 생성합니다.

정적 메서드 , 유사 배열 객체 , 얕게 복사 뭐 이리 어려운 단어들이 많은지 .. 물론 대충 이해는 간다만 .. 
완벽하게 짚고 넘어가기 위해 간단하게 개념을 찾아보았다. 

 

정적 메서드 :  클래스의 인스턴스 없이 호출이 가능한 메서드 
(즉 Array.method() 형식으로 따로 new 키워드 로 인스턴스를 생성하지 않아도 바로 사용가능한 메서드를 의미한다. )

 

유사 배열 객체 : 배열과 유사한 객체로 배열 처럼 인덱스로 접근 가능하다. length 프로퍼티도 사용가능하다. 

 

얕은 복사 : 간단하게 말해 객체를 복사할 때, 해당 객체의 프로퍼티들을 복사하는 것인데, 원시 데이터(숫자, 문자열 등)인 경우는 그 값을 복사하고, 객체나 배열과 같은 참조형 데이터인 경우에는 그 참조(메모리 주소)를 복사하는 것 (얕은 복사와 깊은 복사에 관한 글은 이미 포스팅 했으므로 참조하길 바람 ! )

 

 

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

 

이런식으로 Array.from 을 작성할 수 있다. 

 

첫번째 경우는 간결해서 이해하기 쉬운데 두번째 경우부터 뭐지 싶다. 그래서 인자로 들어갈 수 있는 것들을 정리해봤다.  

 

Array.from 인자 

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

arrayLike는 필수인자이고 , mapFn 과 thisArg는 옵셔널하다. 

 

arryLike : 배열로 변환할 순회 가능 또는 유사 배열 객체.

mapFn :배열의 모든 요소에 대해 호출할 함수  이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, mapFn의 반환 값이 대신 배열에 추가됨 . ->  map 함수라고 생각하면 됨 

mapFn인수 (element, index)

- element :배열에서 처리 중인 현재 요소.

- index:배열에서 처리 중인 현재 요소의 인덱스.

thisArg : mapFn 실행 시에 this로 사용할 값

 

 

말로 설명하는 것보단 예제를 확인하는 것이 백번 천번 낫기 때문에 예제로 이해해보자

 

// 화살표 함수를 map 함수로 사용하여 요소 조작
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 숫자 시퀀스 생성하기
// 배열의 각 위치가 `undefined`로 초기화되므로
// 아래 'v'의 값은 `undefined`가 됩니다.
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

 

코딩 테스트를 준비하면서 가장 많이 사용했던 예제가 대부분 이런형식이었다. 

Array.from(
  {length: 20}, // 유사배열
  () => Array(10).fill(0) // 각각의 배열에 적용할 함수
);

{length: 20}은 객체 리터럴 표기법을 사용하여 length라는 프로퍼티가 20인 객체를 생성한 것이다. 

 

 

const visited = Array.from({ length: dungeons.length }, () => false);

 

위의 코드는 visited 변수를 선언하고 dungeons.length만큼 false 값을 가진 배열을 선언해주는 것이다.

 

개념을 확실히 이해하고 보니 코드가 눈에 들어온다 .. ! 

 

 

우오오옥 이제 고민없이 새로운 배열을 선언해볼 수 있을것같다 .. ! 

사실 고전적인 방법으로 for문을 돌려도 되긴하지만 .. 한줄로 쓰는게 좋자냐

그럼 오늘은 여기까지 작성해보겠다 .