항해 99 1주차 WIL

• ES6란?
• ES5/ES6 문법 차이

ES6란?

ECMAScript 6(ES6)은 JavaScript 버전 중 하나입니다. 2015년에 도입되었으며 언어에 많은 새로운 기능을 도입하여 개발자가 코드를 더 쉽고 효율적으로 작성할 수 있도록 했습니다.

대표적으로 추가된 새로운 기능으로는 let, const, 화살표함수, 템플릿 리터럴, 클래스, rest 및 spread연산자가 있습니다.

let 및 const

이전 ES5문법에서는 var의 키워드를 이용했습니다. var에는 문제점이 많았는데 let, const 키워드가 새로이 나와 var를 대체하였습니다.

var ?

var키워드는 변수를 선언하는 데 사용됩니다. 변수에 값을 할당하거나 값을 할당하지 않고 변수를 선언하는 데 사용됩니다. 하지만 단점이 많습니다. 크게 두가지 단점으로는 함수 범위 액세스, 호이스팅 입니다.

• 블록 범위가 아니라 함수 범위에 있다는 것 함수 내의 for문이나 if문 내에 생성 된 변수가 함수 내에만 있으면 사용가능하다는 점입니다.
  
• 호이스팅을 허용한다는 점 var로 선언된 위치에 관계없이 해당 범위의 맨 위로 이동 됩니다.
  

화살표 함수

Arrow function 은 함수 표현식을 작성하기 이후 보다 간결한 구문을 제공하는 기능입니다. 기본 형식은 let function = (매개변수) ⇒ 결과값 입니다. 기존 함수 표현식에 비해 몇가지 장점이 있습니다.

let add = (x, y) => {
	return x+y;
}

🔥 고유한 this 컨텍스트가 없습니다. 대신 주변 코드에서 this 컨텍스트를 상속합니다. 또한 new 키워드와 함께 생성자로 사용할 수 없습니다.

템플릿 리터럴

템플릿 리터럴은 JavaScript에서 변수나 표현식을 포함할 수 있는 문자열을 만드는 방법입니다.

const name = 'tube';
const message = `Hello ${name}`;

템플릿 리터럴은 변수나 표현식을 포함할 수 있는 동적 문자열을 쉽게 만들 수 있기 때문에 JavaScript의 유용한 기능입니다. 또한 +연산자로 문자열을 연결하는 것보다 더 읽기 쉽습니다.

클래스

es6에는 클래스가 추가 되었습니다. 클래스는 객체 생성을 위한 틀입니다. 생성된 모든 개체가 갖게 될 속성과 동작을 정의합니다.

// 클래스 생성
class Person {
  constructor(name, species) {
    this.name = name;
    this.gender = gender;
  }
  
  speak() {
    console.log(`안녕 내이름은 ${this.name}이야! 내 성별은 ${this.gender}야`);
  }
}

// 클래스를 사용하여 개체 생성
const tube = new Person("tube", "남자");
tube.speak(); // 안녕 내 이름은 tube이야! 내 성별은 남자야

spread 연산자

배열이나 객체를 다른 배열이나 객체로 확장하거나 병합할 때 유용하게 사용할 수 있는 문법입니다. 전개 구문은 ... 연산자를 사용하여 표현하며, 배열 또는 객체의 요소나 속성을 개별적으로 추출하여 다른 배열이나 객체에 포함시킬 수 있습니다.

// 배열에 값 추가하기
let arr = [1, 2, 3]
let newArr = [...arr, 4]
console.log(newArr) // [1,2,3,4]

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 배열 복사하기
const arr4 = [1, 2, 3];
const arr5 = [...arr1]; // [1, 2, 3]

// 다른객체에 추가하기
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

나머지 매개변수 (rest parameter)

함수 정의에서 사용되는 선언으로서, 함수 호출 시 전달된 인수를 배열로 나타낼 수 있게 합니다. 나머지 매개변수는 함수의 마지막 매개변수로 선언되어야 하며, 선언 시 매개변수 이름 앞에 ...를 붙입니다.

// 나머지 매개변수
function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1, 2, 3
  console.log(...args); // 4, 5
  console.log(args); // [4, 5]
}

exampleFunc(1, 2, 3, 4, 5);