(4) Javascript: ES6 기초 문법

나는 지금까지 제일 익숙한 언어는 파이썬과 C++ 인데, 자바스크립트를 처음 공부하면서 ES6 문법의 새로운 특징들에 대해 배우게 되었다.

 

1. 함수를 정의하는 방법과 arrow function 

ES6 문법에는 함수를 정의하는 방법이 2가지, 그리고 새로운 문법인 arrowFunction 이 있다. 

arrowFunction 은 직접적으로 function 을 안 지정하고 arrow 로 지정 가능한 것이 장점인 것으로 해석된다. 

// (2-1) Function 을 먼저 선언하는 방법
// 가장 익숙한 방법으로 파이썬에서 쓰는거랑 비슷하다고 생각한다. 
function add () {}

// (2-2) Function 을 var 또는 let 으로 지정하고 function 이라고 해주는 방법
var add = Function () {}
let add = Function () {}
// * Arrow Function  
// 직관적으로 잘 이해가 가지는 않지만, function 이라고 지정해주지 않고 arrow로 function 
// 지정이 가능한것이 특징인 듯. 
var add = () => {}
var add = (x) => {}

2. Destructuring ; Property Shorthand ; Spread Operator ; Rest Operator 

4개를 한번에 외우는 편이 좀 더 편했다. 상대적으로 arrow function 에 비해 직관적이라고 느꼈던 것 같다. 

다양한 방법의 효율적 데이터 지정을 배울 수 있었다. 

// Destructuring -> 이미 존재하거나 지정되지 않은 list, object 등의 개별 element 를 
// Destructuring List : 순서 중요
let arr = ['1','2','3','4];
let [a,b,c,d = 2] = arr;
// 변수를 list 로 지정하되, undefined 값에 대한 초기값은 지정 시 override 됨
// Destructuring Object: key 중요
let user = {
	name : 'nbc',
    age: 30
 }
 
 let {name: newName, age: newAge} = user 
 let {name, age, birthday = "today"} = user
 
 // Property Shorthand -> object에서 key 와 value 가 일치할 때 생략 가능
 const obj = {name, age}; // same as const obj = {name: name, age: age}
 
 // Spread Operator -> 리스트 및 객체에서 적용 가능 
 let arr = [1,2,3];
 console.log(arr);
 console.log(...arr); // basically same as copying 
 let newArr = [...arr,4];
 
 // Rest Operator : 매개변수를 정확히 모를 때, args 로 나머지 매개변수를 인식 가능하게 하는 것
function exampleFunc (a,b,c,...args) {
 	console.log(a,b,c);
    console.log(...args);
}
// 일부 지정 해주고, 나머지 rest operator 들을 지정해서 replace 가능.
exampleFunc(1,2,3,4,5,6,7);