유용한 참고 사이트

javascript.info

MDN

참조 블로그

Array 생성자 함수

• new Array(arrayLength)
• length의 값과 상관없이 빈 배열을 생성하며, 전달된 length 프로퍼티 값이 0이라면 빈 배열 리터럴([])과 동일하다.
• 인수를 2개 이상 전달하면 Array.of 메서드와 동일하게 동작한다. 즉, 인수들을 요소로 갖는 배열을 생성한다.
• new 연산자를 사용하지 않고 호출하여도 동일하게 동작한다.

Array.of 메소드

• 전달된 인수를 요소로 갖는 배열을 생성한다.
• Array 생성자 함수와의 차이점은 인수가 1개 일 때에도 해당 요소를 갖는 배열을 생성한다는 점이다.

const a = Array.of(1, 2, 'abc', {}); // [1, 2, 'abc', {}]
const b = Array.of(10); // [10];
const c = new Array(10); // [], c.length = 10

Array.from 메소드

• 유사 배열 객체(array-like objects) 또는 이터러블(?)을 인수로 전달받아 배열을 생성한다.

const a = {length: 3, 0: 1, 1: 2, 2: 3}; // 유사 배열 객체
const b = Array.from(a); // [1, 2, 3]
const c = Array.from('abc'); // ['a', 'b', 'c']

const a = 'Hello World';
const b = Array.from(a, v => v.toLowerCase()); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

Array.from({length: n}, (_,i)=>i);

• 길이가 n개이고, 각 요소값 0부터 1씩 커지도록 생성

❗️ 활용

① 1 ~ N 까지 자연수를 나열한 배열 생성 (규칙적인 수 나열)

// Array 생성자 함수
const a = [...new Array(10)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// Array.from 메서드
const b= Array.from({length: 10}, (_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

위 코드에서 new Array(10)에 바로 map을 사용하지 않고 배열 내부에 Spread Operator를 사용한 이유는 new Array(10)은 length 프로퍼티 값만 10이고 실제로 내부에 든 요소가 없기 때문이다.

const a = new Array(5).map((_, i) => i + 1); // []
const b = [...new Array(5)]; // [undefined, undefined, undefined, undefined, undefined]
const c = [...new Array(5)].map((_, i) => i + 1); // [1, 2, 3, 4, 5]

// Array.from 메서드에 length 프로퍼티만 가진 유사 배열 객체를 전달하면
// 해당 길이 만큼의 undefined를 요소로 갖는 배열을 반환한다.
const d = Array.from({length: 5}); // [undefined, undefined, undefined, undefined, undefined]
const e = Array.from({length: 5}, (_, i) => i + 1); // [1, 2, 3, 4, 5]

1부터 1,000,000까지의 수를 나열하는 배열을 각각 생성하고 실행 시간을 측정하여 대략적으로 비교해 보았다.

console.time('Array 생성자 함수');
const a = [...new Array(1000000)].map((_, i) => i + 1);
console.timeEnd('Array 생성자 함수');

console.time('Array.from 메서드');
const b = Array.from({length: 1000000}, (_, i) => i + 1);
console.timeEnd('Array.from 메서드');

// 크롬 브라우저에서 측정
// Array 생성자 함수: 24.26708984375 ms
// Array.from 메서드: 65.093017578125 ms

📌 다양한 규칙적인 수 만들기

const a = [...Array(5)].map((_, i) => 2 * i + 1); // [1, 3, 5, 7, 9]
const b = [...Array(5)].map((_, i) => 2 * i + 2); // [2, 4, 6, 8, 10]
const c = [...Array(5)].map((_, i) => i * i); // [0, 1, 4, 9, 16]
const d = [...Array(5)].map((_, i) => 1 << i); // [1, 2, 4, 8, 16]
const e = [...Array(5)].map((_, i) => i % 2); // [0, 1, 0, 1, 0]

② 똑같은 요소로 채워진 배열 생성

Array.fill() 메서드

: 전달받은 인수로 배열을 채울 수 있다.

const a = new Array(5).fill(0); // [0, 0, 0, 0, 0]
const b = [1, 2, 3, 4, 5].fill(0); // [0, 0, 0, 0, 0]

만약 객체를 전달받았다면, 그 참조만 복사해서 배열을 채우게 된다.

const a = new Array(5).fill([]); // [[], [], [], [], []]
a[3].push(1); // [[1], [1], [1], [1], [1]]

따라서 빈 배열로 배열을 채우려고 한다면 Array.prototype.fill 메서드 대신 다른 방법을 사용해야 한다.

const a = [...new Array(5)].map(() => []); // [[], [], [], [], []]
a[3].push(1); // [[], [], [], [1], []]

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

📌 임의의 숫자 N을 각 자리수별로 처리하는 방법

function splitNumber(N) {
    const nums = N.toString().split("").map(Number).sort((a,b)=>b-a);

    return nums.join("")
}

function devideNumber(N) {
    const nums = [];
    do {
        nums.push(N%10);
        N = Math.floor(N/10);
    } while(N>0)

    return nums.sort((a,b)=>b-a).join("");
}

function main(n) {

    let splitEff = 0;
    let devideEff = 0;

    for(i=0;i<100;i++) {
        const n = Math.round(Math.random()*1000000000000000);
        const t1 = performance.now();
        splitNumber(n);
        const t2 = performance.now();

        splitEff += t2-t1;
    }

    for(i=0;i<100;i++) {
        const n = Math.round(Math.random()*1000000000000000);
        const t1 = performance.now();
        devideNumber(n);
        const t2 = performance.now();

        devideEff += t2-t1;
    }

    console.log("splitNumber: " + splitEff / 100);
    console.log("devideNumber: " + devideEff / 100);
}

.set()

const arr = [1,1,3,3,0,1,1]
const arr2 = [...new Set(arr)]
    
console.log(arr2)    // [ 1, 3, 0 ]

set 은 순서에 상관 없이, 중복된 것을 배열에 담지 않는다.

"Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다." 라는 것이 mdn 문서의 표현이다.
MDN

[...Array(n).keys()]?

Object.keys(obj)

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

...Array(n)가 length 가 n인 값이 빈 배열을 만들게 되고,
거기에 keys()의 파라미터로 들어온 객체의 key 값을로 배열을 채우게 된다.

MDN

[...Array(n).values()]?

Object.values(obj)

Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있습니다.)

배열 합치기
join() !!! split()의 반대

Array.slice(begin [, end])
어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

Array.reverse()
배열의 순서 뒤집기
배열 자체가 변화됨

정수 판별

• Number.isInteger(num)
• num % 1 === 0 여부 확인

클래스에서 특정 조건에 맞는 대상 찾기

.find((value) => 조건)
콜백함수가 true 인 값을 찾으면 바로 그 값 반환, 끝

.filter((value) => 조건)
콜백함수가 true 인 값 모두 반환

(배열 or 객체).map((value) => 조건)
함수조건대로 원 배열(객체)의 값을 가공시킨 새로운 배열(객체) 반환

.some(() => 조건)
조건에 맞는 대상이 있는지 없는지 확인하여 리턴
하나라도 조건에 만족되는 값이 있다면 true 리턴
빈배열일 경우 무조건 false

.every(() => 조건)
배열의 모든 대상이 조건을 만족해야 true 리턴
빈배열일 경우 무조건 true

!를 앞에 붙일 경우 true라면 false 리턴, false라면 true 리턴

.reduce((prev, curr) => {
	return prev + curr.score;
}, `0: initialValue` )

.reduce((prev, curr) => prev + curr.score, `0: initialValue` );

콜백에서 리턴되는 값은 누적된 결과값을 리턴!
리턴 값을 정의해주어야 함
리턴하는 값들은 순차적으로 prev 으로 전달됨
return prev + curr.score로 하게 되면 누적되는 값이 prev로 전달됨

.reduceRight((prev, curr) => {
	return prev + curr.score;
}, `0: initialValue` )

마지막 요소부터 거꾸로 콜백함수 적용

숫자 배열을 string 배열로 바꾸기

1. map으로 새로운 배열 리턴

const result = Array.map(student => student.score)

2. join()으로 string 으로 변환

const result = Array
  .map(student => student.score)
  .filter(score => score >= 50)
  .join();

작은 순서대로 오름차순 정렬

const result = students.map(student => student.score)
.sort((a,b) => a-b)
.join(); // sort로 전환된 값 string으로 변환

sort에는 이전값과 현재값이 전달되는데, 만약 음수를 리턴하게 되면 첫번째가 두번째값보다 작다고 간주되어져서 정렬되는 메커니즘

큰 순서대로 내림차순 정렬하고 싶다면
.sort((a,b) => b-a)

sort의 동작원리

if 문을 {} 이용하지 않고 띄어쓰기만으로 사용할 수 있음!

if(one[i%5] === answer[i]) resultes[0]++;

const maxNumber = Math.max(...results)