[ES6] ES6 문법정리

• 1. String
• 2. for of
• 3. spread operator (펼침 연산자)
• 4. Array.from
• 5. filter
• 6. Destructuring
  • 6.1 destructuring 을 object에서 활용하기
• 7. set과 has
• 8. weakSet
• 9. Map
• 10. avascript로 로또번호 만들기
• 11. function
  • 11.1 사용방법
• 12. function의 default값 설정하기
• 13. class
• 14. Object.assign
• 15. export import
• 16. arrow function
• 17. template literal
• 18. Destructuring
• 19. spread operator
• 20. Array.map()
• 21. Array.Filter()
• 22. forEach
• 23. push , include

1. String

• startswith 기준문자열이 문자열의 시작에 위치하는지 알수있는 메소드
• endswidth 기준문자열이 문자열의 끝에 위치하는지 알수 있는 메소드
• includes 기준문자열이 문자열에 포함되어있는지 알수 있는 메소드

2. for of

기존의 for-in방식에 있는 이슈를 해결할 수 있는 문법

• var str = "hello";
  for(let value of str){
    console.log(value);
  }
  

• 결과 값

  h
  e
  l
  l
  o
  

3. spread operator (펼침 연산자)

...으로 사용되는 것이 spread operator였던 것 같다. 리액트를 공부할때 state의 특정부분만 변경시킬때 자주 사용하는 문법인것 같다.

• 배열내에서 사용

  let pre = [1,2,3]
  let newdata = [0,...pre,4];
  newdata
  (5) [0, 1, 2, 3, 4]
  

• 함수에서 사용

  let pre = [1,2,3];
  function sum(a,b,c){
    return a+ b+c;
  }
  sum(...pre)
  6
  

4. Array.from

함수에 들어온 파라메터를 array로 만들어주는 메서드

function addMark(){
	let newarray = Array.from(arguments);    
let newData = newarray.map((value) => {
        return value+"!";
    });
    console.log(newData);
}
addMark(1,2,3,4);
["1!", "2!", "3!", "4!"]

addMark는 파라메터를 정해놓지 않았지만 argument로 가변적으로 받을 수 있다. 가변적으로 받은 데이터를 mapping 하기위해서는 배열형태의 데이터여야한다. 그래서 arguments를 Array형태로 변환시켜주어야하는데 그 때 필요한 것이 Array.from이다. 배열의 형태로 있어야한다.

5. filter

es6에 추가된 문법은 아니지만 filter라는 메소드가 있다.

// li태그중에 e가 포함된 개수 구하기 
function print(){
  
  let list = document.querySelectorAll('li');
    
  let fromarray = Array.from(list);
  
  let result = fromarray.filter(li => li.innerText.includes("e")); //li는 li태그를 의미하기 때문에 innerText를 해주어야함. 
  return result;
}

console.log(print().length);

이런식으로 사용하면 fromarray에 filter안에 있는 함수를 적용시켜 필터링 하겠다는 뜻이다.
filter안의 메소드를 es6의 문법인 화살표 방식으로 하니까 코드가 훨씬 간결해졌다.
　

6. Destructuring

• 입력 값

let data = ["1", "2","3","4"];
let [a,,c,] = data;
console.log(a,c);

• 결과 값

"1"
"3"

위처럼 배열형태의 데이터를 사용해서 만들 수 있다.
원래는

let data = ["1", "2","3","4"];
let a = data[0];
let c = data[2];

이런 식으로 사용했었다.

6.1 destructuring 을 object에서 활용하기

• input

let obj = {
  name : 'mansub',
  age : 26,
  height : 180
}

let {name,age} = obj;
let {name:myname,age:myage} = obj;
console.log(name,age);
console.log(myname,myage);

• output

"mansub"
26
"mansub"
26

7. set과 has

set은 array를 개선한 것

let myset = new Set();
console.log(toString.call(myset)); // 객체가 어떤 type의 객체인지 확인할 수 있는 방법 

myset.add("1");
myset.add("2");
myset.add("3");

//ES6이전 순회 문법 
myset.forEach(function(v){
  if(v === "2"){
    console.log(true);
  }
})

//ES6에서 제공하는 has
console.log(myset.has("2"));

set을 사용할 때 has 를 사용하면 훨씬 간결한 코드로 작성할 수 있음.
　

8. weakSet

weakset은 참조를 가지고 있는 객체만 저장해주는 자료구조이다.
객체형태를 중복없이 저장할때 유용하다.

• input

let arr = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [arr,arr2];
console.log(arr,arr2,arr3);

let ws = new WeakSet();
ws.add(arr);
ws.add(arr2);
ws.add(arr3);


console.log(ws.has(arr)); // arr이 존재함. 
console.log(ws.has(arr2));
arr = null;
console.log(ws.has(arr)); // arr이 null값이면 Garbage Collector로 없는 객체로 생각 
console.log(ws.has(arr2));

• output

[1, 2, 3]
[4, 5, 6]
[[1, 2, 3], [4, 5, 6]]
true
true
false
true

9. Map

obj를 개선한 것이 map

weakmap도 weakset과 동일하게 null 값을 garbage collector 해서 사용하지 않는 데이터라고 인식하는 것이 유사하다. 　

10. avascript로 로또번호 만들기

const SETTING = {

    name: "LUCKY LOTTO!",

    count: 6,

    maxNumber: 45

}

const {count, maxNumber} = SETTING;

function getRandomNumber(c) {

    // 랜덤한 유일한 숫자값을 추출하기
    let lottoNumber = new Set();
    
    while(lottoNumber.size <c){
      lottoNumber.add(parseInt(Math.random()*(maxNumber+1)));
    }
    return console.log(lottoNumber);
}

getRandomNumber(count);

11. function

ES6에서 새로 추가된 arrow function이 있다. 여기서는 간단하게 사용하는 방법에 대해서만 설명하고 나중에 제대로 정리하려고 한다.

• before

el.addEventListener("click",function(evt){
          this.printData();
  }.bind(this));

• after

el.addEventListener("click",(evt) =>{
         this.printData();
});

화살표 방법을 사용하면 .bind(this)를 사용해서 this를 사용해야하는 것을 줄일 수 있다. 태그에 이벤트를 추가하는 코드가 간결해진 것을 한눈에 알아 볼 수 있다.
　

11.1 사용방법

• 인자의 종류에 따른 방법

      () => { ... } // 인수가 없을 때
       x => { ... } // 인수가 하나일 때
  (x, y) => { ... } // 인수가 여러 개일 때
  

  • 함수 몸체에 따른 방법

    x => { return x * x }  // 블록을 사용
    x => x * x  // 표현식. 위와 동일
  

12. function의 default값 설정하기

• 1.

 function sum(v1 , v2){
  v2 = v2 || 2;
  return v1 + v2;
}

• 2.

 function sum(v1,v2=2){
 return v1 + v2;
 }

13. class

constructor가 내장되어있음.

class person { 
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  
  showName(){
    console.log(this.name);
  }
  showage(){
    console.log(this.age);
  }
}

const p1 = new person("사람1",26);
const p2 = new person("사람2",27);

p1.showName();
p2.showName();

14. Object.assign

객체에 새로운 값을 추가할때 사용하는 방법인것 같다.

const myObj = {
  showHealth : function(){
    console.log("오늘의 운동시간은 : " + this.healthTime);
  }
}

const newhealth = Object.assign(Object.create(myObj),{
  name : "mansub",
  age : 26
});

console.log(newhealth);

15. export import

• export default를 할 경우 {} 에 넣을 필요가 없다.
• export default를 할때는 뒤에 const를 붙힐 수 없기 때문에 코드 끝에 export default ; 를 해준다.

16. arrow function

const sayHello = name => "Hello"+name;

위와 같이 어떠한 괄호도 사용하지 않으면 바로 return 하는 의미.

const sayHello = name => {
	console.log(name);
	return "Hello"+name
};

위의 경우에는 {}를 사용함으로써 return 말고 다른 동작도 한다는 의미.

인자가 하나인 경우 ()를 사용하지 않아도 됨.

17. template literal

const sayHello = name => `Hello ${name}`;

` `
' '
" "

위 세개는 각자 다른 것을 의미

18. Destructuring

• before

const human = {
	name : 'mansub',
	lastName : 'Han',
}
const name = human.name;
const lastName = human.lastName;

위 같은 객체를 사용할 때 효율적이지 않다.

• after

const human = {
	name : 'mansub',
	lastName : 'Han',
}

const {name,lastName} = human;

훨씬 효율적으로 코드를 작성할 수 있다. {}안의 값은 human에 있는 variable이여야 한다.

새로운 name,lastName을 만들어주는 동작.

• naming

const human = {
	name : 'mansub',
	lastName : 'Han',
	tall : 180
}

const {name,lastName , tall : height} = human;

human의 tall을 height라는 별명을 붙혀서 사용하겠다는 의미 .

19. spread operator

• array - before

const days = ["Mon","Tues", "Wed"];
const otherDays =["Thu", "Fri", "Sat"];

const allDays = days + otherDays; // 합쳐지지 않음 

console.log(allDays);

결과

"Mon,Tues,WedThu,Fri,Sat"

• array - after

const days = ["Mon","Tues", "Wed"];
const otherDays =["Thu", "Fri", "Sat"];

let allDays = [...days, ...otherDays,"Sun"];

console.log(allDays);

결과

["Mon", "Tues", "Wed", "Thu", "Fri", "Sat", "Sun"]

배열을 펼쳐서 서로 합칠 수 있는 역할을 해줍니다. 배열이 아니더라도 객체에서도 사용할 수 있습니다.

• obj -before

const obj1 = {
  one : 'item1',
  two : 'item2'
}

const obj2 = {
  three : 'item3'
}

const newObj = {obj1, obj2};

console.log(newObj);

결과

[object Object] {
  obj1: [object Object] {
    one: "item1",
    two: "item2"
  },
  obj2: [object Object] {
    three: "item3"
  }
}

obj가 두개의 obj로 이루어진 형태인 것을 확인할 수 있습니다.

• obj -after

const obj1 = {
  one : 'item1',
  two : 'item2'
};

const obj2 = {
  three : 'item3'
};

const newObj = {...obj1, ...obj2};

console.log(newObj);

결과

[object Object] {
  one: "item1",
  three: "item3",
  two: "item2"
}

spread operator를 사용하게 되면 객체도 한번에 넣을 수 있습니다.

20. Array.map()

const nums = [1,2,3,4,5,6];

const numArray = nums.map(function(num) {
  return num;
});

console.log(numArray);

결과

[1, 2, 3, 4, 5, 6]

두번째 인자를 사용하면 index를 알 수 있음. 리턴해주지 않으면 배열은 만들지 않음.

21. Array.Filter()

const nums = [1,2,3,4,5,6,7,8,9,10];

const bigNum = nums.filter(num => num > 4)

결과

[5, 6, 7, 8, 9, 10]

22. forEach

forEach는 map이나 filter과는 다르게 return 하는 값이 없기 때문에 함수 내부에 로직을 작성해 놓는 방식입니다.

23. push , include

push는 배열에 값을 추가하는 것이고 include는 값이 포함되어 있는지 확인합니다.