Published on

2. ES6 문법

let 키워드

  • let 키워드로 선언된 변수는 블록 레벨 스코프를 따릅니다.
  • 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
  • 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. 

let a = 12 //전역 접근 가능
function myFunction() {
  console.log(a)
  //var b = 13; //함수 안에서 접근 가능
  let b = 13 //함수 안에서 접근 가능
  if (true) {
    //var c = 14; //"if" 문 안에서 접근 가능
    let c = 14 //"if" 문 안에서 접근 가능
    console.log(b)
  }
  console.log(c) //오류발생
}
myFunction()

const 키워드

  • 변수를 상수화(constant)합니다.
  • 변수에 할당된 값이 변경되지 않는다는 것을 의미합니다.
  • const로 선언된 변수는 선언과 동시에 초기화해야 합니다. 
const pi = 3.141
var r = 2

console.log(pi * r * r) //실행 결과 "12.564"

pi = 12 //읽기 전용 예외 발생

변수 호이스팅(Hoisting)

  • 호이스팅(Hoisting)이란 함수 내의 변수 및 함수 선언을 각 유효 범위의 최상단으로 끌어 올려주는 JS의 독특한 특징이다.
  • 실제로 코드가 끌어올려지는 것은 아니고, 자바스크립트 parser가 내부적으로 끌어올려서 처리한다.
  • 컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다
console.log(a) // undefined
var a = 'A' // var 변수

/* 호이스팅 된 코드 */
var a
console.log(a)
a = 'A'
  • var a를 상단으로 호이스팅했기 때문에 변수 선언 전에 console.log로 출력을 해도 에러가 발생하지 않고, undefined 가 출력된다.
  • 모든 선언(function, var, let, const, class)은 JavaScript에서 호이스팅되며, var 선언은 undefined로 초기화되지만 let 및 const 선언은 초기화되지 않은 Temporal Dead Zone 상태로 유지된다.

상수를 통한 객체 참조

  • 객체를 상수로 선언하더라도 객체 내부의 값은 변경 가능합니다.
  • 객체를 상수로 선언하면 객체 자체를 다른 값으로 참조할 수 없게 됩니다.
  • 객체 내부의 값은 변경이 가능하기 때문에, 객체 내부의 값을 변경하지 않도록 주의해야 합니다.
const a = {
  name: '민호',
}

console.log(a.name)

a.name = '수지'

console.log(a.name)

a = {} //읽기 전용 예외 발생

파라미터 기본값

  • 자바스크립트는 함수가 파라미터 값을 받지 못할때 기본값을 지정할수 있는 방법이 없었습니다.
  • 파라미터가 undefined이면 기본값을 할당하는 식으로 코딩을 함

function myFunction(x = 1, y = 2, z = 3 + 5) {
  console.log(x, y, z) //실행 결과 "6 7 3"
}

myFunction(6, 7)

펼침 연산자

  • 이전에는 배열값을 함수 인자로 넘기려면 apply()내장 메소드를 이용해서 사용 했다. 
function myFunction(a, b) {
  return a + b
}

var data = [1, 4]
var result = myFunction.apply(null, data)
console.log(result) //5값을 반환함

  • apply()는 배열 값을 하나하나 꺼낸 다음에 개별적인 함수 인자를 만들어 호출 한다.

  • ES6 펼침연사자를 사용하면 더욱 쉽다.
  • 자바스크립트 해석기는 ...data를 먼저 1,4로 치환한 다음 myFunction함수를 호출한다. let result = myFunction(...data); -> let result = myFunction(1,4);

function myFunction(a, b) {
  return a + b
}

let data = [1, 4]

let result = myFunction(...data)

console.log(result) //실행 결과 “5”

배열 값을 다른 배열의 일부로 만듦

  • 펼침 연산자로 배열 값을 다른 배열에 부분 편일 할수 있습니다.
let array1 = [2, 3, 4]
let array2 = [1, ...array1, 5, 6, 7]
console.log(array2)

  • 다음과 같이 코드가 변경된다. let array2 = [1, ...array1, 5, 6, 7]; -> array2 = [1, 2, 3, 4, 5, 6, 7];

배열값을 다른 배열에 밀어 넣기

//ES5 이전 코딩
var array1 = [2, 3, 4]
var array2 = [1]
Array.prototype.push.apply(array2, array1)
console.log(array2)

//ES6 이전 코딩
let array1 = [2, 3, 4]
let array2 = [1]
array2.push(...array1)
console.log(array2)


여러 배열 펼침

let array1 = [1]
let array2 = [2]
let array3 = [...array1, ...array2, ...[3, 4]] //여러 배열로 펼친다
let array4 = [5]

function myFunction(a, b, c, d, e) {
  return a + b + c + d + e
}

let result = myFunction(...array3, ...array4) //여러 배열로 펼친다
console.log(result) //실행 결과 "15"

배열 해제할당

  • 배열 해체 할당은 객체에서 값을 추출하여 변수에 할당한다.
  • ES5 이전에는 아래와 같이 배열에 값을 추출해서 변수에 할당했다.
//단순히 배열에 값을 추출해서 할당하는 구문 ES5
var myArray = [1, 2, 3]
var a = myArray[0]
var b = myArray[1]
var c = myArray[2]
console.log(a, b, c)

//ES 6
let myArray = [1, 2, 3]
let a, b, c
;[a, b, c] = myArray //배열 해체 할당 구문
console.log(a, b, c)

//더 짧게
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)

값을 건너뛴다

  • 할당없이 값을 건너뛰어야 할때 사용 한다.
let [a, , b] = [1, 2, 3]

console.log(a)
console.log(b)

배열 해체 할당에 나머지 연산자를 이용

let [a, ...b] = [1, 2, 3, 4, 5, 6]

console.log(a)
console.log(Array.isArray(b))
console.log(b)

변수의 기본값

  • 해체 할당이 안된 변수의 기본값을 undefined이외의 값으로 지정할수 있다.
let [a, b, c = 3] = [1, 2]
console.log(c) //실행 결과 "3"

중첩 배열 해체

let [a, b, [c, d]] = [1, 2, [3, 4]]
console.log(a, b, c, d)

파라미터로 배열 해체 할당 사용

  • 함수 파라미터 자리에 기본값을 지정해서 사용할수 있다.
function myFunction([a, b, c = 3] = [1, 2, 3]) {
  console.log(a, b, c) //실행 결과 “1 2 3”
}

myFunction(undefined)




객체 해체 할당

  • 객체 해제 할당은 객체 프로퍼티 값을 추출해서 변수에 할당한다.
  • ES5 이전에는 객체 프로퍼티 값을 다른 변수에 할당하러면 이방법뿐이였다.
//ES5
var object = { name: '민호', age: 23 }
var name = object.name
var age = object.age

//ES6
let object = { name: '민호', age: 23 }
let name, age
;({ name, age } = object) //배열 해체 할당 구문

변수의 기본값

  • 객체 프로퍼티가 undefined일 경우에는 변수에 기본값을 준다.
let { a, b, c = 3 } = { a: '1', b: '2' }
console.log(c) //실행 결과 "3"

조합 프로퍼티 명을 해체

  • 프로퍼티명을 동적으로 조합할 경우 표현식을 [] 감싼다.
let { ['first' + 'Name']: x } = { firstName: '수지' }
console.log(x) //실행 결과 "수지"

중첩 객체를 해체

  • 중첩된 객체의 프로퍼티는 다음과 같이 추출한다.
var {
  name,
  otherInfo: { age },
} = { name: '수지', otherInfo: { age: 23 } }
console.log(name, age) //수지 23

파라미터로 객체 해체 할당 사용

  • 배열 해체 할당과 더블어 객체 해체 할당도 함수 파라미터로 사용 가능
function myFunction({ name = '수지', age = 23, profession = '연예인' } = {}) {
  console.log(name, age, profession) //실행 결과 “민호 23 연예인”
}

myFunction({ name: '민호', age: 23 })

화살표 함수

  • ES6부터 => 연산자로 함수를 생성하는 화살표 함수가 생김
  • 화살표 함수는 간결한 구문을 지닌 익명 함수이다.
let circleArea = (pi, r) => {
  let area = pi * r * r
  return area
}

let result = circleArea(3.14, 3)

console.log(result) //실행 결과 "28.26"

//ES 5문법
var circleArea = function (pi, r) {
  let area = pi * r * r
  return area
}

var result = circleArea(3.14, 3)
console.log(result)



//ES6 문법 식이 하나밖에 없을경우 더 간소화 할수 있다.
let circleArea = (pi, r) => pi * r * r
let result = circleArea(3.14, 3)
console.log(result)

프로퍼티 정의

  • ES6 부터 변수명과 동일한 이름을 가진 객체 프로퍼티에 간편하게 값을 할수 있음
//ES5 이전 문법
var x = 1,
  y = 2
var object = {
  x: x,
  y: y,
}

//ES6 문법
let x = 1,
  y = 2

let object = { x, y }
console.log(object.x) //실행 결과 =”1”

메소드 정의

  • 메소드를 정의하는 새로운 구문 
let object = {
  myFunction() {
    console.log('안녕하세요!!!')
  },
}