TIL 240814 (자바스크립트 기초문법 다지기 3)

ES6 문법

2015년에 발표 된 Javascript 버전

 

화살표 함수, 삼항 연산자는 전 TIL에 정리해서 생략을 했다.

 

1. 변수 선언 (let, const)

ES6 문법으로 바뀌면서 let, const 두가지가 더 생겼다.

	재할당	재선언
var	가능	가능
let	가능	불가능
const	불가능	불가능

 

2. 구조분해할당 ( de + structure + ing)

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 만드는 것

 

2 - 1 배열의 경우

let [value1, value2] = [3, "new"];

console.log("1", value1);

console.log("2", value2);

let arr = ["value1", "value2", "value3"];

let [a, b, c, d = 4] = arr;   // d=4  =  이니셜 밸류 = 초기값

console.log(a);  // value1

console.log(b);   // value2

console.log(c);   // value3

console.log(d);   // 4

 

2 - 2 객체의 경우

구조분해할당

let {name, age} = {

    name : "yeon",

    age : 26,

};

console.log(name); // string  yeon

console.log(age); // number  26

새로운 이름으로 할당하는방법

let user = {

    name : "yeon",

    age : 26,

};

let {

    name : newName,

    age : newAge

} = user   >> 아래로 변환

let { name : newName, age : newAge} = user;  //  변환코드

let {name, age, birthday = "today"} = user;

console.log(name);  // yeon

console.log(age);  // 26

console.log(birthday);  // today

 

3. 단축 속성명 (property shorthand)

키랑 벨류가 같으면 생략도 가능 ( name : name, 을 name, 으로)

1

const obj = {

    name : name,

    age : age,

}

2

const obj = {name,age}

3

const obj = {name : name,age : age}  //  1,2,3  셋다 같다.

 

4. 전개 구문 ( spread operator)

현 구조를 버리고 새 구조를 만들때 사용한다.

기존에 있던 객체의 중괄호를 풀어서 새로운 중괄호를 만들 수 있게 해줌

구조분해할당과 함께 많이 사용되는 ES6 문법 중 하나

 

let arr = [3, 4, 5];

console.log(arr);  // [ 3, 4, 5 ]

console.log(...arr);  // 3 4 5

let newArr = [...arr, 6];  // << 전개 구문

console.log(arr);   // [ 3, 4, 5 ]

console.log(newArr);  // [ 3, 4, 5, 6 ]

// 객체에서의 전개구문

 

let user = {

    name : "zxc",

    age : 25

}

let user2 = {...user}

console.log(user);  //  { name: 'zxc', age: 25 }

console.log(user2);   //  { name: 'zxc', age: 25 }

 

5. 나머지 매개변수

...로 args를 명시해 줘야 나머지 매개변수 라는걸 인지할 수 있다.

function examplerFunc (a, b, c, ...args){

    console.log(a, b, c);  //  1 2 3

    console.log(...args);  //  4 5 6 7

}

examplerFunc(1, 2, 3, 4, 5, 6, 7);

 

6. 템플릿 리터럴

백틱 = ``

자바스크립트 코드나 변수도 들어갈 수 있다. ${} 안에 넣으면 된다.

멀티 라인을 지원한다.

 

const testValue = "안녕하세요!";

console.log(`Hello World ${testValue}`);  //  Hello World 안녕하세요!

// 멀티 라인

console.log(`

    Hello

        My name is Javascript!!!!

        Nice to meet you!!!

`);

   //   Hello
        My name is Javascript!!!!

        Nice to meet you!!!

 

7. 일급 객체로서의 함수 (객체로서 자바스크립트에 존재하기도 한다.)

다른 객체들과 일반적으로 같다고 생각해도 된다.

 

7 - 1 변수에 함수를 할당 가능 (다른 언어에는 말이 안되는 특징)

const sayHello = function(){

    console.log('Hello!');

};

 

sayHello 라는 변수로 함수 호출이 가능(객체처럼)

함수가 마치 값으로 취급된다.

함수가 나중에 사용될 수 있도록 되어있다.

 

7 - 2 함수를 인자로 다른 함수에 전달할 수 있다.

7 - 2 - 1 콜백함수 : 매개변수로써 쓰이는 함수

7 - 2 - 2 고차함수 : 함수를 인자로 받거나 return하는 함수

function callFunction (func) {

    // 매개변수로 받은 변수가 사실 함수다.

    func();

}

const sayHello = function() {

    console.log("Hi!");

};

callFunction(sayHello);    //  Hi!

 

7 - 3 함수를 반환할 수 있다.

function createAdder(num) {

    return function(x) {

        return x + num;

    }

}

// const addFive = createAdder(5);  // >> 이 코드를 아랫줄로 표현

const addFive = function(x) {

    return x + 5;

}

console.log(addFive(10));  //  15

 

8. 일급 객체로서의 함수 (2)

const person = {

    name : 'Yeon',

    age : 26,

    isMarried: false,

    // sayHello : () => {  // 화살표 함수는 this 를 바인딩 하지 않는다.

    //     console.log(`Hello, My name is ${this.name}`);

    // }

    sayHello : function(){  // 윗줄은 화살표 함수로 바꾼것

    //     console.log('Hello, My name is ' + this.name);  // >> 밑에줄 템플릿 리터럴로 바꾼것

        console.log(`Hello, My name is ${this.name}`);

    },

};

person.sayHello();  //  Hello, My name is Yeon

 

8 - 1 배열의 요소로 함수를 할당하는 것

const myArr = [

    function(a, b) {

        return a + b

    }, // 0번째 요소

    function (a,b) {

        return a - b

    }, // 1번째 요소

];

// 더하기

console.log(myArr[0](1, 3));

// 빼기

console.log(myArr[1](10, 7));

 

function multiplyBy(num) {

    return function(x) {

        return x * num;

    };

}

function add(x, y) {

    return x + y;

}

const multiplyByTwo = multiplyBy(2);

// const multiplyByTwo = function(x) {

//     return x * 2;

// };

const multiplyByThree = multiplyBy(3);

// const multiplyByThree = function(x) {

//     return x * 3;

// };

 

const result = add(multiplyByTwo(10), multiplyByThree(20));

console.log(`FINAL => ${result}`);  //  FINAL => 80

 

9. Map, Set

9 - 1 Map, Set의 목적

데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 만들어졌다. ( 기존의 객체 또는 배열보다)

 

9 - 2 Map

Key에 어떤 데이터타입(유형)도 다 들어올 수 있다. 키가 정렬된 순서로 저장되기 때문에

 

const myMap = new Map();

 

myMap.set('key', 'value');

 

myMap.get('key');

 

console.log(myMap.get('key'));  //  value

9 - 2 - 1 기능

검색, 삭제, 제거, 여부 확인

 

9 - 2 - 2 Map의 반복 (Iterator)

방법 : keys, values, entries

const myMap = new Map();

myMap.set('one', 1);

myMap.set('two', 2);

myMap.set('three', 3);

(1)

console.log(myMap.keys());

for (const key of myMap.keys()){  // 순회를 돌면서 출력

    console.log(key);

}

(2)

console.log(myMap.values());

for (const value of myMap.values()) {

    console.log(value);

  }

(3)

console.log(myMap.entries());

for (const entry of myMap.entries()) {

    console.log(entry);

}

(4)

console.log(myMap.size); // map의 길이

console.log(myMap.has("two")); // key 기반 검색

 

  // console.log (1) 내용

[Map Iterator] { 'one', 'two', 'three' }
one
two
three

 

// console.log (2) 내용
[Map Iterator] { 1, 2, 3 }
1
2
3

 

// console.log (3) 내용
[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
[ 'one', 1 ]
[ 'two', 2 ]
[ 'three', 3 ]

 

// console.log (4) 내용
3
true

 

 

9 - 3 Set

고유한 값을 저장하는 자료구조

값만 저장한다. (벨류만)

키는 저장하지 않는다.

값이 중복되지 않는 유일한 요소로만 구성된다. (집합 느낌)

값 추가, 검색, 값 삭제, 모든값 제거, 존재 여부 확인

 

const mySet = new Set();

mySet.add("value1");

mySet.add("value2");

mySet.add("value3");

mySet.add("value4");

mySet.add("value5");

console.log(mySet.size);  //  5

console.log(mySet.has("value1"));   //  true

console.log(mySet.has("value2"));   //  true

console.log(mySet.has("value3"));   //  true

console.log(mySet.has("value6"));   //  false

// Iterator (반복)

for(const value of mySet.values()) {

    console.log(value);

}

 

  //  value1
      value2
      value3
      value4
      value5

 

마무리

문법이 ES6버전으로 바뀐후 새로 추가된 문법에 대해 정리해 보았다. ( 화살표 함수, 삼항 연산자 제외)

문법 설명듣고 예시만 보니깐 아직은 이용하는 문제들을 풀이하는데에 시간이 오래걸린다.

알고리즘 문제를 풀어보면서 활용을 많이 해보아야 겠다.