제로초님의 레츠기릿 자바스크립트를 수강하던 중 새롭게 알게된 메서드가 있어서 정리하려고 한다.
- Array.from()
-
Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성합니다.
-
순회 가능 객체(Map, Set (en-US)과 같은 객체)인 경우. 또는 객체가 순회 가능이 아니라면, 유사 배열 객체(length 속성과 인덱싱된 요소가 있는 객체).
-
순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여) Object.keys(), Object.values(), 또는 Object.entries()를 사용해야 합니다. 비동기 순회 가능을 배열로 변환하려면 Array.fromAsync()를 사용합니다.
(출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
-
설명을 하자면 유사 배열 객체에 배열 메소드를 사용하고 싶을 때(ex. forEach)사용할 수 있는 방법이다. 예를들어 HTMLCollection이 유사배열이므로 배열메소드를 사용할 수 없기 때문에 Array.from으로 얕게 복사된 배열을 만들고 가지고 있는 자식 요소만큼 console.log를 출력하게 할 수 있다.
-
문자열도 유사배열이므로 배열로 만들 수 있다.
- Array.prototype.flat()
- Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다.
- flat() 메서드는 복사 메서드입니다. 이 메서드는 this를 변경하지 않는 대신 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환합니다.
(출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)
- flat 메서드는 2차원 배열을 1차원으로 만들고, 3차원 배열을 2차원으로 만든다.
- Array.prototype.every() 와 Array.prototype.some()
-
Array 인스턴스의 every() 메서드는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 이 메서드는 불리언 값을 반환합니다.
(출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every) -
some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 이 메서드는 배열을 변경하지 않습니다.
(출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some)
-
위 그림에서 every와 some에 콜백으로 넘어간 함수는 textContent를 반환한다. 콜백의 반환값이 모두 true면 every는 최종적으로 true를 반환하고, some은 콜백의 반환값중에 하나라도 true가 있으면 최종적으로 true를 반환한다. 즉, 콜백함수는 조건함수가 된다.
-
반복문으로 textContent에 빈문자열('')이 있는지 확인을 하면 모든 배열을 순회해야만 코드가 종료된다. 그러나 every는 빈문자열이 반환되는 순간 메서드가 종료, some은 비어있지 않은 문자열이 반환되는 순간 종료되므로 코드의 실행시간을 단축시킬 수 있다.
