[Javascript ES6] 3. String 에 새로운 메서드(Method) 와 for of(순회하기)

String 에 새로운 메서드(Method)

let str = "hello world ! ^^ ~~";
let matchstr = "hello";
console.log(str.startWith(matchstr));
 

startWith : 값을 잘라 대조하는 역할 

cf) endWith

let str = "hello world ! ^^ ~~";
let matchstr = "hello";
console.log(str.includes(matchstr));

> true

-> 해당 값이 포함되었는지 확인

for of (순회하기)

iterator 와 비슷한 역할

var data =[1, 2, undefined, NaN, null, ""];
data.forEach(function(value) {
  console.log("valueis", value)
});

>

• "valueis"
• 1
• "valueis"
• 2
• "valueis"
• undefined
• "valueis"
• NaN
• "valueis"
• null
• "valueis"
• ""

forEach 를 사용하여 값을 출력할 수 있다.

또는

var data =[1,2,undefined,NaN,null,""];
for(let idx in data) {
  console.log(data[idx]);
}

>

• 1
• 2
• undefined
• NaN
• null
• ""

위와 같이 for ~ in 으로도 출력이 가능

for ~ in 은 Object 로 순회할 때 주로 사용한다. 배열 타입도 Object 기 때문에 순회가 가능하다.

하지만, 자기가 가지고 있지 않은 상위에 추가된 값까지 보여줄 수 있다.

예를들어, 

var data =[1,2,undefined,NaN,null,""];
Array.prototype.getIndex = function(){};
 
for(let idx in data) {
  console.log(data[idx]);
}

>

• 1
• 2
• undefined
• NaN
• null
• ""
• function(){}

위와 같이 for ~ in 밖에 function 을 추가할 경우 function(){}; 이 출력되는 것을 확인할 수 있다.

자기자신이 가지고 있는 객체 이외에 prototype 객체를 이용하여 상위에 추가된 객체들도 나타나는 것 !! 

그러므로 위와 같은 경우가 생길 수 있으므로 for ~ in 에서 Array를 사용하면 안된다. 

for ~ of 로 사용할 경우

var data =[1,2,undefined,NaN,null,""];
Array.prototype.getIndex = function(){};
 
for(let value of data) {
  console.log(value);
}

> 

• 1
• 2
• undefined
• NaN
• null
• ""

value 값으로 확인할 수 있고 prototype 을 출력하지 않는다.

for ~ in 의 실수를 줄이도록 ES6 에서는 for ~ of 를 새로 만든 것이다. 

for ~ of 는 배열을 위한 것이 아니므로 아래와 같이 활용이 가능하다.

var data =[1,2,undefined,NaN,null,""];
Array.prototype.getIndex = function(){};
 
for(let value of data) {
  //console.log(value);
}
 
var str = "hello world!";
for(let value of str) {
  console.log(value);
}

> 

• "h"
• "e"
• "l"
• "l"
• "o"
• " "
• "w"
• "o"
• "r"
• "l"
• "d"
• "!"

위와 같이 char 단위로 돌면서 공백까지 포함하여 출력이 가능하다.

정리) 배열의 경우 for ~ in 이 아닌 for ~ of 를 이용하여 쉽게 순회해야한다.