ES6 문법 강의
// 구조분해 할당 (쉽게말해 구조를 풀어버리는것)
// 배열 혹은 개체 속성 에서 사용함
// 배열인 경우
let arr = ['val1','val2','val3'];
let [a,b,c,d ] = arr; //만약 d=4 라는 값을 안에 선언해주면 초기값으로 잡힘. 만약 다른게 선언이 되버리면 그 값으로 출력됨
console.log(a) //va1
console.log(b) //val2
console.log(c) //val3
console.log(d) //null 이 아닌 undefiend 라고 해야함.
// 객체 인 경우
//key 가 중요함.
let {name , age } = {
name:'우혁',
age:32,
}
console.log('name=>', name) //string 형태
console.log('age=>', age) //number 형태
// 새로운 이름으로 할당 (객체 키값을)
let user ={ name:'qw', age:45};
let {name:newname,age:new_age } = user //기본 키값 이름을 새로운 이름으로 변경
console.log(newname)
console.log(new_age)
// 단축 속성명
const name = "우혁"
const age =24;
let new_name = {age:age /*여기 age는 위에 const age */ , name:name /* const name */ } //이렇게 쓰이던게
let new_name1 = {age,name} //으로 쓰일수 있다.
console.log(new_name1) //{ age: 24, name: '우혁' } 으로 출력
// 전개 구문 (구조분해 와 가장 많이 쓰임)
let arr=[2,3,4]
let new_arr=[...arr,4] //위의 [ 2, 3, 4 ] 를 풀어서 2,3,4 에서 추가로 ,4 를 넣어주고 다시 [] 해줌
console.log(arr) // [ 2, 3, 4 ] 출력
console.log(new_arr)
// 나머지 매개변수
function func_num(a,b,c,...args){ //3개 매개변수 이외에 ...args 를 통해 여러개를 더 받을수 있다.
console.log(a,b,c)
console.log(...args)
console.log(args) //배열 다시 씌어줌
}
func_num(1,2,3) //1 2 3
func_num(1,2,3,4,5,6,7,8) //4 5 6 7 8
//[ 4, 5, 6, 7, 8 ]
// 템플릿 리터럴 (`` -백틱키 로 사용)
console.log(`hello world ${3+3}`) //hello world 6 ------ (${여기에 숫자 변수 다 넣을수 있다})
console.log(`hello world
안녕하세요
히히히히ㅣㅎ
`) //멀티 라인도 지원 됨
// 일급 객체로써의 함수
//(1) 변수에 함수를 할당 할 수 있다.
const hello = function(){
console.log("say_hello")
}
// (2)함수를 다른 인자(매개변수로) 다른 함수에 전달할수 있다.
function say_hi(func){
func(); //함수가 사실 매개변수이다!
}
const hi =function(){
console.log("say_hello");
} //이렇게 선언한 내용을 가지구.
say_hi(hi); //매개변수에 집어넣으면 이렇게 표현된다
// function say_hi(function(){
// console.log("say_hello");
// }) 이러케 표현됨.
// (3)함수를 반환 할 수 있다.
function create (num){
return function new_add(x){ //return 을 한번써주고 선언 해줘야 함.
return x+num;
}
}
const add_num= create(5);
// add_num = function new_add(x){
// return x+5; } 으로 표시됨.
console.log(add_num(5)); //결국 매개변수 x에 5를 넣어주니까.. 10이 나온다는것.
// 일급 개체로써의 함수(2)
const perosn ={
name:"우혁",
age:32,
Ismarried:true,
say: function(){
console.log(`hello my name is ${this.name}`)
}
}
perosn.say(); //Hello My name is 우혁 이라고 출력이 됨.
// 배열에서 사용되는 함수.
const Myarr=[
function(a,b){
return a+b;
},
function(a,b){
return a-b;
}
]
//호출 방법
console.log(Myarr[0](10,3),Myarr[1](30,7))
function Multiple_num(num){
return function(x){
return x * num;
}
}
function add(x,y){
return x+y;
}
const add_multiple1 = Multiple_num(4); //4x 가 됨
const add_multiple2 = Multiple_num(6); // 6x 가 됨
console.log(add_multiple1(4))
console.log(add_multiple2(4))
console.log(add(add_multiple1(4), add_multiple2(4))) //40이 나옴니다.
// Map 이란???
// 기존 배열과 함수로는 조금 부족하기에 좀더 원할하게 하기 위해 만들어짐
// 객체와 똑같이 key/value 값을 가지는데, 대신 key 값에 문자열 뿐만 아니라 여러개가 들어갑니다.
const Mymap = new Map(); //Map 선언
Mymap.set(12,23) //반드시 알아둘것은 set() 이 입력 get() 이 출력 이라는 것이다. (페어 로 알아두자)
Mymap.set("two",23)
Mymap.set("three",23)
console.log(Mymap.keys()) //map은 리터럴(연속된)속성이 있어서 여러개를 뽑아낼수 있다.
// keys()->키 값 다 ,values()->벨류값 다 , entires()->이건 2차원 배열로 만들어줌{[key:value]}
console.log(Mymap.values());
console.log(Mymap.entries());
// for 문 사용시 for(타입 새로넣을객체명 of 맵이름.등등등())
for(const sel of Mymap.keys()){
console.log(sel)
}
for(const sel1 of Mymap.values()){
console.log(sel1)
}
for(const sel2 of Mymap.entries()){
console.log(sel2)
}
// 이외 size 와 특정 키 검색방법
console.log(Mymap.size) //크기를 알수이따
console.log(Mymap.has("two")) //키 값인 two 찾자
// set 이란?
// map 과는 달리 벨류 값만 저장할수 있다.
// 만약 값이 중복되면 그건 사이즈도 안쳐주고 중복된값은 생략하고 씀.
const Myset = new Set();
Myset.add("value1") //여기선 추가를 add 로한다 map의 get()과는 조금 다르다.
Myset.add("value2")
Myset.add("value3")
Myset.add("value1")
console.log(Myset.size) //역시 중복된 값은 제거되고 크기는 3이 나오게 됩.
for(const set of Myset.values()){
console.log(set)
} //여기도 또한 중복값이 제거가 됩니다.```
코딩꿈나무 입니다.