JS ES6 문법 한눈에 보기

---

1. let과 const

1. let변수는 중복선언이 불가능하다.
2. let변수의 유효범위는 {}블록이다.

    //let변수는 같은 블록에서 내에서 중복이 불가능하다.
    let y = 1;
    // let y = 100; //에러

    //let변수의 유효범위는 {}블록이다
    let z = 10;
    if(true) {
        let z = 100;
        console.log(z); //100
    }
    console.log(z); //10

 

1. const

	
    const GENDER = "남자";
    // var GENDER = "여자"; //에러
    // GENDER = "여자"; //에러

    const arr = ["홍길동", "이순신", "홍길자"];
    // arr = ["김철수"]; //에러
    arr[0] = "김철수"; //내부의 값 변경은 허용
    arr.push("박영희"); //내부의 갑 변경 허용

    //객체에서의 수정
    const P1 = {"name" : "홍길동" };

    // P1 = {"name" : "이순신"}; //P1을 전부 바꾸는 코드는 에러
    P1.name = "이순신"; //내부의 값의 변경은 허용
    P1.age = 20; //내부의 값의 추가도 허용

---

2.  spread operator (전개구문)

1. 반복 가능한(iterable)에 적용할 수 있는 문법입니다.
2. 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있습니다.

	
    const arr = [1,2,3];
    console.log(...arr); //num의 요소들을 추출
    
    const str1 = 'hello'; 
    const str2 = [...str1]; 
    console.log(str2); // [ "h", "e", "l", "l", "o"]
	
    //배열에서 전개구문
    //배열의 추가
    const num1 = [10, 20, 30, ...arr];
    console.log(num1)

    //배열의 중간추가
    const num2 = [10, 20, ...arr, 30];
    console.log(num2)

    //배열의 복사
    const num3 = [...arr]; //splice와 유사(복사)
    console.log(num3)

    //배열 연결
    const num4 = [...arr, ...arr]
    console.log(num4)

 

3. 함수에서 spread operator

    const num = [1,2,3];

    //함수의 전달
    function sum(x, y, z) {
        return x + y + z;
    }
    console.log( sum(...num) ); //num의 요소를 x,y,z로 전달
    console.log( sum(10, ...num) ); //10, 1, 2, 3을 전달


    //함수의 매개변수의 사용(가변적 매개변수) - 단 마지막에 작성해야 합니다.
    function sum2(x, ...arr) {
        return [x, ...arr]; //리스트 반환
    }

    console.log( sum2("홍길동", 1) )
    console.log( sum2("홍길동", 1,2) )
    console.log( sum2("홍길동", 1,2,3) )


    //함수의 default매개값
    function sum3(x, y = 10, z = 100) {
        return x + y + z;
    }

    console.log( sum3(1) ) //111
    console.log( sum3(1, 2) ) //103
    console.log( sum3(1, 2, 3) ) //6
    console.log( sum3(...[1,2] )) //1,2를 추출해서 전달 //103

---

3.  Destructuring assignment (구조 분해 할당)

1. 배열에서 destructuring

 

    let arr = ["홍길동", "이순신", "홍길자", "김철수"];
    /* 기존의 방법
    let n1 = arr[0];
    let n2 = arr[1];
    let n3 = arr[2];
    let n4 = arr[3];
    */

    //위치요소를 반환받아서 한번에 사용한다.
    let [a,b,c,d] = arr;
    console.log(a,b,c,d)

    let [n1, , ,n2] = arr;
    console.log(n1, n2)

    //전부다 반환한다.
    let [...x] = arr;
    console.log(x);

    //남아있는 모든 요소를 반환한다.
    let [k1, k2, ...all] = arr;
    console.log(k1, k2, all)

 

2. 객체에서 destructuring

    let person = {
        "name": "김철수", 
        "age" : 30,
        "job" : ["programmer", "designer"]
    }
	
    //name키 값을 가져온다.
    let {name} = person;
    console.log(name);
    
    let {name, age, job} = person;
    console.log(name, age, job);

    //다른 이름으로 가져오기
    let {name: aaa, age:bbb} = person; //name을 aaa이름으로 가져온다
    console.log(aaa, bbb)

---

4. for of문

1. 반복 가능한 객체(iterable)를 for문 안에서 반복시켜 연속된 결과값을 얻습니다.

2. forEach문에서 지원하지 않는 break, continue, return의 사용가능

    let arr = ["a", "b", "c"];
    //기존의 for문
    /*
    for(let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    for(let i in arr) {
        console.log(arr[i]); //i는 인덱스를 담아준다
    }
    */
    
    //기존의 foreach문
    /*
    arr.forEach(function(value, index, arr) { 
        console.log(value);
        console.log(index);
        console.log(arr);
    })
	*/

    //es06 - forof문 (단 list같은 반복가능 요소에만 적용된다)
    for(let i of arr ) {
        console.log(i); //값을 뽑아준다.
    }
    
    //error
    let obj = {name: "g", age: 1};
    for(let i of obj) {
        console.log(i);
    }

---

5. Backtick 

1. 백틱 `을 용해서 문자열을 표현하고, 템플릿 리터럴 ${}를 이용해서 필요값을 처리

    let name = '홍길동';
    let age = 20;
	//기존문법
    console.log('제 이름은 ' + name + '이고 나이는 ' + age + "입니다");
    //backtick문법    
    console.log(`제 이름은 ${name}이고 나이는 ${age}입니다`);

---

6. Arrow Function (화살표함수 👍)

1. 화살표 함수는 기본적으로 익명함수를 대체합니다. (호이스팅 불가)

2. 가독성이 향상됩니다.

    //기존익명함수
    /*
    var a = function() {
        console.log('a실행');
    }
    */
    
    //화살표
    let a = () => { 
        console.log('a실행');
    }

 

문법1
코드가 한개줄이면 {} 생략이 가능하다
{}를 쓰지 않으면 기본값으로 undefined를 반환합니다.
{}를 쓰지 않고 구문을 작성하면 리턴문이 됩니다.

    let b1 = (a) => console.log(a); //출력
    console.log( b1(1) ); //undefined

    let b3 = (a, b) => a + b; //리턴문
    console.log( b3(1, 2) ); //3

문법2
매개변수가 1개라면, 매개변수 자리의 ()의 생략이 가능합니다.

    let func = a => a + 10;
    console.log ( func(10) ); //20

문법3
객체를 반환 할때는 ()를 묶어 줍니다.

    //1st
    let c = () => {
        return {key: '홍길동'};
    }
    //2nd
    let d = () => ({key: '이순신'});

---

화살표 함수의 응용 forEach, filter, map

1. forEach - 반복문

array.forEach(callbackFunction(currenValue, index, array), thisArg) 

• currenValue: 현재값
• index: 현재인덱스
• arrayt: 현재배열,
• thisArg: callbackFunction 내에서 this로 사용될 값

    //1st
    list.forEach( function(x, y, z) {
        console.log(x, y, z);
    });
    //2nd
    list.forEach( (x,y,z) => console.log(x,y,z) )

2. filter - 요소개수만큼 반복하며 boolean을 이용한 새로운 list를 만듬

array.filter(callbackFunction(currenValue, index, array), thisArg) 

    var result = list.filter( function(x, y, z) {
        return x % 2 == 0; //요소가 true인결과를 반환(요소들의 짝수만 반환)
    });
    console.log(`result: ${result}`);  //2, 4, 6, 8, 10
    
    //2nd
    var result = list.filter( (x, y, z) => x % 2 == 0);

3. map - 실행한 결과를 가지고 새로운 배열을 만들 때 사용

array.map(callbackFunction(currenValue, index, array), thisArg) 

    //1st
    var result2 = list.map( function(x, y, z) {
        return x * x; //처리한 연산결과를 반환
    });
    console.log(`result2: ${result2}`); //1, 4, 9, 16 ... 100

    //2nd
    var result2 = list.map( x => x * x );

4. this키워드의 사용 - 일반함수로만 가능

    let result3 = list.map(function(x) {
        return x % this.value == 0 ? true : false;
    }, {value: 5}); //this가 된다.

    console.log(result3); //f, f, f, f, t ,f, f, f, f, t

---

7.  class

일반HTML에서는 굳이 class를 사용하진 않습니다. 

React의 class컴포넌트를 사용한다면 알아두세요.

1. 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 않습니다. (구형브라우저에서는 지원불가 할 수 있음)

    class Person {
        //멤버변수 
        name = '홍길동';
        age = 20;

        //객체변수
        state = { 
            a: 1,
            b: () => {
                return 'obj의 b';
            }
        }

        //생성자
        //자바스크립트 생성자는 1개 입니다. (생성자 중복 불가)
        //멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성됩니다.
        constructor(addr) {
            this.addr = addr;
        }

        //함수
        func = (a) => {
            return "함수호출";
        }

    }
    
    //객체 생성1
    let p = new Person();

    console.log(p.name) //멤버변수 접근
    console.log(p.age)
    console.log(p.func()); //함수호출한 결과 출력
    console.log(p.state.a); //obj의 a접근
    console.log(p.state.b()); //obj의 b함수 호출한 결과 출력
    
    //객체의 생성2
    let p2 = new Person('서울시');
    console.log(p2.addr); //서울시

클래스 상속

    class Shape {
        constructor() {}
    }

    class Rect extends Shape {
        //생성자 자체는 생략가능
        constructor(w, h) {
            super(); //반드시 연결
            this.w = 20;
            this.h = 10;
        }    

        /* set */ setW(w) {
            this.w = w;
        }
        setH(h) {
            this.h = h;
        }     

        /* get */ getArea() {
            return this.w * this.h
        }

        // get, set, static 예약어로 메서드를 설정할 수 있음
    }

    //객체생성
    let rect = new Rect();
    console.log(rect.getArea())	// 200

    rect.setH(100);	
    rect.setW(20);
    console.log(rect.getArea())	// 2000

---

 

8. module import export

* 모듈 임포트

- 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있습니다.

- ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능합니다.

- 모듈을 내보내는 방법은 named export방식과 default export방식 2개가 있습니다.
- 여러 값을 내보낼 때 named export방식
- 단일 값을 내보낼 때 default export방식

script01.js

//내보내기 1
export const name = '홍길동';
export const age = 20;

export const getInfo = () => {
    console.log('이름:', name, '나이:', age);
}

//내보내기2
let sum = 0;
let add = (x) => {
    sum += x;
    console.log(sum);
}

export {sum, add}; //선언해논 변수를 export{} 로 내보내기

script01.html

• HTML5파일에서 예외적으로 module을 사용할려면 type="module" 문을 반드시 작성합니다.

<script type="module">
    //HTML5표준에서 예외적으로 module을 사용할려면 type="module" 문을 반드시 작성합니다.

    //import방법1 (Destructuring방식)
    import {name, age, getInfo} from './script01.js';

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

    //import방법2 (Alias방식)
    import * as test from './script01.js';
    
    console.log(test.name);
    console.log(test.age);
    test.getInfo();
    console.log(test.sum);
    test.add(10);

    //import방법3 (이름바꿔 가져오기);
    import {name as n, age as a, getInfo as get} from './script01.js';
    
    console.log(n);
    console.log(a);
    get();


</script>

 

 

하나의 모듈에서 하나의 객체를 이름으로 내보낼 때 단일 객체 내보내기 export default문을 사용합니다.

Class나 함수를 내보낼떄는 세미콜론을 붙이지 않도록 권유됩니다.

script02.js

class Person {

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

    getInfo = () => {
        return '이름:' + this.name; 
    }

}

export default Person

script02.html

<script type="module">
    //import방법 4
    import Person from './script03.js';

    //클래스 import로 객체 생성문이 필요합니다.
    let park = new Person('홍', 20);
    console.log(park.name);
    console.log(park.age);

</script>