let변수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>
</head>
<body>
<script>
var x = 1;
var x = 100;
console.log(x);
//let y = 1;
//let y = 100;
var x = 1;
if(true){
var x = 200;
console.log(x);
}
console.log(x); //var 변수는 if 문 밖에서도 사용 가능
let z = 1;
if(true){ // let 변수의 유효범위 {}이다.
let z = 100;
console.log(z); // 100 //let 변수는 여기서 끝.
}
console.log(z);
</script>
</body>
</html>
CONST 상수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
</head>
<body>
<script>
const GENDER = "남자";
//배열이나 객체에서 값의 재할당은 금지하지만, 변경은 언제든지 가능하다
const MY_ARR = ["홍길동","이순신"];
MY_ARR[0] = "김철수";
MY_ARR.push("츄");
console.log(MY_ARR);
const P1 = {"name" : "홍길동"};
//P1 = {"name":"이순신"};
P1.name = "츄";
P1.age = 20;
console.log(P1);
</script>
</body>
</html>
전개구문(spread operator)
spread는 배열 요소를 가져와서 한번에 보여준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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>
</head>
<body>
//spread 배열 요소를 가져와서 한번에 펼쳐준다.
<script>
// console.log(...[1,2,3])
const arr = [1,2,3];
console.log(...arr);
//배열의 추가
const num1 = [10,20,30, ...arr]
console.log(num1)
//배열의 중간 추가
const num2 = [10,20, ...arr, 30]
console.log(num2)
//배열의 복사
const num3 = [...arr];
console.log(num3)
//배열의 연결
const num4 = [...arr, ...num1, ...num2];
console.log(num4)
//spread operator 함수에 적용하기
const num = [1,2,3];
function sum(x,y,z){
return x + y + z;
}
console.log(sum(...num));
console.log(sum(10,...num));
//함수의 매개변수의 적용(가변적 매개변수) // 여러개의 변수를 추가할 수 있음
function sum2(x, ...arr){
return [x,...arr];
}
console.log(sum2("홍길동", 1, 2, 3, 4, 5, "hello"));
//함수의 default 매개값 // 기본값...
function sum3(x, y = 10,z = 100){
return x+y+z;
}
console.log(sum3(1,2,3));
</script>
</body>
</html>
배열 dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>
</head>
<body>
<script>
let arr = ["홍자바","이애플","홍던킨","김인텔"];
/*
let n1 = arr[0];
let n2 = arr[3];
console.log(n1,n2);
*/
//위치요소를 반환 받아서 a,b,c,d 변수에 저장
let [a,b,c,d] = arr;
console.log(a,b,c,d);
let [n1, , ,n2] = arr;
console.log(n1,n2);
//전부다 반환 받는다
let [...x] = arr;
console.log(x);
let[k1,k2, ...all] = arr;
console.log(k1,k2,all)
</script>
</body>
</html>
'''
__객체 dist__
```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>
</head>
<body>
<script>
let obj = {"name":"홍자바","age":24};
/*
console.log(obj["name"]);
console.log(obj.name);
let{name, age } = obj;
console.log(name, age);
let{...arr} = obj;
console.log(arr);
*/
let person = {
"name" : "김버스",
"age" : 30,
"job" : ["programmer","designer"],
"info" : {"id":"kkk123", "email":"namer"}
}
/*
let {name, age, job} = person;
console.log(name, age, job)
*/
let{name: aaa} = person ; //aaa라는 변수명으로 name을 가져옴
console.log(aaa)
let{age: bbb} = person; //bbb라는 변수명으로 age를 가져옴
console.log(bbb);
let{job: ccc} = person; //ccc라는 변수명으로 job을 가져옴
console.log(ccc);
</script>
</body>
</html>
JSON 분해
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>
</head>
<body>
<script>
let list = [
{
"num":1,
"title":"hello",
"info":["banana","apple"],
"profile":{"birth":"20201111","img":"https://www.test.com/1"}
},
{
"num":1,
"title":"hello",
"info":["melon","orange"],
"profile":{"birth":"20201112","img":"https://www.test.com/2"}
}
]
let [ , a]= list;
console.log (a);
let [ , {num,title,info}] = list;
console.log (num,title,info);
let[ ,{info:[m,orange]}] = list;
console.log(m, orange);
let[ , {profile:{birth, img}} ] = list;
console.log(birth,img)
</script>
</body>
</html>