이번 주차는 JS 문법을 배운다.
새로 알게된 내용을 조금 정리해보고 싶다.
오브젝트
오브젝트 복사
let person = {
name: "John",
age: 30,
city: "New York"
}이라는 person 객체가 하나 선언 및 할당되어 있다.
let person2 = {};
Object.assign(person2, person);하면 Object를 복사할 수 있다.
ES6
ES6 는 2015년에 자바스크립트에서 새롭게 발표한 문법과 기능의 버전이다.
아래는 해당 문법과 기능에 대해 정리한다.
let 과 const
기존에 사용했던 var 키워드에서 let, const 를 추가하였다.
let은 할당 이후 재할당이 가능한 변수const는 할당 이후 재할당이 불가능한 변수이다.
var 와 ES6 에서 나온 let, const의 큰 차이점은
선언 이후에 재선언이 불가능하다는 점.
var num = 1;
var num = 2;처럼 var는 재선언이 가능하지만 let, const는 불가능하다.
화살표 함수
기존에 사용했던 함수 방식은 function 이라는 키워드가 필요했고 매개변수, 기능에 대한 구분이 필요했다.
ex)
function Func() {}
var Func = function () {}화살표 함수는 화살표를 통해 괄호를 생략할 수 있고, function 키워드를 작성하지 않고 사용할 수 있다.
const Func = (x) => { return 1; }
const Func = x => return 1;이렇게 매개변수와 기능에 각각 구문이 하나라면 괄호를 생략이 가능하다.
구조분해할당 (destructuring)
배열이나 객체의 속성(프로퍼티)을 분해하여 하나하나 값을 할당하는 것을 의미한다.
예를 들어,
1) 배열의 경우
let [value1, value2] = [1, "new"];
console.log("1 => ", value1);
console.log("2 => ", value2);
let arr = ["value1", "value2", "value3"];
let [a,b,c, d=4] = arr;
console.log("a => ", a);
console.log("b => ", b);
console.log("c => ", c);
console.log("d => ", d);2) 객체인 경우
let {name, age} = {
name: "John",
age: 30
};
console.log("name => ", name); // string
console.log("age => ", age); // number이런 식으로 name과 age 키값에 value를 바로 할당이 가능
let user = {
name: "Kahn",
age: 32
};가 추가로 선언되어 있을 때,
let {
name: NewName,
age: newAge
} = user;
console.log("NewName => ", NewName); // Khan
console.log("newAge => ", newAge); // 32
console.log('-----------------------');
let {
NewName2,
NewAge2,
birth = "today",
} = user;
console.log("NewName => ", NewName2); // Khan
console.log("newAge => ", NewAge2); // 32
console.log("newAge => ", birth); // today이런식으로 할당 및 호출이 가능하다.
어떻게 활용할 수 있을지는 잘 생각나지 않는다.
단축 속성
key, value의 값이 같을 경우 사용할 수 있다.
예를 들어,
const name = '홍길동';
const age = 30;이 선언 및 할당되어 있을 때, 새로운 객체를 선언 및 할당한다고 해보자
const obj = {
name:name,
age:age,
}로 해야하지만 보다시피 key:value 에서 key 와 value가 같은 것을 확인할 수 있다.
이럴 때에 key를 생략하면 동의구문으로 사용 가능하다.
const obj = {
name,
age,
}전개 구문
Spread Operator라고 하며 destructuring과 함께 많이 사용되는 ES6 문법 중 하나라고 한다.
itterable 한 데이터타입에 사용 가능하다.
let arr = [1,2,3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3 이런 형태로 배열 복제를 하고, 값을 추가하고 싶다면
let newArr = [...arr, 4];
console.log(newArr); // [1, 2, 3, 4]로 하면 된다. 객체도 동일하다.
나머지 매개변수
함수에서도 Spread Operator를 사용 가능하다.
function exampleFunc (a,b,c, ...args) {
console.log(...args);
console.log('-------------');
console.log(args);
}이런 식으로 사용하게 되면, a, b, c 매개변수보다 더 많은 매개변수가 입력될 경우
모든 매개변수값을 출력되게 하는 로직이다.
만약 exampleFunc(1,2,3,4,5,6,7); 을 했다면,
4 5 6 7
----------------
[4, 5, 6, 7]이 출력된다.
템플릿 리터럴 (Template Literal)
문자열과 비슷하지만 백틱(`) 을 사용하여 묶게 된다.
백틱 안에는 html 코드가 들어갈수도, 변수가 들어갈수가 있듯 다양한 코드를 삽입할 수 있다.
웹개발을 하면서 자주 사용했었는데 이게 2015년 ES6 부터 나왔다는게 조금 놀라웠다.
그 전에는 어떻게 했던걸까...
일급 객체 (first class object)
다른 객체들에 일반적으로 사용이 가능한 객체를 의미한다.
이것으로 인해 함수를 매우 유연하게 사용이 가능하다.
특히 함수안에 함수, 함수의 매개변수로 함수, 함수의 리턴값으로 함수처럼
콜백함수, 고차함수를 구현할 수 있다.
콜백함수 : 매개변수로써 쓰이는 함수
고차함수 : 함수를 인자로 받거나 return하는 함수
Map 과 Set
대형 데이터들을 처리하기 위한 새로운 자료구조, 데이터 타입이다.
기존 객체보다 데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 사용된다.
Map
- Key, Value
: Key에 어떤 데이터타입(유형) 이든 들어올 수 있다.
: Map은 키가 정렬된 순서로 저장되기 때문에 추가한 순서대로 반복할 필요가 없다.
Key, Value가 나누어지기 때문에 반복 작업을 하고 싶을 때 for ~ of 문을 사용한다.
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);
// key 반환
console.log(myMap.keys());
for (const key of myMap.keys()) {
console.log(key);
}
// value 반환
console.log(myMap.values());
for (const value of myMap.values()) {
console.log(value);
}
// entry 반환
console.log(myMap.entries());
for (const entry of myMap.entries()) {
console.log(entry);
}사이즈나 탐색도 가능하다.
console.log(myMap.size); // 3
console.log(myMap.has("two")); // trueSet
고유한 값을 저장하는 자료구조.
값만 저장하고 키는 저장하지 않는다.
중복되지 않는 유일한 값으로만 구성
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value2');
mySet.add('value4');
mySet.add('value5');
mySet.add('value7');
mySet.add('value9');
// 7개가 아닌 6개가 출력, 똑같은 값을 추가하면 추가되지 않는다. (유일 값)
console.log(mySet.size);
console.log(mySet.has("value1")); // true
console.log(mySet.has("value2")); // true
console.log(mySet.has("value3")); // falseSet은 키가 없기 때문에 value 만 반복 및 탐색할 수 있다.
for(const value of mySet.values()) {
console.log(value);
}