ES6 Basic
전개구문 = 반복이 가능한 요소에서만 사용 가능함
let arr2 = [1,2,3, ...arr];
->배열안에 배열을 넣는 이중배열이 되는게 아닌
arr배열의 값을 한칸씩 풀어서 넣어줌
spread
//전개구문 = 반복이 가능한 요소에서만 사용 가능함
let arr = [1,2,3];
console.log(...arr);
let str = "hello";
console.log(...str);
//배열의 추가
let arr2 = [1,2,3, ...arr]; //1,2,3,1,2,3
console.log(arr2)
//배열의 중간에 추가
let arr3 = [1,2,3, ...arr, 5]; //1,2,3,1,2,3,5
console.log(arr3)
//배열의 복사
let arr4 = [...arr]; //arr배열의 값을 풀어서 1,2,3 으로 값을 집어넣음
console.log(arr4);
//배열의 연결
let arr5 = [...arr, ...arr2, ...arr3]; // 이런식으로 연결도 가능하다
console.log(arr5)Destructuring assignment (구조 분해 할당)
let arr = [1,2,3,4];
// let a1 = arr[0];
// let a2 = arr[1];
let[a,b,c,d] = arr;
console.log(a, b, c, d); //1,2,3,4
let [a1, a2] = arr;
console.log(a1, a2); //1,2
let [k1, , , k4] = arr;
console.log(k1,k4) //1,4
let[y1, ...y2] = arr;
console.log(y1,y2) //1, [2,3,4]
let [...ar] = arr;
console.log(ar) //[1,2,3,4]
//예시
function useState(){
return [1, function(){}];
}
let result = useState();
console.log(result) //[1, function()]
let [n1, n2] = useState();
console.log(n1, n2) //1, function()객체에서 destructuring
//JSON형식에서 디스트럭쳐링
let list = [
{num : 1, title : "hello", info : [1,2,3], profile : {birth : "2023"}},
{num : 2, title : "bye", info : [4,5,6], profile : {birth : "2022"}}
];
let [a,b]= list;
//두번째 객체의 num, title
let[,{num,title}] = list;
console.log(num,title); //2 'bye'
//두번째 객체의 info
let[,{info}] = list;
console.log(info); //[4,5,6]
//두번째 객체의 profile
let[,{profile}] = list;
console.log(profile) //{birth : '2022'}
//두번째 객체의 info를 다른이름으로 가지고 나오기
let[,{info: x}]= list;
console.log(x)
//두번째 객체의 info배열의 첫번째 요소
let [,{info: [y]}] = list
console.log(y) //4
//두번째 객체의 profile 안에 있는 birth값을 year로 저장
let [, {profile:{birth: year}}] = list;
console.log(year) //2022Arrow Function (화살표함수)
- 1. 코드가 한개줄이면 {} 생략이 가능하다
{}를 쓰지 않으면 기본값으로 undefined를 반환합니다.
{}를 쓰지 않고 구문을 작성하면 리턴문이 됩니다. - 2. 매개변수가 1개라면, 매개변수 자리의 ()의 생략이 가능합니다.
- 3. 객체를 반환 할때는 ()를 묶어 줍니다.
//기본적으로 익명함수를 대체한다. (호이스팅이 불가능)
// var a = function(){
// console.log("a실행");
// }
let a = () => {
console.log("a실행");
}
a();
/*
문법1
코드가 한줄이면 {}가 생략이 된다.
{}를 생랼하면 자동으로 return이 붙는다.
*/
let b1 = () => console.log("b실행");
b1();
let b2 = (a,b,c) => a+b+c;
console.log( b2( 1, 2, 3 ) );
let b3 = (a=10) => a+100;
console.log(b3()); //110
console.log(b3(20)); //120
/*
문법2 = 매개변수가 1개라면 () 생략이 됩니다.
*/
let c1 = a => a+10;
console.log( c1( 10 ) ); //20
/*
문법3 = 객체를 반환할때는 ()로 묶어줍니다.
*/
//1st
let c2 = () => {
return {key:1, age:20}
};
//2nd
let c3 = () => ({key:1, age:20});
let aba = setInterval(() => console.log(1),1000);
clearInterval(aba);---------------------------------
화살표함수 응용
- foreach(콜백함수, thisArg: 옵션)
forEach( function(현재값, 현재인덱스, 현재배열) {}, thisArg) - Filter 필터함수
콜박에 리턴이 true인값을 이용해서 새로운 배열을 반환
filter (콜백(값 , 인덱스 , 현재배열), thisArg) - Map함수 실행한 결과를 가지고 새로운배열을 만들때 사용
map(콜백(현재값, 인덱스, 현재배열), thisArg)
//foreach(콜백함수, thisArg: 옵션)
//forEach( function(현재값, 현재인덱스, 현재배열) {}, thisArg)
let arr = ["a", "b", "c", "d"];
/*
arr.forEach(function (value, index, arr) {
console.log("값 : " + value + ", 인덱스 : " + index + ", 현재배열 : " + arr);
});
arr.forEach(function (value) {
console.log(value)
})
arr.forEach((value, index, arr) => {
console.log(`값 : ${value}, 인덱스 : ${index}, 현재배열 : ${arr}`);
})
*/
//value만 받아서 사용한다면 이렇게도 사용할 수 있다.
// arr.forEach(value => console.log(value));
//필터함수 - 콜박에 리턴이 true인값을 이용해서 새로운 배열을 반환
//filter (콜백(값 , 인덱스 , 현재배열), thisArg)
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// let result = arr2.filter(function (value, index, arr) {
// return value % 2 == 0;
// })
// console.log(result)
// let result = arr2.filter((value) => value % 2 == 0)
// console.log(result)
let arr3 = ["melon", "apple", "orange", "grape", "mango"];
// let result = arr3.filter((a) => a.indexOf("o") != -1 );
// console.log(result);
//map함수 - 실행한 결과를 가지고 새로운배열을 만들때 사용
//map(콜백(현재값, 인덱스, 현재배열), thisArg)
let arr4 = [1, 3, 5, 7, 9];
// let result = arr4.map(function(a, b, c) {
// return a+1;
// })
// console.log(result)
// let result = arr4.map(a => a + 1);
// console.log(result)
let arr5 = ["melon", "apple", "orange", "grape", "mango"];
let result = arr5.filter((a)=>a.includes("o")).map((a,b)=>`o가 들어간 과일중 ${a}은 ${b+1}번째 입니다.`);
console.log(result)Class
! 일반 HTML에서는 굳이 Class를 사용하진 않는다.
하지만 REACT 의 Class 컴포넌트를 사용한다면 알아둬야한다.
클래스의 멤버변수는 let이나 var이 없이 바로 변수명으로 선언을 시작한다.
자바스크립트 클래스의 생성자는 1개다.
JS는 This키워드를 사용하면 멤버변수가 자동생성 된다
댓글