[TIL] 2주차 - es6 , 일급객체로서의 함수, Map, Set

* ES6 문법소개 및 실습

 

1. ES6

Js의 버전 중 하나로 2015에 발표. 대규모 문법적 향상이 및 변경이 있었음

 

2. let, const

es6 이전에는 var만 사용됐었음

let(변수) / const(상수) : 재할당 가능 / 불가능

 

3. 화살표함수

let functionName = () => {
	//main logic
}

한 줄일 때, ()와 {} 모두 삭제 가능

 

4. 삼항연산자

condition ? ture인경우 : false인 경우

5. 구조분해속성

배열이나, 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

 

1) 배열인 경우(순서가 중요)

let [value1, value2] = [1, "new"]

이렇게 각각할당이 가능!

let arr = ["value1", "value2", "value3"]; // 값
let [a,b,c] = arr; // 변수
// let [a,b,c] = ["value1", "value2", "value3"]; 와 똑같은 두 줄

이것도 가능

let arr = ["value1", "value2", "value3"]; // 값
let [a,b,c,d] = arr; // 변수
//위에 변수를 하나 더 추가함. 그러면 Js는 '어, 들어와야하는 변수의 값이 하나 없네'라고 판단
// d는 undefined 가 됨

이런 경우 undefined가 되는 걸 막기 위해 기본값을 셋팅해주면 됨

let arr = ["value1", "value2", "value3"]; // 값
let [a,b,c,d=4] = arr; // 변수
//d=4 기본값 셋팅, 값이 들어올 경우 그걸로 바뀜

 

2) 객체인 경우

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

let {name, age} = user;
//name과 age 라는 키가 구조분해할당이 되어 "abc"와 30이라는 값을 가지게 됨
//오른쪽에 있는 이 객체의 각각의 요소를 분해해서 왼쪽에 있는 name과age라는 각각의 변수에 할당해준다

console.log(name); // abe string임
console.log(age); //30 number임
//name과 age는 더이상 객체형태가 아니라 string와 number로 나오게 되는 걸 볼 수 있음

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

let {
	name: newName,
    age: newAge,
 } = user;
 // name의 값을 newName이라는 변수에 넣어달라, age의 값을 newAge라는 변수에 넣어달라 는 거임!
 // 그래서 여기서는 console.log할 때 아래와 같이 해야 위와 같은 결과가 나옴
 
 console.log(newName) // abc
 console.log(newAge) // 30

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

let {name, age, birthday} = user;
// 객체에 없는 키값을 넣어봄 그러면 배열과 똑같이 됨

console.log(name); // abe
console.log(age); // 30
console.log(birthday); // undefined

배열과 똑같이 없는 값을 받으려고 하면 undefined가 나옴

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

let {name, age, birthday="today"} = user;
// 배열과 같이 초기값 넣기 가능

console.log(name); // abe
console.log(age); // 30
console.log(birthday); // today

구조분해를 통해 받는 값에 birthday: "yesterday"와 같이 값이 들어가면 초기값 대신 들어간 값이 당연히 들어오게 됨. 말그대로 초기값은 초기값!

 

6. 단축 속성명 : property shorthand

1) 배열

const name = "abc";
const age = "30";

const obj = {
	name, // name:name
    age, // age:age
}
// 이와같이 이름이 겹치는 경우 과감하게 생략이 가능하다는 거임. 키 밸류가 똑같으면 생략이 가능하다!

7. 전개 구문 : spread operator

destructuring과 함께 가장 많이 사용되는 es6 문법 중 하나

let arr = [1,2,3];
console.log(arr) // [1, 2, 3]
console.log(...arr) // 1 2 3

...arr이 전개 구문 사용한 것! 어떨때 쓰이나? 아래참고

let Arr = [1,2,3] //여기에 4를 추가하고 싶을 때 push를 사용할 수도 있겠지만

let newArr = [...arr];
console.log(arr); //[1,2,3]
console.log(newArr); //[1,2,3]
//현재 둘이 같음 그러므로 아래와 같이 해주면

newArr = [...arr, 4]
console.log(newArr); // [1,2,3,4] 가 되는 거임! 풀렀다가 다시 묶어주니께

2) 객체

let user = {
	name: 'abc';
    age: 30,
};

lset user2 = {...user};

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

8. 나머지 매개변수(rest parameter)

function expleFunc(a,b,c,...args) {
	console.log(a,b,c);
    console.log(...args);
};
//매개변수의 갯수를 정확히 모를 때 ,...args 라고 명시해줄 수 있음

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

// 1 2 3
// 4 5 6 7

//스프레드 문법(...)을 빼주면
function expleFunc(a,b,c,...args) {
	console.log(a,b,c);
    console.log(args);
};
//매개변수의 갯수를 정확히 모를 때 ,...args 라고 명시해줄 수 있음

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

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

꼭 ...args로 명시해줘야함

 

9. 템플릿 리터럴(Template Literal)

백틱 사용, js 변수 멀티라인 지원

console.log(`Hello world ${3+3}`); // Hello world 6

let testVlaue = "안녕하세요"
console.log(`Hello world ${testValue}`); // Hello world 안녕하세요

console.log(`
	Hello
    	My name is Javascipt!!!
        
        Nice to meet you!!
 `);
 
 /*-
 	Hello
    	My name is Javascipt!!!
        
        Nice to meet you!!
 *-/
 //모양 그대로 나옴!!!!!! 개쩐다

---

* 일급 객체로서의 함수

일급객체(First-class Object) : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

즉, 그냥 객체와 같다는 거임

함수를 매우 유연하게 사용할 수 있음!!

 

1. 변수에 함수를 할당할 수 있다.

다른 프로그래밍 언어에서는 말도 안됨

함수를 마치 값처럼 취급할 수 있음.

함수가 나중에 사용될 수 있도록 조치가 됨. 

const sayHello = function() {
	console.log("Hello");
};

sayHello라는 변수에 함수를 할당함. 

 

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

1) 콜백함수 : 매개변수로써 쓰이는 함수

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

콜백함수는 고차함수의 한 종류라고 볼 수 있음

function callFunction (func) {
	//매개변수로 받은 변수가, 함수라는 것
	func();
 };
 
 const sayHello = function() {
 	console.log("Hello");
};

callFunction(sayHello);

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

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

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

4. 일급객체로써의 함수(2)

const person = {
	name:'John',
    age: 31,
    isMarried: true,
    sayHello: function() {
    	console.log(`Hello, My name is ${this.name}`);
    },
    //여기서 화살표 함수는 사용이 어려움. 화살표 함수는 this를 바인딩하지 않음. 화살표 함수로 다시 작성할시
    // this.name부분에 undefined가 뜸
 );
 
 person.sayHello(); // Hello, May name is John

5. 배열의 요소로 함수를 할당

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 multiplyByThree = multiplyBy(3);
 
 const result = add(multiplyByTwo(5), multiplyByThree(10));
 console.log(result); // 40

---

*Map

Js의 객체, 배열을 통하여 많고, 다양하고, 복잡한 프로그램들을 만들어옴

그럼에도 현실세계를 반영하기는 좀 어려움

그래서 Map, Set과 같은 추가적인 자료구조가 등장함

 

Map, Set의 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리 > 기존의 객체 또는 배열보다

 

1. Map

- Key / Value

- Key에 어떤 데이터타입(유형)도 들어올 수 있다

- Map은 키가 정렬된 순서로 저장되기 때문이다.

 

- 기능: 검색, 삭제, 제거, 여부 확인

- 기본적인 모양

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

//...
//...

myMap.get('key') //key로 검색가능 그래서 set과 get은 항상 pair다

- 대량데이터를 처리하기 위해 만들어진 자료구조이므로 반복이 중요함

 

- 반복을 위해 사용되는 method : keys, values, entries

1) iterator

- 위의 method를 사용할 수 있는 이유는, 이들이 다 iterator를 가지고 있는 덕분임

- iterator이란? 반복자라는 말임. 

- iterator 를 가지고 있으면 Js에서는 for... of 라는 걸 쓸 수 있음. 하나하나 돌면서 사용이 가능하다는 거임. 

 

2) 예시와함께 method 알아보기

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

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

for(const key of myMap.key()){
	console.log(key);
}

/*-
one
two
three
-*/

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

for(const value of myMap.values()){
	console.log(value);
}

/*-
1
2
3
-*/


console.log(myMap.entries()); // [Map Iterator] {['one',1], ['two',2], ['three',3]}

for(const entrie of myMap.entries()){
	console.log(entrie);
}

/*-
['one',1]
['two',2]
['three',3]
-*/

 

3) Map의 크기 확인

console.log(myMap.size); //3
//Map의 사이즈(길이)

 

4) Map의 특정 key 확인

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

---

*Set

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

값만 저장함. 키를 저장하지는 않음

값이 중복되지 않는 유일한 요소로만 구성된다

 

1. Set

1) 생성

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');

2) 사이즈 확인

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

3) 값의 여부

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

4) 반복

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
mySet.add('value5');
mySet.add('value8');

for(const value of mySet.values()) {
	console.log(value);
 }
 
 /*-
 value1
 value2 
 value3
 value5
 value8
 *-/
 
 // value만 있으므로 values()만 있음

 

- 관련 MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set