1. 각종 es6 문법 소개
(1) let, const
- let : 재할당은 가능 but, 재선언은 불가
let value = "value1"
console.log(value) // value1
value = "value2" // let없이 재할당 가능 !
console.log(value) // value2
let value = "value3" // let을 붙이면 재선언 불가능 ㅠ
//SyntaxError: Identifier 'value' has already been declared 라는 오류가 뜨게됨- const : 재할당, 재선언 둘 다 불가능 ! 초기값이 없으면 선언이 불가능하다.
const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1
value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.
const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared- var 는 재할당, 재선언 가능
(2) 화살표 함수 (Arrow Function)
- function이나 return 키워드 없이 함수를 만들기 가능
// ES5
function func() {
return true
}
// ES6
const func = () => true
const func = () => {
return true
}
() => {}
parm => {}
(parm1, parm2, ...parms) -> {}
// 익명 화살표 함수
() => {}(3) 삼항 연산자 (ternary operator)
// condition ? true인 경우 : false인 경우
condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓
console.log(2*2 === 4 ? "참" : "거짓") // 참
console.log(1 !== 4 ? "참" : "거짓") // 거짓(4) 구조 분해 할당 (Destructuring)
// 배열의 경우
let [value1, value2] = [1, "new"];
console.log("첫번째 벨류 =>", value1);
console.log("두번째 벨류 =>",value2);
let arr = ["value1", "value2", "value3"]; // value4가 있으면 4가 아닌 value4로 출력
let [a, b, c, d=4] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
// 객체의 경우
let user = {
name: "nbc",
age: 30
};
let {name, age} = user;
console.log("name =>", name)
console.log("age =>", age)
// 새로운 이름으로 할당
let user = {
name: "nbc",
age: 30
};
let {name : newname, age : newage } = user;
console.log("newname =>", newname);
console.log("newage =>", newage);
let user = {
name: "nbc",
age: 30 // birthday는 값이 없음
};
let {name, age, birthday } = user;
console.log(name)
console.log(age)
console.log(birthday) // 초기값이 없어 undefined 로 뜸
(5) 단축 속성명 (property shorthand)
- 객체의 key와 value 값이 같다면, 생략 가능
const name = "nbc"
const age = "30"
const obj = {
name,
age: newAge
}
const obj = {
name,
age
}(6) 전개 구문 (Spread)
- 배열이나 객체를 전개하는 문법. 구조분해할당과 함께 정말 많이 사용
let arr = [1, 2, 3];
let newarr = [...arr, 4];
console.log(arr); // [1, 2, 3]
console.log(newarr); // [1, 2, 3, 4]let user = {name : "mbc", age : 30};
let user2 = {...user}
console.log (user) // { name: 'mbc', age: 30 }
console.log (user2) // { name: 'mbc', age: 30 }// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}
user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2(7) 나머지 매개변수(rest parameter)
- 나머지 매개변수도 사용 빈도 많음 !!
function examplefunc(a, b, c, ...args) {
console.log(a, b, c);
console.log(args);
}
examplefunc(1, 2, 3, 4, 5, 6, 7); // 1 2 3
// [4, 5, 6, 7]function examplefunc(a, b, c, ...args) {
console.log(a, b, c);
console.log(args);
}
examplefunc(1, 2, 3, 4, 5, 6, 7); // 1 2 3
// [4, 5, 6, 7](8) 템플릿 리터럴 ( Template Literal) 굿굿굿
console.log(`Hello, World ${ 3 + 3 } `); // Hello, World 6 Tap 키 위에 백틱 ` 이용const testvalue = "하이요 !";
console.log(`Hello, World ${testvalue} `); // Hello, World 하이요 !console.log(`
Hello !!
my name is Lee Sin!!!
Iku !!`) // Hello !!
// my name is Lee Sin!!!
// Iku !!2. 일급 객체로서의 함수(First-class Object)
(1) 변수에 함수를 할당
const sayHello = function() {
console.log('Hello!');
};
sayHello(); // "Hello!" 출력(2) 함수를 인자로 다른 함수에 전달
2-1 콜백함수 : 매개변수로써 쓰이는 함수
2-2 고차함수 : 함수를 인자로 받거나 return 하는 함수
// 콜백함수 예시
function callfunction(func) {
// 매개변수로 받은 변수가 사실 함수다.
func();
}
const sayhello = function () {
console.log('Hello!'); // => function 부터 아래 sayhello 에 들어감
};
callfunction(sayhello); // "Hello!" 출력(3) 함수를 반환
// 고차함수 예시
function createadder(num) {
return function (x) {
return x + num; // => function 부터 아래 createadder(5) 를 대체함
};
}
const addfive = createadder(5);
console.log(addfive(10)); // 15 출력(4) 객체의 프로퍼티로 함수를 할당
const person = {
name : 'john',
age : 31,
ismarried : true,
sayhello : function () {
console.log('hello, my name is ' + this.name); // this 를 이용한 방법1)
console.log(`hello, my name is ${this.name}`); // 템플릿 리터럴 이용한 방법2)
}
};
person.sayhello(); // "Hello, my name is John" 출력// 화살표 함수 이용한 방법3)
const person = {
name : 'john',
age : 31,
ismarried : true,
sayhello : () => { // 화살표 함수 이용
console.log (`hello, my name is ${this.name}`) // 화살표 함수는 this 를 바인딩 하지 않는다.
}
};
person.sayhello(); // 따라서 결과는 "hello, my name is undefined" 로 출력(5) 배열의 요소로 함수를 할당
const myArr = [
function (a, b) {
return a + b;
}, // 0번째 요소
function (a, b) {
return a - b;
}, // 1번째 요소
];
// 더하기
console.log(myArr[0](1, 3)); // 위 0번째 요소에 a에 1, b에 3을 넣으면 4
// 빼기
console.log(myArr[1](8, 2)); // 위 1번째 요소에 a에 8, b에 2을 넣으면 6
function multiplyby(num) {
return function (x) {
return x * num;
};
}
function add (x, y) {
return x + y;
}
const multiplybytwo = multiplyby(2);
// const multiplybytwo =function (x) {
// return x * 2;
// }
const multiplybythree = multiplyby(3);
// const multiplybythree = function (x) {
// return x * 3;
// }
console.log(multiplybytwo(10)) // (10)에 2를 곱해 20
console.log(multiplybythree(20)) // (20)에 3를 곱해 60
3. Map과 Set
- Map, Set의 목적 : 데이터의 구성, 검색, 사용을 기존의 객체, 배열보다 효율적으로 처리하기 위함
(1) Map
- Map은 key와value 쌍을 저장하는 객체와 비슷, 각 쌍의 키와 값을 저장하며 , 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다.
- key에 어떤 데이터타입(유형)도 다 들어올 수 있다.
- Map은 키가 정렬된 순서로 저장되기 때문
- 기능 : 검색(set), 삭제(delete), 제거(clear), 여부 확인(size)
const mymap = new map();
mymap.set('key', 'value')
//...
//...
mymap.get('key') // set 과 get 은 항상 세트다!!
// 반복 ... !! -> method : key, values, entriesconst mymap = new Map();
mymap.set('one', 1);
mymap.set('two', 2);
mymap.set('three', 3);
// console.log(mymap.keys()); // { 'one', 'two', 'three' }
// for (const key of mymap.keys()) { //one
// console.log(key); two
//} three
console.log(mymap.values()); // [Map Iterator] { 1, 2, 3 }
for (const value of mymap.values()) {
console.log(value); //1
} //2
//3
for (const entry of mymap.entries()) {
console.log(entry); //[ 'one', 1 ]
} //[ 'two', 2 ]
//[ 'three', 3 ]
console.log(mymap.size); // 3개니까 3
console.log(mymap.has("two"); // two 있으니까 true(2) Set
고유한 값을 저장하는 자료구조
값만 저장
키는 저장x
값이 중복되지 않는 유일한 요소로만 구성.
값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const myset = new Set();
myset.add("value1"); // 1개
myset.add("value2"); // 2개
myset.add("value3"); // 3개
myset.add("value3"); // 중복이니까 그대로 3개
console.log(myset.size); // 3const myset = new Set();
myset.add("value1"); // 1개
myset.add("value2"); // 2개
myset.add("value3"); // 3개
myset.add("value4");
for(const value of myset.values()) {
console.log(value);
}
TIL