① 새로운 변수 선언 키워드 : let, const
② class 키워드 ,extends
③ 화살표 함수 (Arrow Function)
④ module 문법 : import, export
<최종 화면> 일반 메소드를 화살표 함수(람다식 표기법)로 표현해본다.
좀더 간결하고, 짧게 줄을 줄일 수 있다.
우선 일반적으로 함수를 만들어 보자.
참조변수를 이용해서 익명 함수도 만들 수 있다.
이제 output()함수와 비슷하게 화살표 함수로 바꿔보자.
참조변수가 함수를 참조하는데, function을 없애고 ()다음에 =>를써준다. (람다식 표기법)
let display=function() { document.write(name+'<br>'); } //이거나 아래 코드나 똑같은 의미
let display= ()=> { document.write(name+'<br>'); } //확실히 보이기 위해 띄어쓰기좀 했다..
람다식 표기법을 사용하는데 파라미터를 받고 싶다면?
()안에 매개변수를 사용하면된다. (일반 함수랑 똑같다.)
display2와 똑같이 람다식 표기를하는데, 더 간결하게 할 수 있다.
파라미터가 1개라면 ()를 생략할 수 있다.
let display3=(name)=>{ document.write(name+'<br>'); } 이거나 아래 줄의 코드나 같은 의미
let display3=name=>{ document.write(name+'<br>'); } // ()괄호만 생략함. 단, 파라미터가 1개일때만 가능!!
let display3=name=>{ document.write(name+'<br>'); } 이거나 아래 줄의 코드나 같은 의미
let display3=name=> document.write(name+'<br>'); // {}중괄호만 생략함. 단, 실행문이 1개일때만 가능!!
람다식 표기법은 함수를 간결하게 사용하는데, 거기서 조건이 맞는다면 생략을 두번 가능하다
람다식 표기법
참조변수가 함수를 참조하는데, function을 없애고 ()다음에 =>를써준다. (람다식 표기법)
① 파라미터가 1개면... ()생략
② 실행문이 1개면... {}생략
버튼 클릭시 함수 호출에서도 람다식 표기법을 이용하자.
우선 버튼과 클릭 이벤트를 달자.
위 함수를 람다식 표기로~
이제 반복문에 대한 사용을 알아보자. ( for문 / for..in문 / forEach문 )
for문에 대해 알아보자. 반복문을 사용하기 위해 임의로 배열을 만들었다.
querySelector는 id, name, class 명을 CSS선택자를 활용하여 요소를 찾을 수 있다. ( '#p1', 'p1', '.p1' )
for.. in문법으로도 사용 해보자. ( 주의! index의 값은 요소의 값이 아닌 0,1,2.. 이런식의 순서의 값이 온다. )
forEach문법도 사용 해보자. (forEach문은 파라미터에 함수가 들어간다.)
forEach문은 파라미터로 메소드가 들어가기 때문에 람다식 표기가 가능하다. (화살표 함수)
arr.forEach( function(value) { document.write(value+"<br>"); } );
arr.forEach( (value)=>{ document.write(value+"<br>"); } ); // function을 => 로 대체한다.
그리고 화살표 함수는 생략을 더 할 수 있다.
파라미터가 1개면 () 생략
함수 실행문이 1줄이면 {} 생략
// 단, (value=>document.wirte(value+"<br>") ; ); //세미콜론이 두번 들어가서 세미콜론도 없애야 한다.
map() 메소드도 알아보지. map()메소드는 forEach()와 거의 똑같지만 return이 있다는 점만 다르다.
배열 요소 값에 연산을 더 할때 유용하게 쓰일 수 있다.
map()메소드를 화살표 함수로 변경하자.
map() 람다식 표현의 주의할 점은 실행문이 1줄일때 {}도 생략할 수 있는데, return 키워드도 생략해야한다.
버튼을 만들고 콜백 함수를 화살표 함수로 변경해보자.
우선 버튼을 누를 시, 일반적인 콜백 함수를 만들자.
여기사 this가 중요하다. this는 호출한 요소를 말하므로 button이 된다. (그러나, 화살표 함수로 만들면 다르다.)
똑같은 콜백 함수를 화살표 함수로 만들자.
이때의 this는 버튼의 상위를 가리키므로 현재는 window이지만, 객체 안에 버튼 콜백 함수가 있다면
객체를 가르켜서 객체를 참조할 수 있을 것이다. 결국 객체 멤버를 사용 가능..
<복붙용 코드>
|
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 화살표 함수 (Arrow Function)- Java 언어의 람다식 표기법
// 1. 일반적인 함수[선언적 함수]
function show() {
document.write('show!<br>');
}
show();
// 2. 익명 함수
let output=function(){
document.write('output!<br>');
}
output();
// 3. 이 '익명함수'를 화살표 함수로 변경하여 사용할 수 있음.
let display=()=>{
document.write('display!<br>');
}
display();
let display2=(name)=>{
}
display2('sam');
// 화살표 함수 표기 문법을 더 간결하게 줄여서... 사용
// 1) 파라미터가 1개일때는()를 생략 가능[없거나, 2개 이상이면 생략 불가]
let display3=name=>{
}
display3('robin');
// 2) {}안에 실행문이 1줄일때는 {}도 생략가능함!!
display4('kim');
display5();
display6('hong',20);
</script>
<!-- 화살표 함수는 보통 이벤트 처리목적으로 많이 사용됨 -->
<button id="btn1">button</button>
<p id="p1"></p>
<script>
// 1. 버튼 클릭이벤트 달기
// 1) 예전 방식
let btn1= document.getElementById('btn1');
// btn1.onclick=function(){
// document.getElementById('p1').innerHTML="clicked button!";
// }
// 2) 화살표 함수로..
btn1.onclick=()=>document.getElementById('p1').innerHTML="clicked button!";
// 2. 반복문 처리에 특별하게 사용가능함
let arr= new Array(10, 20 ,30);
// css 선택자 문법으로 요소 찾아오는 메소드
document.querySelector('#p1').innerHTML=arr[0]+"<br>";
// 반복문으로 배열 요소값들 출력
for(let i=0;i<arr.length;i++){
document.querySelector('#p1').innerHTML+=arr[i]+"<br>"; //10 ,20 ,30
}
// for.. in문법 [차례로 index번호 얻어오기]
for(index in arr){
document.querySelector('#p1').innerHTML+=arr[index]+"<br>"; //10 ,20 ,30
}
document.write('<hr>');
// 배열 객체의 foreach()메소드 이용
arr.forEach( function(value){
});
document.write('<hr>');
// 이때 사용된 콜백함수를 화살표 함수로..
// forEach()와 비슷한 map()메소드...
//요소의 개수만큼 반복하며 ()안의 파라미터로 전달된 함수를
//호출해 주는 방식은 똑같음
// 각 콜백함수는 return을 가지고 있음.
// 결국, map()는 각 요소개수 마다 return하고 그 결과를
// 새로운 배열로 리턴함
document.write('<hr>');
// 위 map()을 화살표 함수로 변경
//만약 실행문이 1줄일때는 {}도 생략할 수 있으나..return키워드도 생략해야만 함
// 나중에 하이브리드 앱 개발에 더 많은 내용을 다뤄볼 것임....
arr.forEach(value=> value=5);
</script>
<hr>
<button id="btn2">button2</button>
<p id="p2"></p>
<script>
// 콜백 함수를 익명 함수로..
// btn2.onclick= function(){
// document.querySelector('#p2').innerHTML= this;
// }
// 콜백 함수를 화살표함수로..
btn2.onclick= ()=>{
document.querySelector('#p2').innerHTML= this;
}
</script>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| ECMA script 2015(ES6) (0) | 2019.12.23 |
|---|---|
| ECMA script 2015(ES6) module (다른문서 클래스,변수 사용/import) (0) | 2019.12.20 |
| ECMA script 2015(ES6) class (멤버 변수,메소드 사용 및 구조분해할당) (0) | 2019.12.20 |
| ECMA script 2015(ES6) let과 var 차이, const (0) | 2019.12.20 |
| HTML+Java script (기초) webStorage (localStorage, sessionStorage ) 웹 브라우저 데이터 저장 관련 (0) | 2019.12.19 |
댓글