Array

for in과 for of 차이점

1. for...in은 객체를 반복할때 사용

2. for...of는 배열을 반복할때 사용

 

spread operator

기존에는 concat을 이용하여 배열을 합치곤 하였다.

 let pre = ['a', 'b', 100];
 let newData = pre.concat(['c','d'])
 console.log(newData);

ES6에서는 spread operator를 통해서 편하게 합칠 수 있게 되었다.

 let pre = ['a', 'b', 100];
 let newData = [...pre];
 console.log(pre, newData);    //['a', 'b', 100], ['a', 'b', 100]
 console.log(pre === newData); //false

newData의 경우는 pre의 값을 하나씩 추출해서 새로운 배열로 만들어준다.

그래서 line4의 경우 참조값이 달라 같지 않다.

 

배열안에 배열값 추가 할 때 사용하기 좋다.

let pre = [100, 200, 'hi', null];
let newdata = [0, 1, 2, 3, ...pre, 4];
console.log(pre, newdata);

// [100, 200, 'hi', null], [0, 1, 2, 3, 100, 200, 'hi', null, 4]

 

call(), apply()

특징

parameter로 this로 사용할 값을 보낼 수 있다.

 

차이점

parameter에 배열을 담을 것이면 apply를 사용, 그렇지 않을 경우엔 call을 사용

 

arguments

1. 파라미터의 수가 유동적이어도 arguments라는 keyword를 통해서 자유롭게 사용가능하다.

function addMark(){
  let newData = [];

  for(let i = 0; i < arguments.length; i++){
    newData.push(arguments[i] + '명');
  }
  console.log(newData);
}

addMark(1,2,3,4,5);

 

2. arguments의 경우 배열처럼 보이기만 하지 배열이 아니다. 그래서 from을 통해서 진짜 배열로 변경해준다.

function addMark(){

  let newArray = Array.from(arguments);

  let newData = newArray.map(function(value){
    return value + "!";
  })

  console.log(newData);
}

addMark(1,2,3,4,5);

 

ex)

<ul>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
    <li>strawberry</li>
  </ul>

function print(){
  let list = document.querySelectorAll('li');
  console.log(toString.call(list));

  let listArray = Array.from(list);
  console.log(toString.call(listArray));

  let eArray = listArray.filter(function(v){
    return v.innerText.includes('b');
  })

  console.log(eArray.length);
  return eArray; 
}

console.log(print());