[JS] ES6 (3)

Map

map의 기능

값과 키를 한번에 저장

let map = new Map();
exam.set("kor", 10);
exam.set("eng", 10);
exam.set("math", 10);

for(let [k,v] of exam) // exam 대신 exam.entries()로해도 같음
	console.log(`${k}:${v}`);

k,v를 배열 형식으로 나타내준다.
for-of를 통해 k(key)와 v(value)값을 출력한다.

let map = new Map([1,"hello"],[2,"hi"],[4,"okay"]);

for(let [k,v] of exam)
	console.log(typeof k);
	console.log(`${k}:${v}`);

이렇게 해도 잘 나온다.

typeof를 통해 k값의 형식을 볼 수 있다.

Rest Parameters

print(2,3); // 매개변수의 개수와 같아야한다 ?
print(2,3,"hello",5); // JS는 아니다! 남은것이 rest !

function(x,y){
	console.log(x);
    console.log(y);
    
    console.log(arguments[2]);
    console.log(arguments[3]);
}

값들은 arguments에 저장된다. (x는 arguments[0], y는 arguments[1]에 저장)

x,y는 그저 별칭일 뿐이다.

function print(x,y,...values){
	console.log(x);
    console.log(y);
    
    console.log(values[0]);
    console.log(values[1]);
}

그런데 x,y 이외의 것을 values로 하게 되면 남은 것들이 values[ ]에 들어간다.

여기서 values[0]은 남은 것들중 0의 index를 갖는다는 의미다.

function print(x,y,...values){
	console.log(`${x}, ${y}`);
    console.log(`${arguments[0]},${arguments[1]}`);
    
    for(let i=0; i<values.length; i++)
    	console.log(values[i]);
}

print(2,3,5,6,7);

이처럼 values와 for문을 이용하면 나머지만 이용할 수 있다.

Spread Operator

function print(nums){
	console.log(nums[0]);
	console.log(nums[1]);
	console.log(nums[2]);
}

let nums = [2, 4, 6];
print(nums);

nums가 아닌 x,y,z가 매개변수가 됐을때,

function print(x, y, z){
	console.log(x);
	console.log(y);
	console.log(z);
}

let nums = [2, 4, 6];
print(nums[0], nums[1], nums[2]); 
→ print(...nums);

print(nums[0], nums[1], nums[2]);를 print(...nums);로 바꿔보자.

nums들이 흩뿌려진다.

let set = new Set([2,4,6]);
let nums = [...set];

담은것을 다시 흩뿌릴수 있다.

map도 마찬가지다.

let map = new Map();
map.set("id",3);
map.set("title","hello");

let temp = [...map];
console.log(temp[0][0]);

id가 출력된다.

DefaultValue의 이전방식과 현재방식

기본 값이 없던 함수

function add(x,y){
	return x+y;
}
console.log(add(2,3)); → 5
console.log(add(1)); → none

||는 어떻게 출력이 되는걸까?

console.log(true || false);

true 출력

console.log(5 || 2);

5 출력

console.log(0 || 2);

2 출력

console.log(null || 2);

0,null, undefined가 앞에 오면 뒤의 값이 출력된다.

그래서

function add(x,y){
	x = x || 0;
    // x에 유효하지 않은 값이 오면 0으로 처리했다.
    y = y || 0;
    // y에 유효하지 않은 값이 오면 0으로 처리했다.
	return x+y;
}
console.log(add(1)); → 1

x || 0이고 x에 0, null, undefined가 오면 x=0이 된다.

function add(x=0 ,y=0){
	return x+y;
}
//x나 y에 유효하지 않은 값이 오거나 값이 없을때에는 0이 된다.

console.log(add(1)); → 1

매개변수에 직접 입력해줘도 기본값이 설정된다.

function add(x, y=10, z){
	console.log(x+","+y+","+z);
}

console.log(add(10, null, 30));

이렇게하면 y에는 기본값이 들어간다.

전달되지 않은 기본값은 arguments 개수에 잡힐까?

function print(x, y=10, z=20){
	console.log(`x:${x}, y:${y}, z:${z}`);
    console.log(arguments.length);
}

print(2);

arguments.length는 1이 나온다.

Arrows Functions

함수를 위임하는 방법 두 가지

1

windiw.addEventListener("load", function(){
	alert("로드 완료");
});

2

windiw.addEventListener("load", ()=>{
	alert("로드 완료");
    
});

this 이해하기

function print(){
	this.kor = 10;
	console.log("print" + this.kor);
    
    //묵시적으로 전역변수가 된다.
}

function Exam(){
	this.kor = 0;
    this.eng = 0;
    this.math = 0;
    
    //여기의 this는 new를 통해 개별화된 객체가 된다.
}

print();
let exam = new Exam(); // Exam 개체의 속성을 담아 exam에 대입
console.log(exam.kor); → 0
console.log(kor); → 10

exam.kor은 0이, kor은 10이 나온다.

간단한 값의 비교를 위한 함수의 사용 방법

let nums = [13, 4, 6, 1, 3, 26];

nums.sort();
console.log(nums);

이렇게 간단히 할 수도 있지만

function compare(x,y){
	return x-y;
}

nums.sort(compare);
console.log(nums);

이처럼 간단한 함수를 만들수도 있다.

이를 간단하게 하면

nums.sort((x,y)=>x-y);
console.log(nums);

함수를 만들지 않아도 된다.
변수를 두 개 이상 가지는 경우

var func1 = (x,y)=>{
	return x+y;
}

return만 있다면 중괄호를 빼자.

var func1 = (x,y)=> x + y;

변수를 한 개 가지는 경우

var func1 = (x)=>{
	return x;
}

매개변수가 하나일 때에는 소괄호를 없애자. (단, 하나도 없을 경우 소괄호를 써주자.)

var func1 = x=>x;