[JavaScript] - for...of

본문은 inflearn의 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 를 공부하면서 정리한 내용입니다.

for of - 순회 하기

var data = [1,2,undefined, NaN, null, ""]

//for each
data.forEach(function(value){
    console.log(value);
});

// for-in
// for-in 은 Array.prototype.getIndex = function(){} 으로 array에 prototype을 추가하게 되면 이 값 또한 data에서 인식하여 function이 출력되게 된다.
for(let idx in data){
    console.log(data[idx])
}

//for-of
//따라서 for-in이 아닌 for-of를 array에서 사용해야 한다.
for(let value of data){
    console.log(value)
}

var str = "hello world!";
// string을 for-of 로 돌리면 문자열을 characture 단위로 출력한다.
for(let value of str){
    console.log(value); 
}

Spread Operator - 배열의 복사

let pre = ["apple", "orange", 100];
let newData = [...pre]; // ... 을 Spread Operator라고 부름. pre 배열내용을 뿌린다는 뜻. newData와 pre는 현제 같은 배열임.
console.log(pre, newData)

let pre = [100, 200, "hello", null]
let newData = [0, 1, 2, 3, ...pre, 4]
//이런식으로 중간에 data를 끼우기가 쉬움

function sum(a,b,c){
    return a+b+c;
}

let pre = [100, 200, 300]
sum(...pre); 
//sum.apply(null, arr); 
//sum(pre[0], pre[1], pre[2]) 와 같음

from 메서드

function addMark(){
    let newData = [];

    // arguments는 가변적인 매개변수를 가져올때 유용함
    // 선언되지 않는 매개변수가 arguments 객체에 담긴다.
    // arguments는 배열처럼 생겼지만, 배열이 아니다. JS에는 이런 객체들이 꽤 있다. 따라서 map을 못씀.
    // 그래서 이런것들을 from을 사용해서 해결함.

    //방법 1
    for(let i = 0 ; i < arguments.length; i++){
        newData.push(arguments[i] + "!");
    }

    //방법 2
    // arguments를 배열로 바꿈
    // 그냥 arguments를 주면 map 을 사용할 수 없기 때문에 from 으로 바꾸어서 사용
    let newArray = Array.from(arguments);
    let newData = newArray.map(function(value){
        return value + "!";
    });


    console.log(newData);
}

addMark(1,2,3,4,5,6,7,8,9);

toString.call()

JS에서 형태를 체크하기 위해 많이 사용하는 방법

function print(){
    var list = documents.querySelectorAll('li');
    console.log(toString.call(list));
}

print();

Filter