특강_ES6.pdf
es6_function.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function sum(a,b){
return a+b;
}
//ES5방식
console.log(sum(1,4)); //5
//ES6방식
const sum2= (a,b) => a+b; // 화살표 함수
console.log(sum2(1,4));
// 입력 변수가 하나 일때 ()괄호 생략가능
// let sum3=a =>{return a+10};
let sum3=a =>a+10;
console.log(sum3(3)/13);
//let sum4=(a,b) =>{a+b}; //undefined
let sum4=(a,b) =>{return a+b}; //10
console.log(sum4(3,7));
</script>
</head>
<body>
</body>
</html>
es6_template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// es5 문자열 처리
var fname="hong";
var lname = "gil dong";
var nemo = "나이: 26, 경력:2년";
var employee="my name is:"+fname+" "+lname+"\\n"+nemo;
console.log(employee);
// es6 문자열 처리
let fname2="lim";
let lname2="young woong";
let memo2=`나이: 33
경력 12년`; //백틱문자(`)로 엔터침
var employee2="my name is:"+fname2+" "+lname+"\\n"+memo2;
console.log(employee2);
</script>
</head>
<body>
</body>
</html>
es6_spread1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const arr=[1,2,3];
console.log(arr);//[1, 2, 3]
// spread operator
console.log(...arr);//1 2 3
// 배열 연결하면서 배열 객체 추가하기
// const num1=[10,20,30,arr];
//10,20,30,[1,2,3]
const num1=[10,20,30,...arr];
//배열 원소로 추가
//10,20,30,1,2,3
console.log(num1);
//배열 중간 추가
// const num3=[10,20,arr,30];
//10,20,[1,2,3],30
const num3=[10,20,...arr,30];
//10,20,1,2,3,30
console.log(num3);
// 배열 객체 복사
const num5=[arr];
console.log(num5);
// 배열 원소 복사
const num6=[...arr];
console.log(num6);
// 배열 객체 연결
const num7=[arr,num1];
console.log(num7);
// 배열 원소 연결
const num8=[...arr,num1];
console.log(num8);
</script>
</head>
<body>
</body>
</html>
es6_spread2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const num=[1,2,3];
function sum(x,y,z){
return x+y+z;
}
console.log(sum(1,2,3));
console.log(sum(num)); //1,2,3undefinedundefined
console.log(sum(...num)); //6 , 오류 안뜸
console.log(sum(10,...num)); //10+1+2
// arr: 가변적 매개변수
function sum2(x,...arr){
return [x,...arr];
}
console.log(sum2("홍길동",1)); //[홍길동,1]
// '홍길동', 1, 2, 'hello', 가변적인 arr
console.log(sum2("홍길동",1,2,"hello"));
// Rest parmeter must be last formal parameter
// 가변적 매개변수는 마지막에 작성, 처음 넣으면 오류
// function sum3(...arr,x){
// return [...arr,x];
// }
function sum4(x,y=10 ,z=100){
return x+y+z;
}
console.log(sum4(1)); // 111: x를 1로 처리
console.log(sum4(1,2)); //103: x를 1, y=2로 처리
console.log(sum4(1,2,3)); //6
console.log(sum4(...[1,2,3,4])); //배열원소 1,2,3만 대입
function sum5(x,y=10,z=100){
return x+y+z;
}
console.log(sum5(2,3)); //앞에는 2,3 z는 100
// 함수의 default 매개값(마지막에 작성하는게 바람직)
function sum5(x=1,y,z){
return x+y+z;
}
console.log(sum5(2,3)); //NaN 오류
</script>
</head>
<body>
</body>
</html>
es6_destructuring1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let arr=["홍길동","이순신","홍길자","김철수"];
let n1=arr[0];
let n2=arr[3];
console.log(n1,n2); //홍길동 김철수
// 배열 객체의 위치요소를 반환 받아 a,b,c,d 변수에 저장
// destructuring: 구조 분해 할당
let[a,b,c,d] = arr;
console.log(a,b,c,d);
let[m1,...m2] = arr;
console.log(m1,m2); //1,4번째 알아서 할당
// arr배열 객체를 배열 원소로 받아서 x배열 객체로 생성
let[...x]=arr;
console.log(x);
//all :2개 원소를 배열 객체로 생성
let[k1,k2,...all]=arr;
console.log(k1,k2,all); //all : 2개 원소를 배열 객체로 생성
</script>
</head>
<body>
</body>
</html>