[JavaScript] ES6 문법

왜 어딜 가나 사람들은 ES6문법을 얘기할까? 왜 ES6인가 

• 최신 버전이라 그런가??
  • 아니다 2015년부터 매년 6월에 규칙적으로 개정되고 있어 현재 2022년 기준 ES2021까지 나왔다
• 그렇담 왜 ES6만 다들 얘기 하나??
  • ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 하다 또한 ES6는 ES5 이하 명세에서 문제가 되었던 부분들을 해결하였고 많은 기능들을 추가했다 이는 가독성과 유지보수성 향상으로 이어졌고 React, Vue 등 유명 프레임워크 밑 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었고 이러한 이유로 주목과 관심을 받게 되었다.
  별개로 ES8(ECMAScript 2017)에서 async/await 등장!!

추가된 주요 기능들을 확인해보자!!

• const and let(block scope)
  • const : 한 번 선언되면 객체와 함께 사용될 때를 제외하고는 변경 불가능한 변수이다 변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋다
  • let : 새로운 값을 가질 수도 있고 재할당 할 수도 있다. 변경 가능한 변수이다.
  • var : 기존 선언을 위한 키워드이며 block scope가 아닌 함수 scope를 가지며 호이스팅 문제가 있다.
  • let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않습니다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생합니다.

호이스팅 예시 

console.log(name);
var name = 'jeon';

위 예시의 콘솔에는 머가 찍힐까 바로 undefined이다. 
이 예시로 확인 할 수 있듯이 var는 호이스팅시 undefined로 변수를 초기화 한다. 

var를 let으로 바꿔보자
console.log(name);
let name = 'jeon';

여기서 콘솔 결과물은 `Uncaught ReferenceError: name is not defined` 이렇게 나온다
이걸로 let은 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다는 걸 알 수 있다. const도 
마찬가지

 

• Arrow functions(화살표 함수)
  • 화살표 함수 이게 정말 여러 가지를 복합적으로 알아야 한다.
  • this에 대한 것도 정말 복잡하게 얽혀 있는 데 이건 this 관련된 글에서 따로 정리하도록 하자 

// ES5
function myFunc(name) {
	return '안녕' + name;
}

console.log(myFunc('영희'));

// 출력 => 안녕 영희
----------------------
// ES6 화살표 함수
const myFunc = (name) => {
	return `안녕 ${name}`;
}

console.log(myFunc('영희')); // 출력 => 안녕 영희

// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `안녕 ${name}`;

console.log(myFunc('영희')); // 출력 => 안녕 영희

----------------------------------
// 화살표 함수가 등장하고 기존 배열순회 함수들에 적용하며 더 간결하고 읽기 쉽게 구현 가능 
// ES5
const myArrary = ['진수', '영철', '영희', 5];

let arr1 = myArrary.map(function(item) {
	return item;
});

console.log(arr1); // 출력 => (4) ["진수", "영철", "영희", 5]

// ES6
let arr2 = myArrary.map((item) => item);

console.log(arr2); // 출력 => (4) ["진수", "영철", "영희", 5]

 

• Template Literals(템플릿 리터럴)

// ES5
function myFunc1() {
	return '안녕' + name + '너의 나이는' + age + '살 이다!'; 
}

console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희 너의 나이는 22살 이다!

// ES6
const myFunc = (name, age) => {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`; 
};

console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희, 너의 나이는 22살 이다!

 

• Default parameters(기본 매개 변수)

const myFunc = (name, age) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 undefined살 이니?

---------------------------------------

const myFunc = (name, age = 22) => { // 여기서 기본 매개변수 삽입
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?

 

• Array and object destructing(배열 및 객체 비구조화)

const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;

console.log(famillyName);
console.log(name);
console.log(age);

--- 

// ES6 문법
const contacts = {
	famillyName: '이',
	name: '영희',
	age: 22
};

let { famillyName, name, age } = contacts;

console.log(famillyName);
console.log(name);
console.log(age);

 

• Import and export(가져오기 및 내보내기)

// ES6
// detailComponent.js
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

--------
// homeComponent.js
import detail from './detailComponent';

console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!

둘 이상의 모듈을 가져오려는 경우, 중괄호에 넣기만 하면 된다 
import { detail, userProfile, getPosts } from './detailComponent';
이런 식으로

 

• Promises(프로미스)
  
  • 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다.  프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.라고 mdn에 설명되어있다. 

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});



// 두 번째 예시
const myPromise = () => {
	return new Promise((resolve, reject) => {
		resolve('안녕하세요 Promise가 성공적으로 실행했습니다');
	});
};

console.log(myPromise());
// Promise {<resolved>: "안녕하세요 Promise가 성공적으로 실행했습니다"}

 

• Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)

// Rest parameter는 배열의 인수를 가져오고 새 배열을 반환하는데 사용된다

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;

const Func = (restOfArr) => {
	return restOfArr.filter((item) => {return item}).join(" ");
};

console.log(Func(rest)); // 안녕 지수 어떻게 지내니?




// 예시(Spread operator는 Rest parameter와 구문이 동일하지만 Spread operator는 인수뿐만 아니라 배열 자체를 가진다.)

const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];

const Func = (...anArray) => {
	return anArray;
};

console.log(Func(arr));
// 출력 => ["영희", 20, "열성적인 자바스크립트", "안녕", "지수", "어떻게 지내니?"]

헷갈려서 찍어보니 정확히는 [Array(6)] 이렇게 나온다 그러니까 배열안에 배열이지 이건 결론
적으로 return 배열의 길이가 1

const jeon = (anarray) => {
    return anarray
}

console.log(jeon(arr)); 

이렇게 하면 그냥 하나의 배열 길이 6인게 나온다 

이 밑에 예시가 이해하기에 훨씬 직관적이다 

const obj = {
  a: 10,
  b: 20,
};
const newObj = { ...obj };
console.log(newObj); // { a: 10, b: 20 }

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

 

• Classes(클래스)
  • Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.(MDN)
  • 클래스는 특별한 함수이다 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
}

const user = new myClass('영희', 22);

console.log(user.name); // 영희
console.log(user.age); // 22

-------

class myClass {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	sayHello() {
		console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
	}
}

// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
	userName() {
		console.log(this.name);
	}
}

const profile = new UserProfile('영희', 22);

profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희

이외에도 Map, Set, for of 여러 가지 추가된 것들이 있으니 확인해보자!! w3Schools

JavaScript ES6