[항해99_JavaScript 문법 종합반] 2주차 - 1 (구조 분해 할당, 나머지 매개변수 , 일급객체(함수), 배열의 요소로 함수 할당, Map, Set)

 

 

구조 분해 할당

 

말은 거창하지만 그냥 배열이나 객체를 쪼개서 하나하나를 변수에 할당해주는걸 말한다.

//구조분해할당 : destructuring(de + structure + ing)
//배열이나 객체를 쪼개서 할당

//(1) 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1);
console.log(value2);

let arr = ["value1", "value2", "value2"];
let [a,b,c,d=4] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d); //암것도 안넣으면 undefined, 초기값도 넣을 수 있음(d=4)

//(2) 객체인 경우
let user = {
    name: 'abc',
    age:30
};

let { name, age } = user; //user안에 있는 값을 왼쪽 let {name, age}와 같은 키에 맞는 값들을 저장함.
console.log('name => ',name);
console.log('age => ',age);

//새로운 이름으로 할당 : 값 위치에 변수를 넣어서 할당 가능.
let {name: newName,age: newAge} = user;

console.log(newName);
console.log(newAge);

let {name1, age1, birthday=1231 } = user;
console.log(name1);
console.log(age1);
console.log(birthday);//암것도 안넣으면 undefined, 초기값도 넣을 수 있음 birthday=1231)

 

 

 

---

나머지 매개변수

매개변수가 몇 개가 들어올지 모를 때 사용. 

//단축 속성명 : property shorthand
const name = "nbc";
const age = 30;

//key-value 변수명이 동일하면 생략이 가능.
const obj = { name:name, age: age }//값의 위치에 변수사용가능. 키와 값의 이름이 같을 수 있음. 그럴때 하나만 써주는게 가능함. (name:name을 name만 사용가능. 이걸 단축 속성명이라고 함.) 아래처럼 사용가능.
// const obj = { name, age }

//전개 구문 = spread operator
//destructuring할 때 가장 많이 사용되는 es6 문법 중 하나:
//배열
//기존 배열을 풀어서 새로운 배열을 만들 수 있음.
let arr = [1,2,3];

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

//객체_객체도 spread operator 사용가능
let user = {
    name: 'nbc',
    age: 30
}

let user2 = {...user};
console.log(user);
console.log(user2);


//나머지 매개변수 (rest parameter) ...args //매
function exampleFunc (a,b,c,...args) {
    console.log(a,b,c);
    console.log(...args);
}
exampleFunc(1,2,3,4,5,6,7);

//템플릿 리터럴(Template Literal)
console.log(`Hello World ${3+3}`);
console.log(`
    Hello
        My name is blabla blablablal~~
`); //멀티라인 쌉가넝~

 

 

 

---

일급객체(함수) 

 

 

//일급객체로서의 함수(1)

//(1) 변수에 함수를 할당할 수 있음.
//함수가 마치 값으로 취급된다.
//함수가 나중에 사용될 수 있도록 조치가 됨.

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

//(2)함수를 인자로 다른 함수에 전달 할 수 있음.
//(2)-1. 콜백함수 : 매개변수로써 쓰이는 함수(고차함수의 한 종류)
//(2)-2. 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
    func();
}

callFunction(sayHello);

//(3) 함수를 반환할 수 있음.
function createAdder(num) {
    return function(x) {
        return x + num;
    }
}

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

 

// 일급객체로써의 함수(2)
const person = {
    name: "John",
    age: 31,
    isMarried: true,
    sayHello: function() {
        console.log(`Hello. My name is ${this.name}`);
    // sayHello: () => console.log(`Hello. My name is ${this.name}`)
    // 화살표함수는 this를 바인딩하지 않음★★★★★★★★★★★
    // 그래서 위의 화살표함수를 리턴하면 this.name 위치에서 undefined가 나옴!
    }
}

person.sayHello();

 

★ 화살표 함수는 this 를 바인딩 하지 않아서 화살표 함수 내에서는 this.변수 를 사용할 수 없다.

 

---

배열의 요소로 함수 할당

 

 

// 배열의 요소로 함수를 할당

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

console.log(myArr[0](10, 20)); //배열 내 함수요소의 매개변수를 이렇게 전달하면됨.
console.log(myArr[1](10, 20));

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

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

const mutiplyByTwo = mutiplyBy(2);
// 위의 코드는 num에 2를 집어넣음으로써 함수를 여러개 만들지않고도 아래와 같이 사용할 수 있음. 재사용성이 올라감. 
// const mutiplyByTwo = function(x) { return x * 2 };


const mutiplyByThree = mutiplyBy(3);
// const mutiplyByTwo = function(x) { return x * 3 };

console.log(mutiplyByTwo(3));
console.log(mutiplyByThree(3));
// const mutiplyByTwo = mutiplyBy(2)(3);
// ㄴ위와 같이 매개변수를 넣어서 사용해도 됨!

const result = add(mutiplyByTwo(10), mutiplyByThree(20));
console.log(`Final => ${result}`);

 

---

Map

 

//Map
//JS -> 객체, 배열로 현실 세계를 반영하기 어려움이 있음.
//그리하여 등장한 Map, Set 의 자료구조
//Map, Set의 목적: 기존의 객체 또는 배열보다 데이터의 구성, 검색, 사용을 효율적으로 처리.

//(1) Map
// - key / value
//  ㄴkey에 어떤 데이터타입(유형)도 다 들어올 수 있음.
//  ㄴMap은 키가 정렬된 순서로 저장되기 때문.
//  ㄴ 기능 ( 검색, 삭제, 제거, 여부 확인)

const myMap = new Map();
// set과 get은 칭구칭구
myMap.set('key', 'value'); //값 입력 
myMap.get('key'); //값 조회


// ㄴMap은 대량 데이터를 다루는 자료구조. -> 반복하는게 중요함!!!!
// 반복을 위한 메소드 -> keys, values, entries

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

console.log(myMap.keys()); // 키만
console.log(myMap.values()); // 값만
console.log(myMap.entries()); // 키-값 모두

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

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

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

console.log(myMap.size); // map의 사이즈(길이)
console.log(myMap.has("two")); // key 기반 검색

 

 

 

---

Set

 

 

//Set (집합이라고 생각해봐)
// ㄴ고유한 값을 저장하는 자료구조
// ㄴ값만 저장.(키를 저장X)
// ㄴ값이 중복되지 않는 유일한 요소로만 구성
// ㄴ 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
mySet.add('value4');
mySet.add('value5');
mySet.add('value6');
mySet.add('value7');

console.log(mySet.size); // 2 (중복이 허용되지 않은 자료구조.)
console.log(mySet.has("value2"));

//Iterator 반복자
for (const value of mySet.values()){ //Set에서는 value밖에 없으니 vlues() 메소드를 이용해서 값에 접근. (values()괄호 잊지말자.)
    console.log(value);
}