자바 스크립트(js) 입문 공부 18. ECMAScript, ES6 이후 개선된 문법들 (화살표 함수, 디폴트 파라미터, 객체 구조 분해)

ECMAScript

ECMAScript(ES)는 범용 목적의 스크립트 언어 표준을 뜻합니다.

‘스크립트 언어를 사용할 때는 이렇게 사용하세요’라고 재정의를 해서 자바 스크립트를 사용하는 문법을 정의하는 단체라고 보시면 됩니다.   
ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공합니다. 

그리고 자바스크립트(JavaScript)는 ECMAScript 명세를 준수하는 스크립트 언어입니다. 

 

 

ECMAScript 버전 

ECMAScript는 자바스크립트의 표준을 제정하기 위해 1997년 처음 등장했으며, 그 후로 꾸준히 새로운 버전의 ECMAScript 명세가 발표되었습니다. 
초기에는 ES1, ES2, ES3와 같이 숫자를 올려가며 버전을 표기했지만, 2015년 등장한 여섯 번째 버전부터는 발표한 연도를 표기하는 방식을 사용했습니다. 
따라서 ES6의 공식 버전명은 ES2015이나, ES6가 자연스럽게 통용되고 있습니다. 

ES5와 ES6 사이의 시간 간격이 길고, ES6 부터 추가된 문법이 많아 그 이후의 버전을 자바스크립트라고 하는 경향이 있습니다. 

 

여러 브라우저에서 모두 호환이 될까?

 

자바스크립트의 기능을 확장하고 사용성을 넓히고 개발자들의 능력 역량을 함양시키는 목적이 있지만, 

다양한 브라우저의 종류로 발생하는 호환성 문제가 발생할 수 있습니다. 

이에 대한 해결책으로 언어 기능은 유지하되, 코드 문법만 변환해주는 기능을 가진 '트랜스파일러'를 이용해서 호환성 문제에 대응할 수 있습니다. 

 

 

화살표 함수 (lambda 형식) 

화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법입니다.

● function 표현식에 비해 구문이 짧습니다. 
● this나 super등의 객체를 바인딩하지 않습니다.
● 기본적으로 익명 함수이다. 따라서 메소드가 아닌 개별 함수로 더 적합합니다.
● return 키워드의 생략이 가능합니다.

 

다음은 화살표 함수를 만드는 과정입니다. 

 

//일반적 사용
const introduce = function(){ 
    console.log("안녕하세요!")
}


//화살표 함수 사용 
const introduce2 = () => {   // function을 지우고 매개변수와 몸통을 화살표로 연결한다. 
    console.log("안녕하세요!")
}

 

 

화살표 함수의 특징 

 

1. 화살표 함수는 호이스팅(함수를 선언하는 것보다 호출을 먼저 하는 것) 이 불가능합니다. 

 

2. 반환값만 존재하는 경우에는 중괄호와 return 을 생략할 수 있습니다. 

 

const introduce = () => {   // function을 지우고 매개변수와 몸통을 화살표로 연결한다. 
    console.log("안녕하세요!")
}
introduce()

// 기본 작성

const introduce1 = (n) => {
    console.log($`{n} 입니다.`)
}

introduce1("비")


// 중괄호 생략 작성
const introduce2 = (n) =>  console.log($`{n} 입니다.`)  // 명령문이 하나만 있으면 중괄호 생략이 가능하다. 

introduce2("비")

 

3. 매개변수가 하나인 경우에는 소괄호 생략이 가능합니다. 만약 없거나 다수라면 생략이 불가능합니다. 

 

const introduce = () => {   // function을 지우고 매개변수와 몸통을 화살표로 연결한다. 
    console.log("안녕하세요!")
}
introduce()



const introduce1 = n =>  console.log(`${n} 입니다.`)  // 명령문이 하나만 있으면 중괄호 생략이 가능하다. 
introduce1("비")

const introduce2 = (n, a) =>{
    console.log(`제 이름은 ${n}이고`)
    console.log(`좋아하는 것은 ${a}입니다.`)
}

introduce2("비", "독서")

디폴트 파라미터(default parameter)

디폴트 파라미터(default parameter)는 매개변수에 인자가 전달되지 않았을 때에 사용할 수 있는 값을 미리 정의해 두는 것을 뜻합니다. 

 

 

 

기본값을 쓰지 않고 새로운 값을 쓰겠다고 할 때에는 함수에 값을 전달하면 됩니다. 

 

const introduce2 = (n="핑구", a="오색 주스 마시기") =>{
    console.log(`제 이름은 ${n}이고`)
    console.log(`좋아하는 것은 ${a}입니다.`)
}

introduce2()
introduce2("비", "독서")
introduce2("고양이", "츄르")

 

구조 분해 할당

 

구조 분해라고도 합니다.

객체와 배열의 공통점은 여러개의 값을 가지고 있는 것인데, 그 중 몇 개만 필요한 경우가 있습니다. 

구조 분해란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다. 

즉, 기본적으로 구조 분해는 복사 작업이라고 보시면 됩니다. 

 

 

const pet = {
    dog :"강아지", cat : "고양이", turtle : "거북이"
}

let dog = pet.dog  // pet이라는 객체에서 dog를 꺼내온다.

 

이것을 파이썬의 방식으로 따와서 복사를 하면 구조 분해 할당이 간단하게 이루어집니다. 

 

const pet = {
    dog :"강아지", cat : "고양이", turtle : "거북이"
}


let {dog} = pet // 객체 안에 dog 라는 키가 있고 그 객체가 pet 이다.

 

 

동명의 상수를 만들 때 중괄호로 만들어주면, 파스쿠찌와 커피빈이라고 하는 키의 값을 객체로부터 구조 분해하겠다는 뜻이 되며 그 객체 = 는 cafe 라는 의미가 됩니다.

 

여러 개의 값을 한꺼번에 꺼낼 수도 있습니다.

 

const pet = {
    dog :"강아지", cat : "고양이", turtle : "거북이"
}

let {dog, cat, turtle} = pet 
console.log(dog, cat, turtle)

 

 

꺼내면서 key의 값을 새로 지정할 수도 있습니다. 

 

const pet = {
    dog :"강아지", cat : "고양이", turtle : "거북이"
}

let {dog : d , cat : c , turtle : t} = pet 
console.log(d, c, t)

 

 

배열의 구조분해 

배열에는 key값이 없기 때문에 구조 분해 할 때에는 이름을 지어줍니다. 

 

변수 명을 따로 만들고 나중에 구조 분해를 할 때 써도 상관없습니다.

즉, 변수의 선언이 분리 되어도 구조 분해를 통해 값을 할당할 수 있습니다. 

 

 

const cafe = ["스타벅스", "커피빈", "이디야"]
let [star, bean] = cafe
console.log(star, bean)

 

구조 분해 시 디폴트 선언

 

분해하려는 배열의 갯수가 정확하게 파악되지 않았을 경우 값에 undefined가 출력되는 경우가 있습니다. 

 

const cafe = ["스타벅스", "커피빈", "이디야"]
let [star, bean, ediy, pasc] = cafe
console.log(star, bean, ediy, pasc)

 

분해한 값이 undefined인 경우를 대비해 디폴트 값을 지정할 수도 있습니다. 

배열에 주어진 값이 어떤 것인지 모를 때 구조분해를 하면서 값이 없는 경우 디폴트 값을 지정하여 

값이 없어도 해당 값이 쓰여질 수 있게 할 수 있습니다. 

 

 

 

 

객체의 구조 분해 

객체의 기본적인 분해 방법은 앞서 본 것과 같습니다. 

 

 

key가 이름 그대로 중요한 key의 역할을 하는데 key와 다른 이름의 변수에 할당을 할 수도 있습니다.

key가 starbucks 인 value를 복사하고, 그 안에 sb라는 이름을 붙여서 사용할 수도 있습니다. 

 

 

객체 구조 분해 시에도 디폴트 선언이 가능합니다. 

 

 

const cafe = ["스타벅스", "커피빈", "이디야"]
let [star, bean, ediy, pasc="파스쿠찌"] = cafe
console.log(star, bean, ediy, pasc)

 

advenced objects literal  향상된 객체 리터럴

 

객체의 구조 멤버에서 따로따로 분해해서 할당하는 것이지만, 

객체를 만들 때 key와 value를 변수의 내용이 녹여서 넣습니다. 

 

 

두 코드는 동일한 결과를 나타내는 코드입니다. 

 

let ray = "레이"
let sm5 = "에스엠파이브"
let genesis = "제네시스"

let cars = {ray, sm5, genesis}
console.log(cars)

 

여기까지 ES6 이후 새롭게 개선된 문법에 대해서 확인해보았습니다. 

이 다음에는 프로미스에 대해서 알아볼게요.