ES6 Array : for of, spread operator 펼침연산자, from 메소드 알아보기

for in 을 사용해야할까?

• 배열 순회에서 for in 은 절대 사용 하지말아야한다
• 이유: 자기 자신뿐만이 아니라 상위의 값까지 포함할때가 있음

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

Array.prototype.getIndex = function(){}; // for in 에서 prototype 객체를 불필요하게 포함시킴

for(let idx in data){
  console.log(data[idx]);
}
// 결과 : 1 2 undefined NaN null "" function(){}

for of 순회하기

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

Array.prototype.getIndex = function(){}; // for in 에서 prototype 객체를 불필요하게 포함시킴

// for, forEach 말고도 배열을 쉽게 순회할 수 있는 for of 가 나왔다
for(let value of data){
  console.log(value);
}
// 결과 : 1 2 undefined NaN null ""

// 문자열 도 순회할 수 있음
var str = "hello world !!";
for(let value of str){
  console.log(value);
}
// 결과 : "h" "e" "l" "l" "o" " " "w"..."d"


// 번외 forEach
data.forEach(function(value){
  console.log("value is : " + value);
});
// 결과 : valure is : 1  value is : 2  ... value is: ""

spread operator 펼침연산자 – 배열의 복사

let pre = ["apple", "orange", 100];
let newData = [...pre];  // 펼침 연산자
console.log(pre === newData);
// 결과 : false , 복사만 해오는 것이지 같다고 볼 수 없다.

스프레드(spread) 문법 - [...arr]

// 함수호출
myFunction(...iterableObj);

// 배열 리터럴, 문자열
[...iterableObj, '4', 'five', 6];

// 객체 리터럴( new in ECMAScript 2018)
let objClone = { ...obj };

• 배열 복사 및 합치기

//ES5에서 배열 합치기
var arr1 = [2,3,4]
var arr2 = [5,6,7]
var merged = arr1.concat(arr2)

//ES6에서 배열 합치기
const newMerged = [...arr1, ...arr2]

//ES5에서 배열 복사하기
var copiedArr = arr1.slice()
//ES6에서 배열 복사하기
const copiedArr = [...arr1]

//ES5에서 오브젝트 합치기
var obj1 = {a: 3}
var obj2 = {b: 4}
var merged = Object.assign({}, obj1, obj2)

//ES5에서 오브젝트 복사하기
var copiedObj = Object.assign({}, obj1)

//ES5에서 오브젝트 복사하기
const copiedObj = {...obj1}

// 인자로 받아올 경우
function sum(a,b,c){
  return a+b+c;
}
let pre = [100, 200, 300];

// 기존
console.log(sum.apply(null, pre));

// spread operator 사용 후 
console.log(sum(...pre));

// 결과 : 모두 600 출력

• 배열을 이어붙이는 더 나은 방법 (concat, unshift)

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 에 붙임
arr1 = arr1.concat(arr2);

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// arr2 의 모든 항목을 arr1 의 앞에 붙임
Array.prototype.unshift.apply(arr1, arr2) // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨

from 메소드로 진짜 배열 만들기

1. for 문을 사용하여 배열 사용하기

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. argument.map 의 오류

function addMark2(){
  let newData2 = arguments.map(function(value){
    return value + "!";
  });  
  console.log(newData2);
}

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

이렇게 되면 argument.map 은 function 이 아니라고 오류가 발생한다.
argument는 배열이 아니기때문에 map 메소드 사용이 불가능하다.

3. argument.map 의 오류 해결 (Array.from 으로 진짜 배열 만들기)

Array.from() : 배열과 비슷한 객체와 반복할 수 있는 객체를 배열처럼 변환함.

function addMark2(){
  let newArray = Array.from(arguments);  // 새로운 변수에 Arry.from(arguments); 담기
  let newData2 = newArray.map(function(value){
    return value + "!";
  });
  
  console.log(newData2);
}

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

newArray 변수를 만들어 Array.from 을 사용해서 arguments 를 진짜 배열처럼 사용 하면 된다.

실습예제

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

function print(){
/*
filter, includes, form을 사용해서 문자열 'e'를 포함하고 있는 노드로 구성된 배열을 만들어서 반환하기
*/
}

print();

실습예제 정답

function print(){
  
    let list = document.querySelectorAll('li');
    console.log(toString.call(list)); // toString.call() 타입체크시 많이 사용!
    let listArray = Array.from(list); // li노드로 구성된 배열로 만들어줌
    console.log(toString.call(listArray)); // array로 변환됐는지 확인
  
    let eArray = listArray.filter(function(v){
      return v.innerText.includes('e');
    });
    return eArray;
}

console.log(print());