ES6 - const, string, array

모던 자바스크립트(javascript) 개발을 위한 ES6 강좌를 수강하면서 새롭게 알게 된 점이나 궁금했던 내용들을 적어보려고 합니다!

1. const

const는 한번 선언된 변수 값은 재할당 할 수 없다.

  const list = ["1월", "2월", "3월"];
  list = "1년";
  console.log(list); // "TypeError: Assignment to constant variable.

하지만 const를 사용하더라도 배열과 객체의 값을 변경하는 것은 가능하다!!

 const list = ["1월", "2월", "3월"];
 list.push("4월");
 console.log(list); // ["1월", "2월", "3월", "4월"]

왜?? const는 불변을 의미하는 것과 다르다.
일종의 값을 재할당하는 코드만 불가능하다.

※ 강의 중에 immutable array가 나왔는데 무슨 뜻일까?
새롭게 만든 변수에 기존에 존재하던 배열과 객체를 할당할 때, 같은 데이터를 가진 새로운 배열/객체가 생성되는 것이 아니라 원본과 같은 참조를 가지게 된다. 그래서 새로 만든 변수의 값을 변경하면 원본의 데이터도 바뀌게 된다.
=> 데이터의 원본이 훼손되지 않도록 하는 unique array
밑에 참고자료를 보면 바로 이해할 수 있다!

※ immutable array을 어떻게 만들 수 있을까?

  const list = ["1월", "2월", "3월"];
  const newList = [].concat(list);  // concat(list, 배열에 추가하고 싶은 데이터)
 
  console.log(newList); // ["1월", "2월", "3월"];
  console.log(list === newList); // false

spread operator도 하나의 방법이다.

2. string

let str = "hello world! i^^i ~~~";
let matchstr = "hello";

console.log(str.startsWith(matchstr)); // true
-> 어떤 문자열에서 특정 문자열로 시작하는지 알려주는 메서드

console.log(str.endsWith(matchstr)); // false
-> 어떤 문자열에서 특정 문자열로 끝나는지 알려주는 메서드

// 만약 mathstr이 "world"라면 위에 두개의 결과가 모두 false가 나오게 됩니다.

console.log(str.includes("world")); // true
-> 하나의 문자열이 다른 문자열에 포함되어 있는지 알려주는 메서드

3. array

기존에 배열 순회하는 방법

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

// 1. 일반적인 for문
for(let i = 0 ; i < data.length ; i++){
  console.log(data[i]);
}
// 2. forEach
data.forEach(function(value){ console.log(value); });

// 3. for...in
for(let idx in data){
  console.log(data[idx]);
}

=> 하지만 for...in을 사용했을 때는 자기 자신이 가지고 있지 않은 상위에 있는 값들까지 포함을 해서 가져올 수 있다.
Array.prototype.getIndex = function(){};
for(let idx in data){
  console.log(data[idx]);
} // 배열에 있지 않은 function(){}이 마지막에 출력된다.

for...of

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

=> for...of는 문자열에서도 사용가능하다!

from

function addMark(){
  => 배열을 만드는데 있어 from을 활용하자!
  => from을 사용해서 arguments들로부터 배열을 만들 수도 있다.
  
 let newArray = Array.from(arguments);
 let newData = newArray.map(function(value){ 
    return value + "!";
  });
  
  return newData;
}

console.log(addMark(1,2,3,4,5)) // ["1!", "2!", "3!", "4!", "5!"]

위의 예시 말고도 querySelectorAll()을 했을 때 나오는 노드 리스트도 from을 사용해서 배열로 만들 수 있다.

참고자료

https://gomakethings.com/the-challenge-with-immutable-objects-and-arrays-in-vanilla-js/