TIL - JavaScript 기초문법 정리 3 (ES6 문법 정리, 일급객체로서의 함수, Map과 Set)

개미는 뚠뚠 오늘도 뚠뚠 강의내용을 정리한다 뚠뚠

강의내용을 정리하는 TIL은 이상적이지 않다고 했지만 나는 오늘 본 강의를 다시한번 정리하는 시간이 필요하고,
언제든 내 입맛대로 다시 들여다 볼 공간도 필요하다...... 

---

ES6

1. 2015년도 이전에는 var 온리였지만, 이후 es6 부터는 let은 변수를, const는 상수를 담당하게 된다.

: const는 재할당이 안되고, let은 재할당이 된다는 것, 또한 var은 선언이 다시 가능하지만 const와 let은 선언 다시 불가하다는 것 다시한번 기억하고 넘어가자.

 

2. arrow function

function add() {};

var add = function () {};

var add = (x) => {
    return 1;
};

var add = x => 1;

 

3. 삼항 연산자

// condition ? true인경우 : false인 경우

console.log(true ? "참" : "거짓");      //참
console.log(false ? "참" : "거짓");     //거짓 
console.log(1 === 1 ? "참" : "거짓");   //참
console.log(1 !== 1 ? "참" : "거짓");   //거짓

---

구조분해할당 : destructuring

이는 배열이나 객체의 속성을 해체하고 다시 할당하는 것!

1. 배열의 경우

let [value1, value2] = [1, "new"]
console.log("1", value1);   // 1 1
console.log("2", value2);   // 2 new

// let arr = ["value1", "value2", "value3"];
// let [a, b, c, d] = arr;

// console.log(a); // value1
// console.log(b); // value2
// console.log(c); // value3
// console.log(d); // undefined <- 없으니까

let arr = ["value1", "value2", "value3"];
let [a, b, c, d = 4] = arr; 
//d의 초기값을 설정해 value가 들어오지 않을 때는 초기값으로 출력하게 할 수 있다.

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // 4 <- 설정된 초기값 출력

 

2. 객체인 경우

let user = {
     name: "nbc",
     age: 30
};

// 위 객체를 구조분해할당 
// : 오른쪽에 있는 각각의 요소를 분해해서 왼쪽에 있는 각각의 변수에 할당해준다.
let { name, age } = {
    name: "nbc",
    age: 30
};

console.log("name => ", name);  // name =>  nbc 출력 - string type
console.log("age => ", age);    // age =>  30 출력 - number type

새로운 이름으로 할당하기

let user = {
    name: "nbc",
    age: 30
};

// let {name: newName, age: newAge} = user;
// console.log("newName => ", newName);    // newName =>  nbc
// console.log("newAge => ", newAge);      //newAge =>  30

let {name, age, bday} = user;
console.log(name);
console.log(age);
console.log(bday);  //undefined

---

단축속성명 : property shorthand

const name = "nbc";
const age = "30";

// key - value pair 좌측은 key 오른쪽은 value(오른쪽이 실질적인 데이터!) 기억!
const obj = { name, age };
const obj1 = { name: name, age: age };
// ㄴ배열같아 보이지만 객체! 왜냐하면 key value가 똑같으면 위 라인처럼 생략할 수 있다.

---

전개 구문 = spread operator

destructuring과 함게 가장 많이 사용되는 es6 문법 중 하나!
기존에 있었던 객체를 spread 해주고 중괄호로 다시 묶을 수 있도록 해주는 문법이다.

let arr = [1, 2, 3];

let newArr = [...arr, 4];  // 원래 있었던 arr를 풀어서(전개) 다시 배열을 만들어준다.
console.log(arr);
console.log(newArr);    // [ 1, 2, 3, 4 ] 출력

// 객체
let user = {
    name: "nbc",
    age: 30
};

let user2 = { ...user }; // 위 객체 해체 온리

console.log(user);	// { name: 'nbc', age: 30 }
console.log(user2);	// { name: 'nbc', age: 30 }

---

나머지 매개 변수 : rest parameter

function exampleFunc(a, b, c, ...args) { //온점 3개로 명시해줘야만 나머지 매개변수가 된다!
    console.log(a, b, c);   // 1 2 3
    console.log(...args);   // 4 5 6 7
    console.log(args);      // [ 4, 5, 6, 7 ]
}

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

---

Template Literal

console.log(`hello world`);
// <-백틱// 일반 ''와 거의 기능이 같지만 백틱(``) 안에는 변수나 연산도 들어갈 수 있다.

const testValue = "안녕하세요!";
console.log(`hello world ${testValue}`);
console.log(`
    hello
        my name is javaScript.
        template literal support Multi-line!
`); // 멀티라인을 지원한다.

//  출력
//	hello world 
//	hello world 안녕하세요!
//
//    hello
//        my name is javaScript.
//        template literal support Multi-line!

---

일급객체로서의 함수

1. 변수에 함수를 할당 가능

• 함수가 마치 값으로 취급된다.
• 함수가 나중에 사용될 수 있도록 조치가 되어있다.

const sayHey = function () {
    console.log('Hello!')
};

 

2. 함수를 인자로 다른 함수에 전달 가능

2-1. 콜백함수 : 매개변수로서 쓰이는 함수
2-2. 고차함수 : 함수를 인자로 받거나 return하는 함수

function callFunction(func) {
    // 매개변수로 받은 func, 즉 변수가 사실, 함수다.
    func();
}

const sayHello = function () {
    console.log('Hello!')		// Hello!
};

callFunction(sayHello);

 

3. 함수 반환 가능

function createAdder(num) {
    return function (x) {
        return x + num;
    };
}

const addFive = createAdder(5);
console.log(addFive(10));		// 15

---

일급객체로서의 함수 Ⅱ

const person = {
    name: 'John',       // string type 
    age: 31,            // number type
    isMarried: true,    // boolean type

    sayHello: function () {
        // console.log("hey, my name is " + this.name);
        console.log(`hey, my name is ${this.name}`); // template literal ver (``사용, javaScript 문법사용)
    }                  // 함수 type *객체의 value 값에는 어떤 type도 올 수 있다*


	// 화살표 함수 ver 
	// -> undefined 출력 왜냐하면, *화살표함수는 this를 바인딩하지 않는다.
	// sayhello: () => {
	//     console.log(`hey, my name is ${this.name}`);
	// } 

};

person.sayHello();

// 배열의 요소로 함수를 할당하는 경우

const myArr = [
    function (a, b) {
        return a + b;
    }, function (a, b) {
        return a - b;
    }
];

// 더하기 호출
console.log(myArr[0](1, 3));    // 4

// 빼기 호출
console.log(myArr[1](10, 7));   // 3

function multiplyBy(num) {
    return function (x) {
        return x * num;
    }
}

function add(x, y) {
    return x + y;
}

const multiplyByTwo = multiplyBy(2);
// 위 라인은 아래와 같다.
// const multiplyByTwo = function multiplyBy(2) {
//     return function (x) {
//         return x * 2;
//     }
// }

const multiplyByThree = multiplyBy(3);
// 위 라인은 아래와 같다.
// const multiplyByTwo = function multiplyBy(3) {
//     return function (x) {
//         return x * 3;
//     }
// }

console.log(multiplyByTwo(10));		// 20
console.log(multiplyByThree(10));	// 30

// 위 console.log 안에서 multiplyByTwo 옆에 ()괄호를 열어주는건 해당 함수를 실행한 값을 보여달라는 뜻이고
// 그 괄호안에 10을 넣어 줌으로써 최상단 multiplyBy function의 x변수가 10이 되면서
// 두 console은 각각 20, 30의 값이 나온다.

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(`FINAL => ${result}`);	// FINAL => 40

---

Map & Set

JavaScript는 그동안 객체와 배열로 많은 프로그램을 만들어왔는데, 그럼에도 현실세계를 반영하기에는 어려웠다

그러면서 좀 더 효율적으로 데이터를 처리하기 위한 추가적인 자료구조가 등장했는데, 그거시 Map, Set.

 

1. Map

• Key / Value
• Key에 어떤 데이터타입도 다 들어올 수 있다.
• Map은 키가 정렬된 순서로 저장되기 때문
• 기능 -> 검색, 삭제, 제거, 여부 확인

const myMap = new Map();
myMap.set('key', 'value');

// ...
// ...

myMap.get('key') // set과 get은 늘 세트로 구성되며 set에서 지정해준 값은 get으로 불러온다
// 반복을 위한 method에는, keys, values, entries가 있다.
// Iterator(반복자)를 빼놓고 설명할 수 없음

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

console.log(myMap.keys()); 
for (const key of myMap.keys()){
    console.log(key); // [Map Iterator] { 'one', 'two', 'three' }
}

console.log(myMap.values()); 
for (const value of myMap.values()){
    console.log(value); // [Map Iterator] { 1, 2, 3 }
}

console.log(myMap.entries()); // 전체내역을 배열로 감싸준다
for (const entry of myMap.entries()){
    console.log(entry); // [Map Iterator] { 1, 2, 3 }
}

console.log(myMap.size); // map 사이즈(길이) - 3 출력
console.log(myMap.has("two")); // key 기반 검색 - true 출력

 

2. Set

• 고유한 값을 저장하는 자료구조이다.
• 값만 저장한다.
• 키를 저장하지는 않는다.
• 값이 중복되지 않는 유일한 요소로만 구성된다. ->  값 추가, 검색, 갑 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set();
//set에서는 key가 없고 value만!
// 왜냐하면 이건 집합이니까.
// 어디서든 들어갈 수 있고 유일한 요소이므로 중복되지 않도록 유의할 것!
mySet.add('value1');
mySet.add('value2');
mySet.add('value2');
mySet.add('value3');
mySet.add('value4');

console.log(mySet.size); // 2
// 유일한 요소로만 구성되니까. 위 value 값 중 value2가 겹치므로 나머지 하나는 카운트하지 않는다.

console.log(mySet.has("value1")); // true
console.log(mySet.has("value2")); // true
console.log(mySet.has("value3")); // false *없으니까~~

// Iterator, 반복
for (const value of mySet.values()) {
    console.log(value);
}
// value1
// value2
// value3
// value4