ES6

1. let(변수), const(상수)

let : 재할당이 가능하고, 재선언은 불가능하다.

const : 재할당, 재선언이 불가능, 초기값이 없으면 선언이 불가능하다.

• 선언: 변수명을 자바스크립트 엔진에 알리는 것
• 할당: 변수에 값을 저장하는 것

2. 화살표 함수 (Arrow Function)

• function이나 return 키워드 없이 함수를 만드는 방법이다.

// 함수
function add () {};

var add = function () {};

// 화살표 함수
var add = (x) => {
 return 1;
];

var add = (x) => 1;

This

• function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

3. 삼항 연산자 (ternary operator)

• condition ? true인경우 : fasle인경우

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

4. 구조 분해 할당 (Destructuring)

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

4-1. 배열의 경우

예시) 1

let [value1, value2] = [1, "new"]
console.log("1", value1);    // 1 1
console.log("2", value2);    // 2 new

예시) 2

let arr = ["value1", "value2", "value3"]
let [a, b, c] = arr;

consoloe.log(a);    // value1
consoloe.log(b);    // value2
consoloe.log(b);    // value3

4-2. 객체인 경우

• 구조분해 할당

let {name, age} = {
  name: "nbc",
  age: 30,
};

console.log("name =>", name);   // name => nbc (string)
console.log("age =>", age);     // age => 30 (number)

• 새로운 이름으로 할당

let user = {
  name: "nbc",
  age: 30,
};

let {
  name: newName,
  age: newAge,
} = user;

console.log("newName =>", newName)    // newName => nbc
console.log("newAge =>", newAge)      // newAge => 30

// 없는 값을 설정 했을때
let {name, age, birthday} = user;
console.log(name);       // nbc
console.log(age);        // 30 
console.log(birthday);   // undefined - 초기값을 주어 값을 변경 할 수 있다.

5. 단축 속성명 (property shorthand)

• 객체의 key와 value 값이 같다면, 생략이 가능하다.

const name = "nbc"
const age = "30"

//  key - value
const obj = {name, age};  // 배열같지만 객체이다.
const obj1 = {name: name, age: age};

6. 전개 구문 (Spread)

• 배열이나 객체를 전개하는 문법이다.
• Destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나이다!

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(arr);         // [1,2,3]
console.log(newArr);      // [1,2,3,4]

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

let user2 = {...user}

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

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

function esxampleFunc(a, b, c, ...args) {
	console.log(a, b, c);   // 1 2 3     출력
    console.log(...args);   // 4 5 6 7   출력
    console.log(args);      // [4, 5, 6, 7]  출력
}

esxampleFunc(1, 2, 3, 4, 5, 6, 7);

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

• 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식이다.
• ``(백틱)에서 Javascript의 내용이 들어가기 위해서는 ${}가 필요하다.
• ``(백틱)은 멀티라인도 가능하다.

const testValue = "안녕하세요!";
console.log(`Hello World ${testValue`);   //  Hello World 안녕하세요!
console.log(`
   hello
   My name is Javascript!!!!
   Nice to meet you!!!
   `);

일급 객체로서의 함수

• 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
• 간단하게 설명하자면 다른 객체들과 같다

1. 변수에 함수를 할당

• 함수가 마치 값으로 취급된다.
• 함수가 나중에 사용될 수 있도록 조치가 되었다.

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

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

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

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

callFunction(sayHello);    // "Hello!"  출력

2-1. 콜백함수

• 매개변수로 쓰이는 함수

2-2. 고차함수

• 함수를 인자로 받거나 return하는 함수

3. 함수를 반환

• 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.

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

const addFive = createAdder(5);
console.log(addFive(10));  // 15 출력

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

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

const person = {
  name: 'John',
  age: 31,
  isMarried: true,
  
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);  // "Hello, my name is John" 출력
  }
  
// 화살표 함수는 this를 바인딩 하지 않는다.
  sayHello: () => {
    console.log(`Hello, my name is ${this.name}`)   // "Hello, my name is undefined" 출력
  }
  
};

person.sayHello();

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

예시) 1.

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

// 더하기
console.log(myArray[0](1, 3));   // 4 출력
// 빼기
console.log(myArray[1](10, 7));   // 3 출력

예시) 2.

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

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

const multiplyByTwo = multiplyBy(2);
console.log(multiplyByTwo(10));   // 20 출력
 // multiplyBy(2)가
 // function (x) {return x * 2;}의 함수로 봐뀐것이다.
const multiplyByThree = multiplyBy(3);
console.log(multiplyByThree(10));   // 30 출력
 // multiplyBy(3)가
 // function (x) {return x * 3;}의 함수로 봐뀐것이다.

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