네이버클라우드 캠프 5기/학습내용 정리

46. JavaScript - ES6

박세류 2023. 5. 26. 11:26

1. ES6(Ecma Script 6)

1. const, let의 등장

  1. var 변수는 중복 선언이 가능하고 블록단위 변수가 아니며 호이스팅이 가능한 문제점이 존재하여 ES6부터는 let, const라는 변수 선언 방식이 등장했다.
  2. 블록단위 변수 let
    • let은 중복선언 불가능하고 블록단위이며 호이스팅 불가능한 var의 대체 변수
  3. 상수를 선언하는 const
    • const변수는 상수를 선언할 때 사용하여 선언과 동시에 초기화가 일어나야 한다.
    • const도 let과 동일하게 블록단위 변수이며 호이스팅 불가능
    • const는 상수이기 때문에 값의 재할당 불가능
    • 기본적으로 const로 변수를 선언하되 변경될 경우가 있는 변수만 let으로 선언한다.
  4. const와 객체
    • const 변수로 객체를 선언하게 되면 객체안의 속성들은 변경할 수 있기 때문에 객체들은 모두 const로 선언한다.
    • 기본타입인 number, string ...은 const로 선언됐을 때 값을 변경할 수 없지만 객체나 배열의 요소들 또는 속성들은 변경 가능하다.
    • 자바스크립트에서 const는 재할당을 금지하는 것이고 불변을 의미하지는 않는다.

2. 템플릿 리터럴

  1. 기존 ES5까지의 자바스크립트에서는 문자열을 선언할 때 작은따옴표('')나 큰따옴표("")를 사용했는 데 ES6버전에서 백틱(``)으로 만들수 있는 문자열이 추가되었다.
  2. 백틱(``)을 이용해서 문자열을 지정할 수 있으며 멀티라인 문자열, 표현식 삽입등을 지원한다.
  3. 표현식 삽입은 자바스크립트의 변수나 구문을 사용할 수 있는 것으로 ${}를 이용해서 표현식을 문자열 중간에 넣을 수 있다.

3. 지수연산자

  1. 지수연산자는 거듭제곱을 연산해주는 연산자.
  2. num1 ** num2
  3. Math.pow()와 동일한 기능
  4. 음수를 연산할 때는 음수를 소괄호()로 묶는다.

4. 논리연산자를 이용한 단축평가

  1. &&나 || 연산 시 연산의 결과가 true, false가 아닐 수도 있다.
  2. &&나 || 연산 결과가 결정되는 시점의 값이 리턴되는 것을 단축평가라고 한다.
  3. &&는 두 개 피연산자가 모두 true여야 true가 리턴되는데 true나 false가 첫 번째 피연산자가 true일 경우 결과가 결정되는 시점은 두 번째 피연산자이다.
  4. true && 결과를 결정하는 시점 'bit' && 'camp'=> 'camp' 리턴(값이 있으면 true로 판단) false && 어떤값이 오던지 false => false 리턴 false || 결과를 결정하는 시점 false || 'bit' => 'bit' 리턴 'camp' || 어떤값이 와도 true => 'camp' 리턴
  5. 단축평가는 논리연산자(&&, ||)의 true, false를 결정하는 시점의 값을 리턴하는 것.
  6. true && 리턴값 => 리턴값이 리턴
false && 뭐가오든 상관없이 false => false리턴

true || 뭐가오든 상관없이 true => true리턴
false || 리턴값 => 리턴값이 리턴


## 5. 객체에 추가된 기능들
1. 속성 축약표현
    - 기존에 ES5에서는 객체를 중괄호 블록으로 만들고 그 안에 속성을 키와 값으로 지정했다.
    ```
    var obj = {
        x: 1,
        y: 2
    };
    ```
    - ES6에서는 속성의 축약표현이라는 기능이 추가되었다.
    - 속성의 축약표현 변수를 선언하고 속성으로 그 변수를 넣어주면 변수명이 키로 자동할당되는 기능
    ```
    let x = 1;
    let y = 2;

    const obj = {x, y};
    ```
2. 계산된 프로퍼티 이름
    - 템플릿 리터럴의 표현식 삽입 기능을 이용해서 동적으로 속성키를 만들어주는 기능.
    - 기존 ES5에서는 속성키를 동적으로 생성하려면 []를 이용해서 문자열 결합연산자를 이용했는데 ES6에서는 템플릿 리터럴로 속성키와 값을 바로 매핑할 수 있다.
    ```
    //ES5
    var obj = {};
    var i = 0;

    obj['value_' + (++i)] = i;
    obj['value_' + (++i)] = i;
    obj['value_' + (++i)] = i;
    obj['value_' + (++i)] = i;

    //ES6
    let j = 0;
    const obj = {
        [`value_${++j}`]: j,
        [`value_${++j}`]: j,
        [`value_${++j}`]: j,
        [`value_${++j}`]: j
    };
3. 메소드 축약표현
    - ES5에서는 객체에 메소드를 추가할 때 키값과 function 키워드로 메소드를 추가했었는데 ES6에서는 function를 생략할 수 있다.

## 6. ES6에서 새로 도입된 class
1. 객체지향에 익숙한 개발자들이 prototype 기반의 객체를 생성하고 사용하는 어려움을 겪어서 class 개념을 도입하게 되었다.
2. ES5에서 상속은 prototype을 이용한 상속밖에 없었는데 class가 등장하면서 extends 키워드로 class간의 상속도 지원된다.
3. prototype 기반은 유지되면서 객체를 만드는 새로운 방식이 추가된 것.
4. prototype 기반 객체보다 편하게 상속을 사용할 수 있다.(extends, super 키워드 사용 가능)
5. class의 선언
    - class에는 속성(필드)는 지정할 수 없고 메소드만 선언가능
    - 
    ```
    class 객체명 {
        //생성자함수
        //생성자함수의 명칭은 무조건 constructor로 지정해야한다.
        constructor(매개변수) {
            초기화;
            //속성생성 및 초기화
            this.속성키 = 초기화값;
        }
        //일반 메소드(프로토타입 메소드)
        메소드명(매개변수) {

        }
        //정적 메소드(static 키워드 사용가능)
        static 메소드명(매개변수) {

        }
        //getter, setter메소드
        get getter 메소드명() {

        }
        set setter 메소드명() {

        }
    }
    ```
6. class의 사용
    - new 키워드로 인스턴스화를 진행한 후 사용한다.
    - 
    ```
    const 변수명 = new 객체명();
    ```
7. class의 상속
    - extends 키워드로 기존 class를 상속받아 새로운 class를 만들 수 있다.
    -
    ```
    class 부모 {

    }

    class 자식 extends 부모 {

    }
    ```
    - 일반 메소드(function 키워드로 생성한 메소드)는 생성자 함수의 역할도 한다. 그래서 생성자 함수를 상속받는 class도 만들수 있다.

## 7. 화살표 함수
1. 문법은 자바의 람다식이랑 동일하다.
2. ES5까지는 모든 메소드가 일급객체로 생성되어 불필요하게 prototype이 생성됐다. 메모리 부족현상이 발생하는 경우가 생겼었는데 이러한 문제를 해결하기 위해 화살표 함수라는 개념이 도입되었다.
3. 화살표 함수는 일급객체가 아닌 함수의 기능만 하는 순수함수로 생성되고 일급객체가 아니라서 생성자 함수로 사용이 불가능하다.
4. 화살표 함수는 function 키워드 대신 =>를 사용한다.
5. 화살표 함수와 일반함수의 차이점
    - 화살표 함수는 일급객체가 아니다.
    - 화살표 함수는 생성자 함수로 사용 불가
    - 화살표 함수는 prototype이 생성되지 않는다.
    - 화살표 함수는 중복된 매개변수명을 사용할 수 없다.
    - 화살표 함수는 arguments, this, super 등을 바인딩할 수 없다.

## 8. Rest 파라미터
1. ...키워드를 이용해서 함수에 전달되는 매개변수들을 배열로 받아오는 기능

fucntion add(...변수명) {
변수명을 배열로 이용.
}
const 함수명 = (...변수명) => {
변수명을 배열로 이용.
}


## 9. 매개변수의 기본 값 지정
1. ES6에서는 함수를 정의할 때 매개변수의 기본값을 지정할 수 있다.

const add = (a = 10, b = 20) => {
return a + b;
}

function add(a = 10, b = 20) {
return a + b;
}

2. Rest 파라미터 사용 시에는 기본 값을 지정할 수 없다.

## 10. 배열의 고차함수
1. 반복문과 조건문의 사용을 줄이기 위해서 도입된 기능들. 화살표 함수와 함께 사용된다.
2. 자바의 스트림과 비슷한 기능.
3. 배열의 고차함수의 종류
    -
    ``` 
    forEach: 배열의 모든 요소를 순회하면서 지정된 콜백함수를 계속 호출.
    const arr = [1, 2, 3, 4, 5];
    const arr2 = [];

    배열.forEach(하나씩 꺼내서 쓸 변수명 => 콜백함수)
    arr.forEach(item => arr2.push(item * 2));

    map: 배열의 모든 요소를 순회하면서 지정된 콜백함수를 계속 호출. 콜백함수에서 반환해준 값으로 이뤄진 새로운 배열을 리턴.

    리턴될배열을 받아줄 변수 = 배열.map(하나씩 꺼내서 쓸 변수명 => 콜백함수);
    const arr3 = arr.map(item => item * 3);

    filter: 배열의 모든 요소를 순회하면서 지정된 콜백함수를 계속 호출. 콜백함수의 반환값이 true인 요소들만으로 이뤄진 새로운 배열을 리턴.

    리턴될배열을 받아줄 변수 = 배열.filter(하나씩 꺼내서 쓸 변수명 => 콜백함수);
    const arr4 = arr.filter(item => item > 2); //3, 4, 5
    const arr5 = arr.filter(item => item % 3); //0이 아닌 값은 true, 0은 false

    reduce: 배열의 모든 요소를 순회하면서 지정된 콜백함수를 계속 호출. 콜백함수의 리턴 값을 다음 콜백함수 호출 시 첫 번째 매개변수로 받아서 하나의 결과값을 만들어서 리턴.

    const 변수 = 배열.reduce((이전콜백의 리턴값, 현재 꺼내온 변수, 인덱스) => 콜백함수);
    const sum = arr.reduce((prior, current) => prior + current, 첫 번째 요소에 접근했을 때 이전 요소의 초기값);

    ```

## 11. 스프레드 문법
1. Rest 파라미터와 마찬가지로 ... 키워드를 사용한다.
2. Rest 파라미터가 남은 파라미터들을 배열로 묶어주는 문법이었다면 스프레드 문법은 배열로 들어온 값들을 펼쳐서 개별적인 값들의 목록을 만들어 주는 것
3. Rest 파라미터가 배열로 묶어주는 역할을 한다면 스프레드 문법은 분리해주는 역할을 해서 정반대되는 개념이다.
4. 개별적인 변수에 담을 수도 없다.

## 12. 비구조화 할당(디스트럭처링 할당)
1. 배열이나 객체의 구조를 파괴하여 1개 이상의 변수로 만들어주는 작업

//ES5 배열
var arr = [1, 2, 3];
var num1, num2, num3;

num1 = arr[0];
num2 = arr[1];
num3 = arr[2];

//ES6 배열
const arr = [1, 2, 3];
const [num1, num2, num3] = arr;

//ES5 객체
var obj = {
id: 1,
name: '홍길동',
};

var id, name;

id = obj.id;
name = obj.name;

//ES6 객체
const obj = {
id: 1,
name: '홍길동',
};

const {id, name} = obj;

```

13. Map, Set

  1. Map
    • Map은 키와 밸류의 쌍으로 이뤄진 컬렉션
    • 객체와의 차이점
      • 객체의 키로 올 수 있는 값은 문자열이지만 Map의 키로 지정가능한 값은 객체를 포함한 자바스크립트의 모든 값
      • 객체의 크기 확인은 length로 하지만 Map은 크기확인 시 size를 사용한다.
    • new Map(); 으로 Map을 생성하여 사용한다.
    • const map = new Map(); const map2 = new Map([['key1', 'value1'], ['key2', 'value2'], ...]);
    • Map에 요소를 추가할 때는 맵변수.set(키값, 밸류값);
    • set메소드는 체이닝기법을 지원해서 여러 값을 한번에 입력할 수 있다.
    • map.set('key3', 'value3'); map.set('key4', 'value4') .set('key5', 'value5') ...; //같은 키값으로 set을 하게되면 기존에 존재하던 밸류값이 덮어써진다. map.set('key3', 'value333');
    • 요소를 하나씩 꺼내올 때는 맵변수.get(키값);
    • 해당 요소의 존재여부를 확인하는 맵변수.has(키값); true/false 리턴
    • 해당 요소를 삭제하는 맵변수.delete(키값);
    • 요소를 모두 삭제하는 맵변수.clear();
  2. Set
    • Set은 중복되지 않은 유일한 값들만 저장하는 컬렉션
    • 배열과 유사하지만 데이터의 순서가 없고 중복값이 허용되지 않으면서 순서가 없기때문에 index로 요소에 접근할 수 없다.
    • new Set();으로 선언하여 사용한다.
    • const set = new Set(); const set = new Set([1, 2, 2, 2, 3, 3, 3, 3]);
    • 크기를 확인하는 size
    • 요소를 추가하는 add. 체이닝기법을 지원.
    • 요소를 제거하는 delete
    • 요소의 존재여부를 확인하는 has
    • Set을 비워주는 clear
반응형

'네이버클라우드 캠프 5기 > 학습내용 정리' 카테고리의 다른 글

48. Jquery - Selector  (0) 2023.05.26
47. Jquery - Jquery란?  (0) 2023.05.26
45. JavaScript - method and event  (0) 2023.05.26
44. JavaScript - object  (0) 2023.05.26
43. JavaScript - array  (0) 2023.05.26

'네이버클라우드 캠프 5기/학습내용 정리'의 다른글

  • 현재글46. JavaScript - ES6

관련글

티스토리툴바