ES6

let 과 const (var 사용안함❌)

: 블록 레벨 스코프

• var은 스코프 외에서도 실행
• 호이스팅(hoisting: 어디에 선언했냐 상관없이 항상 제일위로 선언을 끌어올려주는것)
• let, const는 스코프 내에서만 실행

console.log(i); // (에러가 아니고) undefined
var i = 0;
console.log(i); // 0
// 해석 결과
var i;
consoloe.log(i);
i =0 ;
console.log(i);

console.log(i);
let i = 0;
console.log(i);
// Uncaught SyntaxError: Identifier 'i' has already been declared (i가 정의되지 않았다.)

• let 과 const는 블록 스코프라 {}(중괄호) 사용
• {} 내에서 사용시 괄호밖에서 사용 금지 🚫

let i; // 공통 스코프 선언
const a = () => {
  i = 1; // let을 할당하지 않아도 사용 가능
}
const b = () => {
  i = 2; // let을 할당하지 않아도 사용 가능
}
console.log(i); // a,b에서 같은 i 값을 다루고 싶을때 공통 스코프에서 선언을 
//                 해야 각각 할당하지 않아도 둘다 적용 가능.

 

화살표 함수

function 8글자 대신에 => 로 줄여 사용 가능.

const a = function () {
  return 3;
  };
 
const b = () => 3;
// 위,아래 같음. 화살표 함수(=>) 사용시 {},return 생략 가능

default parameter

const a = (a, b = 5) => // 함수 선언하는곳에서 b값을 정해줄수 있음
a(3);

템플릿 리터럴

``(백팁) ,  $ {} 사용

"제 이름은 " + name + "입니다.";
`제 이름은 ${name}입니다` // 위,아래 같음. ""와 + 를 줄여쓸수 있음.

비구조화 할당

const obj = { name: "coco", nation: "korea" };
// const name = obj.name
// const nation = obj.nation
const { name, nation } = obj; // 같은 코드.

name;
nation; // 위에서 비구조화 할당 선언을 했기 때문에 밑에서는 객체만 사용 가능. 
//        (obj.name / obj.nation 코드 길게 사용 하지 않아도 됨.)

펼침 연산자

배열이나 객체에서 가져오고 싶은것 or 추가할것들을 복사해서 새로운 값, 배열을 만들어낼수 있다.

const arr = [1, 2, 3];
const arr2 = [ ...arr ] // ...사용시 arr 내에 1,2,3 이 arr2 [] 에 할당됨.
const arr2 = [0, ...arr, 4]; 
console.log(arr2); 
[0,1,2,3,4] // 앞뒤로 추가도 가능.

//객체(obj)도 똑같이 사용가능. 

원시타입&참조타입

원시타입 : 변수의 값 자체를 저장 (종류: Number,String,null,undefined)
참조타입 : 값이 담긴 주소를 저장 (종류: Object, Array, Function ...) 

 

원시타입

let a = 3; // 3
let b = a; // 3
/
a = 5; // a = 5
b = 3; 
// 처음 b를 a의 값인 3으로 선언했기 때문에 중간에 a 값이 바뀌어도 b는 처음 선언한 '3'이다. 
// <값이 저장된 원시타입>

참조타입

const a = [ 0,1,2 ]; // [0,1,2]
const b = a; // [0,1,2]
/
a[0] = 3; // a = [3,1,2]
b = [3,1,2]; 
// 처음 b를 선언할때 a의 배열이 위치한 주소가 b에 저장 되기 때문에 중간에 a 값이 바뀌어도 
// b는 주소를 저장하기에 값이 같아진다.
// < 값이 담긴 주소가 저장된 참조타입>