8. ES6 문법 & 일급 객체로서의 함수

@ JavaScript의 ES란?

ES란 ECMAScript의 약어다. ECMAScript란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌으며 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. 현재 ES6인 ECMA Script6를 우리는 규격으로 적용하고 있다.

 

< ES5/ES6 문법 차이 >

@ ES5 ==> JavaScript의 버전 중 하나, 2009년에 발표되었다. 이전 버전인 ES4에 추가 기능을 넣었다 생각하면 된다.

1. 배열에 forEach, map, filter, reduce, some, every와 같은 메소드들이 지원
2. Object에 대한 getter와 setter가 지원
3. JavaScript strict모드가 지원 (기존보다 더 강한 문법 검사를 진행)
4. JSON 형식의 자료들을 지원

 

@ ES6문법 ==> JavaScript의 버전 중 하나로, 2015년에 발표되었다. 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선했다.

1. Hoisting을 개선(var키워드로 호이스팅이 빈번하게 일어났던 것을 방지하기 위해 블록 스코프를 가진 let과 const를 추가
2. 화살표 함수를 지원
3. iterator와 generator 추가
4. module의 import/ export 추가
5. promise 도입 ( callback에 대한 이슈를 해결할 수 있는 문법을 제공)

1. 각종 ES6 문법

1-1. let, const:

 var를 대체해서 나온 변수 선언, let은 다시 선언은 못하지만 값을 다시 할당하는 것은 가능하다. const는 선언과 할당 모두 한번 선언되면 뒤로는 선언, 할당 모두 불가능하다.

 

1-2. 화살표 함수 (Arrow Function):

 function이나 return 키워드 없이 함수를 만드는 방법. ES6에서 처음 소개된 개념이다.

function add () {}	//기존 ES5에서 사용하던 함수를 선언하는 방법

var add = function () {}

var add = (x) => {	// ES6에 적용된 화살표 함수를 이용한 함수 선언
    return 1
}

var add = (x) => 1	//{}안에 한줄로 되어있다면 {}도 생략가능

@ this ==> function은 호출할 때 this가 정해진다. But 화살표 함수는 선언할 때 this가 정해진다.

 

1-3. 삼항 연산자(ternary operator):

// condition ? true인 경우 : false인 경우

console.log(true ? '참' : '거짓')		// 참
console.log(false ? '참' : '거짓')		// 거짓
console.log(1 === 1 ? '참' : '거짓')	// 참
console.log(1 !== 1 ? '참' : '거짓')	// 거짓

 

1-4. 구조 분해 할당(Destructurin):

 배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4, But arr에 이미 "value4" 값이 뒤에 있다면 4가 아닌 value4로 출력된다.

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

1-5. 단축 속성명(property shorthand):

 객체의 key와 value값이 같다면 하나만 써서 생략 가능

const name = 'nbc'
const age = '30'

// key-value
const obj = { name, age }
// ==> const obj = { name: name, age: age}

 

1-6. 전개 구문(spread):

 배열이나 객체를 전개하는 문법, destructuring과 함께 가장 많이 사용되는 ES6 문법 중 하나

let arr = [1,2,3]
console.log(arr)
console.log(...arr)

// 객체
let user = {
    name:'nbc',
    age:30,
}

let user2 = {...user}

console.log(user)		// { name: 'nbc', age: 30 }
console.log(user2)		// { name: 'nbc', age: 30 }

 

1-7. 나머지 매개변수(rest parameter):

function exampleFunc(a, b, c, ...agrs) {
    console.log(a, b, c)	// 1 2 3
    console.log(...agrs)	// 4 5 6 7
}

exampleFunc(1, 2, 3, 4, 5, 6, 7)

...args만 출력할 경우 exampleFunc(1, 2, 3, 4, 5, 6, 7)이라도 a,b,c부분을 제외하고 출력된다.

 

1-8. 템플릿 리터럴(Template literals):

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이다.

testValue = '안녕하세요!'
console.log(`Hello World ${testValue}`)		// 백틱(`)과 ${}로 표현
console.log(`Hello
            My name is Javascrip!!!

            Nice to meet you`
            )   //멀티 라인이 가능하다.

 

 1-9. named export vs default export

 - default export

// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

- named export

// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

 

2. 일급 객체로서의 함수

@ 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다. 따라서 함수를 매우 유연하게 사용 가능하다.

 

2-1. 변수에 함수를 할당:

함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.

const sayHello = function() {
    console.log('Hello!')
}

sayHello()		// Hello! 출력

 

2-2. 함수를 인자로 다른 함수에 전달:

 함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 콜백 함수(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용된다.

 ① 콜백함수(callback fuction): 매개변수로써 쓰이는 함수

 ② 고차함수(Higher-Order Function): 함수를 인자로 받거나 return하는 함수

function callFunction(func) {
    // 매개변수로 받은 변수가 사실, 함수다.
    func()
}

const sayHello = function() {
    console.log('Hello!')
}

callFunction(sayHello)		// 매개변수로 받아서 Hello! 출력

 

2-3.  함수를 반환:

 함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급된다. 따라서 다른 함수에서 반환할 수 있다. 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.

function createAdder(num) {
    return function (x) {
        return x + num
    }
}

const addFive = createAdder(5)
console.log(addFive(10))

 

2-4. 객체의 프로퍼티로 함수를 할당:

 함수는 객체의 프로퍼티로 할당될 수 있다. 객체의 메소드로 함수를 호출할 수 있다.

const person = {
    name:"John",
    age: 31,
    isMarried: true,
    //sayHello: function () {console.log('Hello, My name is' + this.name)}
    sayHello: function () {console.log(`Hello, My name is ${this.name}`)}
    // sayHello: () => {console.log(`Hello, My name is ${this.name}`)} //this.name이 undefind로 출력된다.
}

person.sayHello()

 

2-5.  배열의 요소로 함수를 할당

 함수는 배열의 요소로 할당될 수 있다. 함수를 배열에서 사용할 수 있게 된다.

const myArr = [
    function (a, b) {
        return a + b
    },  // 0번째 요소 
    function (a, b) {
        return a - b
    }   // 1번째 요소
]

console.log(myArr[0](1,3))		//4

console.log(myArr[1](10,7))		//3

함수가 일급 객체로 취급되기 때문에 자바스크립트에서 함수는 매우 유연하게 사용된다. 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 한다.  다른 이야기로 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미한다. 새로운 함수를 반환하는 함수를 작성하면 함수를 조합하여 더 복잡한 기능을 구현할 수 있다. 이를 적용하게 되면 코드를 더 간결하게 작성할 수 있고, 유지 보수도 쉬워진다. 

function multiplyBy(num) {
    return function(x) {
        return x * num
    }
}

function add(x,y) {
    return x + y
}

const multiplyByTwo = multiplyBy(2)
const multiplyByThree = multiplyBy(3)

console.log(multiplyByTwo(10))	//20
console.log(multiplyByThree(10))	//30

const result = add(multiplyByTwo(5), multiplyByThree(10))
console.log(`FINAL => ${result}`)	// 40