let

{} 블록 내에서만 유효한 변수를 선언할 때 사용.

closure

var list = document.querySelectorAll("li");
for (var i=0; i<list.length; i++){
  console.log(i + "번째 리스트 입니다.")
}

실행결과

어떤 항목을 클릭하든 콘솔 결과는 “4번째 리스트 입니다.” 라고 출력됨. for 문에 선언된 var i 가 바로 closure 이다.

이를 해결하기 위해서 var > let 으로 단순히 수정해 주면 제대로 실행된다.

const

고정(재 할당 없는) 변수를 선언할 때 사용.

변수 선언 시 습관화 하기.(ES6 베이스)

  1. const를 기본으로 사용한다.
  2. 하지만 변경이 필요한 변수는 let을 사용한다.
  3. var 는 사용하지 않는다.

const 특성

const list = ["apple", "lemon", "orange"];
list.push("banana");
console.log(list);

const를 사용하더라도 변수나 오브젝트에 값을 변경하는 것은 가능!

새로운 string 메서드들

문자열 비교용 메서드 startsWith() endsWith() includes()

for of 순회 (for / for each / for in 말고)

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

배열의 결과 출력

var str = "Hello world~~~~?"
for(let value of string){
  console.log(value);
}

str 의 string 문자 하나하나 출력 됨 “H”, “e”, “l”, “l”, … “?”

spread operarot (=펼침 연산자)

펼침 연산자를 활용해서 배열의 변경이나 함수에서의 사용을 쉽게 할 수 있다.

let pre = ["apple", "orange", 100];
let newData = [...pre];
console.log(pre);
console.log(newData);

같은 결과가 출력되나, 둘은 같은 배열을 참조하는것이 아니라 각자 다른 배열로 사용된다. … 은 그저 펼쳐주는 기능

펼침 연산자 활용1

펼침 연산자를 이용하면 기존 배열의 변경이 용이하다.

let pre = ["apple", "orange", 100];
let newData = [0, 1, 2, ...pre, 3];
console.log(newData);

// [0, 1, 2, "apple", "orange", 100, 3]

펼침 연산자 활용2

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

let pre = [100, 200, 300];

console.log(sum(...pre));
// = sum(100, 200, 300)
// 600

from method

배열이 아닌 값을 배열로 변환하는 메서드