Array

for...of

a부터 f까지 담겨있는 배열 arr가 있다

const arr = ['a','b','c','d','e','f'];

이 배열을 순환하면서 출력하는 코드는 여러가지가 있지만 가장 간단한 것은 아마 for in일 것이다

const arr = ['a','b','c','d','e','f'];

for(let i in arr){
    console.log(arr[i]);
}

원하는 결과가 나왔고 이는 문제가 없는 코드처럼 보인다

다른 예제를 보자

Array.prototype.getId = function(n){
    let temp;

    for(let i=0; i<this.length;i++){
        temp = arr[i];
        if(temp===n) {
            return i;
        }
    }
    return null;
}

const arr = ['a','b','c','d','e','f'];

for(let i in arr){
    console.log(arr[i]);
}

Array객체의 프로토타입에 값을 넣으면 그 값의 인덱스를 찾아 반환하고 없으면 null을 반환하는 커스텀 함수를 추가해서

프로젝트를 진행하고 있다고 가정하자

그러던 도중 배열의 값을 순환하며 출력하려고 for...in을 사용해서 출력해봤다

우리가 추가한 커스텀 함수까지 출력되는 걸 볼 수 있다

mozilla 사이트를 보면 for...in반복문은 모든 열거 가능한 속성들을 반환하기 때문에 배열의 반복에는 for...in을 사용하지 않는 것을 권장한다

그래서 foreach를 사용하거나 전통적인 for반복문을 사용했는데 알아볼 것은 for...of다

Array.prototype.getId = function(n){
    let temp;

    for(let i=0; i<this.length;i++){
        temp = arr[i];
        if(temp===n) {
            return i;
        }
    }
    return null;
}

const arr = ['a','b','c','d','e','f'];

for(let value of arr){
    console.log(value);
}

for...in과 다른점은 눈으로도 쉽게 찾을 수 있다

in과 다르게 인덱스를 이용하는게 아닌 값 자체를 출력하고

우리가 원하는 결과가 나왔다

for...of는 배열만이 아니라 String, map, set, arguments객체에도 사용이 가능하다

...[arrays]

spread operator라고도 불리우는 이 ...연산자는 배열의 앞에다가 쓰기만 하면된다

const arr = ['a','b','c','d','e','f'];
const arr2 =[...arr];
console.log(...arr2);

대충 감이 오는가?

말그대로 spread, 배열을 펼치는 연산자이다

활용법을 한번 보자

const arr = ['a','b','c','d','e','f'];

function testSpread(t1,t2,t3,t4,t5,t6){
    console.log(t1,t2,t3,t4,t5,t6);
}
testSpread(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5]);

testSpread.apply(null,arr);

testSpread함수는 인자 6개를 받아서 한줄에 모두 출력하는 함수이다

배열 arr를 인자로 넘겨서 출력하고 싶다면 위와 같이 인덱스를 이용해서 하나하나 접근하거나

객체 부분인 첫인자는 null, 두번째 인자로 배열을 받는 apply를 이용해서 배열로 넘길 수도 있다

하지만 spread operator를 사용하면 더욱 간단하다

    testSpread(...arr);

매우 간단하게 해결된다

from

from은 배열처럼 사용할 수 있는 유사 배열 객체들을 진짜 배열로 만들어서 배열 내장 메소드들을 사용 가능하게 만들어 준다

이게 무슨말인가 하면

const arr = [1,2,3,4,5];
function add(){
    for (let i=0;i<arguments.length;i++){
        console.log(arguments[i]+1);
    }
}
add(...arr);

자바스크립트의 함수에는 암묵적으로 arguments객체가 내장되어있다

add함수에 인자로 넘긴 1,2,3,4,5의 값들이 arguments객체에 들어가서 1씩 더해지는 것을 볼 수 있다

여기서 arguments객체는 length가 있어 인덱스로 각 값에 접근할 수 있어 배열처럼 보이지만 정확하게 배열은 아니고 유사 배열이다

사실 위의 함수는 for문을 쓸 필요없이 배열에 내장되어있는 메소드인 map을 사용해도 된다

const arr = [1,2,3,4,5];
function add(){
    arguments.map(function (value){
        console.log(value+1);
    })
}
add(...arr);

하지만 위에서 말했듯이 arguments객체는 유사 배열 객체이기 때문에 map을 쓸 수 없다

이런 상황에서 from을 사용하는데

const arr = [1,2,3,4,5];
function add(){
    const realArray = Array.from(arguments);

    realArray.map(function (value){
        console.log(value+1);
    });
}
add(...arr);

이렇게 사용해주면 된다