2023.10.13. TIL JavaScript 2주차

A. ES6

1. 구조분해할당

(1) 배열의 경우

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

let [a, b] = arr;

console.log(a, b);

값을 할당해줄 수 있다.

 

(2) 객체인 경우

1번 예시

let {name, age} = {

    name: "abc",

    age: 30,

};

console.log(name);

console.log(age);

각 순서에 맞게 요소를 할당한다.

리스트가 초과되면 이후 데이터는 undefined로 표기된다.

 

2번 예시

let user = {

    name: "abc",

    age: 30,

};

let {name: newName, age: newAge} = user;

console.log(newName);

console.log(newAge);

name이라는 같은 이름의 객체에 새로운 이름으로 할당할 수 있다.

 

3번 예시

let user = {

    name: "abc",

    age: 30,

};

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

console.log(name);

console.log(age);

console.log(birthday)

값이 undefined로 할당이 안되는 경우가 있을 때 미리 초기값을 지정해서

undefined가 아닌 지정된 데이터로 반환할 수 있다.

 

2. 단축속성명

key - value가 똑같으면 생략할 수 있다.

const name = "abc";

const age = "30";

const obj = {name, age};

const obj1 = { name: name, age: age};

console.log(obj, obj1);

obj와 obj1은 사실 똑같은 데이터이다.

위 변수의 이름이 같기 때문에 생략할 수 있어서 단축시켰을 뿐이다.

겉으로 봐서는 배열이지만 객체이다.

 

3. 전개 구문

let arr = [1, 2, 3];

let newArr = [...arr, 4];

객체 병합인 ... 을 이용해서 새로운 변수에 이전 변수 데이터를 간편하게 넣어줄 수 있다.

 

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

    console.log(a, b, c);

    console.log(...args);

}

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

args는 이후 추가로 값이 더 들어올 수 있다는 것을 암시하는 것

여기에 ... 을 붙여서 이 함수에 추가로 들어오는 데이터를 풀어서 넣게된다.

 

4. 템플릿 리터럴

백틱 (``)을 넣으면 같은 문자열이지만 이 안에는 자바스크립트 코드가 들어갈 수 있게된다.

$와 중괄호{}를 넣어주면 문자열 사이에 코드를 넣을 수 있게 된다.

console.log(`Hello World ${3 + 3} 이렇게`);

추가로 멀티 라인을 지원한다.

console.log(`

    Hello

        My name is

                Kyung Wook Lee

`);

return :   

 Hello
        My name is
                Kyung Wook Lee

이렇게 기존 문자열에서 지원하지 않는 줄바꿈을 인식해서 리턴값을 돌려준다.

 

 

B. 일급 객체 (First-class Object)

다른 객체들이 일반적으로 적용 가능한 연산을 모두 지원하는 객체이다.

 

1. 특징

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

함수가 나중에 사용할 수 있도록 마치 값으로 취급된다. 

 

▶ 함수를 인자(매개변수)로 다른 함수에 전달할 수가 있다.

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

고차함수 : 함수를 인자로 받거나 retrun 하는 함수

 

▶ 함수를 반환할 수 있다.

 

▶ 배열의 요소로 함수를 할당할 수 있다.

const myArr = [

    function (a, b) {

        return a + b

    },

    function (a, b) {

        return a - b

    },

];

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

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

이렇게 인덱스를 통해 원하는 함수를 불러올 수 있다.

 

 

 

C. Map, Set

JavaScript의 한계를 보완하기 위한 추가적인 알고리즘

데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 나온것.

 

1. Map

Key - Value

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

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

 

get과 set은 페어로 생각하면 편리하다.

set : 저장

get : 가져오기

const myMap = new Map();

myMap.set("one", 1);

myMap.set("two", 2);

myMap.set("three", 3);

console.log(myMap.values());

for (const key of myMap.keys()) {

    console.log(key)

}

이런식으로 for of 문을 통해 반복할 수 있다.

console.log(myMap.size);

console.log(myMap.has("two"));

size를 통해 데이터의 개수를 셀 수 있고,

has를 통해 데이터의 일치 여부를 boolean형태로 확인할 수 있다.

 

 

2. Set

 

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

값만 저장하고 키는 저장하지 않는다.

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

const mySet = new Set();

mySet.add("value1");

mySet.add("value2");

console.log(mySet.size);

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

size와 has는 똑같이 사용되고,

추가할 땐 add를 사용한다.

 

console.log(mySet.size);

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

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

    console.log(value);

}

똑같이 for of 문도 사용 가능하다.

for of 문을 사용할 땐 values는 value, keys는 key, entries는 entry로 해야 값이 나온다.