scope
자바스크립트의 변수선언 방법은 var 였으나 모던 자바스크립트에 와서는
let과 const가 추가되었다.
var 가 함수단위의 스코프 였다면
let과 const 는 블럭 단위의 스코프라고 설명 할 수 있다.
const 는 상수를 의미하고 let은 변수를 의미함
재할당
// var의 경우var a = 1
a = 2
console.log(a) // 2
var a = 3
console.log(a) // 3
// let의 경우let b = 1
b = 2
console.log(b) // 2
let b = 3 // SyntaxError: Identifier 'b' has already been declared
// const의 경우const c = 1
c = 2 // TypeError: Assignment to constant variable
스코프
var a = 1 let b = 2
if (true) {
var a = 11
let b = 22
console.log('a = ' + a) // 11
console.log('b = ' + b) // 22}
console.log('a = ' + a) // 11
console.log('b = ' + b) // 2
function func() {
var a = 111
let b = 222
console.log('a = ' + a) // 111
console.log('b = ' + b) // 222}
func()
console.log('a = ' + a) // 11
console.log('b = ' + b) // 2
앞서 말했듯이 let은 블럭단위 스코프 이기 때문에 위와 같은 결과를 낸다.
또한 let은 재할당이 가능한 반면에 const는 재할당이 불가능 하기 때문에 상황에 맞게 잘 사용해야 한다.
let과 클로저
클로저 : 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 라고 함
간단하게 말하면 함수내에서 함수를 정의하고 사용하면 클로저라고 생각하면 된다.
function getClosure() {
var text = 'variable 1';
return function() {
return text;
};
}
var closure = getClosure();
console.log(closure()); // 'variable 1'
위의 getCloseure()함수는 함수를 리턴하고 리턴한 함수는 getClosure의 text변수를 리턴하고 있음
함수가 리턴되는 함수 즉 클로저
위에 4가지 언어명이 나와있는 리스트를 클릭 하면 몇번째 항목인지 콘솔로 리턴해주는 코드가 있다
그러나 위에 결과 값에 처럼 어느 언어를 찍어도 결과값이 나올 뿐이다.
이유는 이벤트 핸들러가 var i 의 결과값을 공유하기 때문에 1을 찍어도 2를 찍어도 결과적으로 최종값인 4가 나올수 밖에 없다. 이를 해결하기 위해서 스코프를 추가하여
i를 지역변수화 해서 수정할 수 있다 그러나. let 키워드를 이용해서도 해결이 가능하다.
const - 할당된 내용 지키기
function home(){
var home = "지역변수";
home="지역변수에 할당"
console.log(home)
}
home(); // 결과값 : "지역변수에 할당"
정상적으로 할당 된다.
function home(){
let home = "지역변수";
home="지역변수에 할당"
console.log(home)
}
home(); // 결과값 : 에러 발생
const 는 재할당 할 경우 타입과 상관없이 오류를 발생시킨다.
그러므로 ES6에서는
const를 기본으로 사용하되 변경이 필요한 부분은 let을 사용하면 되고 var는 사용하지 않는 것이 좋다
그렇다고 해서 const 가 불변은 아니다 오브젝트 및 배열에서 값을 변경하거나 추가하는 것은 가능하다.
아래 코드를 확인하자
function home(){
const list = [1,2,3,4,5]
list.push(99)
console.log(list)
}
home(); // [1,2,3,4,5,99]
immutable array (불변의) 를 만드는 방법
function home(){
const list = [1,2,3,4,5]
list.push(99)
list2 = [].concat(list,100000)
console.log(list,list2)
}
home(); //[1,2,3,4,5,99] [1,2,3,4,5,99,100000]
이렇게 만들면 list 를 계속 추가해도 1과 2 앞으로만들 리스트는 변하지 않고 추가할수있다.
ES2015의 String 메소드
startsWith
endsWith
includes
사용방법은 아래 코드를 확인
let str = "hello world! ^^l"
let matcheStr = "hello"
let matcheEnd = "^^l"
console.log(str.startsWith(matcheStr)) //true
console.log(str.endsWith(matcheEnd)) //true
console.log(str.includes("^^")) //true
for of 순회하기
let str = "hello world! ^^l"
for(let value of str){
console.log(value)
}
한글자씩 순회하며 보여준다.
for in은 어레이에서는 사용하지 말아야 한다. 왜냐하면 for in의 경우 문제가 생김 어허이
spread operator - 배열의 복사 / 펼침연산자.
let data = [1,2,3,4,5]
let newData = [...data]
console.log(data,newData) // [1,2,3,4,5] [1,2,3,4,5]
console.log(data === newData) //false
...배열명 을 넣으면 해당 배열을 넣은 곳에 펼쳐 입력한다 완전 다른 객체가 생성된다.
data === newData == false 인 이유다.
spread operator - 배열의 활용
let data = [100,200,300]
function sum (a,b,c){
return a+b+c
}
console.log(sum.apply(null,data))
console.log(sum(...data))
from 메소드로 진짜 어레이 만들기
기존 자바스크립트에서 arguments 를 활용하는 메소드 코드가 있다
arguments를 이용하여 파라미터 없이 변수를 받을 수 있다 자주사용되는 패턴은 아니지만 변수가 가변적일 때 사용할 수 있는 방법이다.
ES6에서 map을 이용하여 동일한 효과를 낼수 있는데 아래와 같은 오류가 발생한다. 원인은 arguments 가 배열이 아니기 때문에 map을
사용할수가 없어서 발생하는 오류이다
Array.from()를 이용하여 arguments 를 배열로 변환해주면 해결된다.
