[1] 화살표 함수 (foreach와 map)
- 코틀린에 람다같은 것
- map과 foreach의 차이 둘다 반복문을 대신 하는 것
- map()은 리턴 값이 있다
foreach와 map의 기본 모양
aaa.forEach( function(value, index, array){ //파라미터 최대 3개 존재 document.write(index + " : " + value + "<br>") } ) //각각에 접근할 때 마다 파라미터의 함수가 호출된다 let bbb = aaa.map(function(value, index, array){ return value+1 })
💡 화살표 함수의 간단 표기법
- 파라미터가 1개 뿐이라면 () 생략 가능
- 함수의 실행문이 1줄이면 ... {} 생략이 가능함
- 리턴 키워드는 반드시 쓰지 않아야함!!!
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS es6 arrowfunction</title>
</head>
<body>
<script>
// 3. 화살표 함수 - JAVa/KOTLIN의 람다표기
// 1) 일반적인 선언적 함수
function show() {
document.write("show!!!<br>")
}
show()
// 2) 함수를 변수에 저장하여 사용 : 익명함수
let output = function() {
document.write("output!!!<br>")
}
//익명함수 객체를 가지고 있는 output변수를 함수명처럼 사용하여 함수 호출
output()
// 3) 위 '익명함수'를 화살표 함수로 변경하여 사용해보기 : =>
let display = () => {
document.write("display!!!<br>")
}
display()
document.write(`<hr>`)
// 당연히 화살표 함수도 파라미터를 받을 수 있음
let display2 = (name) => {
document.write(`display2 : ${name} <br>`)
}
display2("sam")
// 4) 화살표 함수의 간단 표기법
// 4.1) 파라미터가 1개 뿐이라면 () 생략 가능
let display3 = name => {
document.write(`display3 : ${name} <br>`)
}
display3("lisa")
//4.2) 함수의 실행문이 1줄이면 ... {} 생략이 가능함
let display4 = name => document.write(`display4 : ${name} <br>`)
display3("jisoo")
// 파라미터 0개일때는 () 필수!!!! 생략 불가
let display5 = () => document.write(`display5 <br>`)
display5()
//파라미터 2개 이상일 때도 () 생략 불가
let display6 = (name, age) => document.write(`display5 : ${name} , ${age}<br>`)
display6('rose', 26)
</script>
<hr>
<!-- 일반적으로 화살표 함수는 이벤트처리의 콜백함수로 많이 사용됨 -->
<button id="b1">button</button>
<h4 id="hh">hello</h4>
<hr>
<script>
//1. 버튼 클릭 시 h4요소 값 변경해보기
//버튼에 클릭이벤트 달기
//1) 예전 방식
const b1 = document.getElementById('b1')
b1.onclick = function() {
document.getElementById('hh').innerHTML = "클릭 버튼"
}
//2) 화사표 함수 이용
b1.onclick = () => document.getElementById('hh').innerHTML = "Nice"
//2. 반복문 처리에도 자주 활용됨
let aaa = new Array(10,20,30)
document.querySelector('#hh').innerHTML = ""
//반복문을 이용하여 배열의 요소를 h4에 출력
for(let i=0; i < aaa.length ; i++) {
document.querySelector('#hh').innerHTML += aaa[i] + "<br>"
}
//in키워드 이용하여 배열의 인덱스 번호를 실수 없이 사용
for(index in aaa) {
document.querySelector('#hh').innerHTML += aaa[index] + "<br>"
}
//in 방법도 짜증.. aaap[] 이 형태의 코드가 지저분함
//그래서 배열의 요소접근 기능메소드 활용 forEach() , map()
aaa.forEach( function(value, index, array){ //파라미터 최대 3개 존재
document.write(index + " : " + value + "<br>")
} ) //각각에 접근할 때 마다 파라미터의 함수가 호출된다
document.write(`<hr>`)
//만약 요소값 value만 사용하고 싶다면
aaa.forEach(function(value) {
document.write(value + "<br>")
})
document.write(`<hr>`)
//이때 파라미터로 지정한 콜백함수를 화살표 함수로
aaa.forEach( (value) => {
document.write(value + "<br>")
})
document.write(`<hr>`)
//화살표 더 간결하게
aaa.forEach (value => document.write(value + "<br>"))
document.write(`<hr>`)
//도 다른 배열요소 접근 기능 메소드 이용 : map() - 리턴이 있음
//기존 방식
//이 콜백 함수에서 리턴한 값들을 새로운 배열 요소로 만들어 추가함
let bbb = aaa.map(function(value, index, array){
return value+1
})
//리턴된 bbb는 새로운 배열 - aaa배열과 개수 같음
//배열의 요소 값들을 모두 1증가 시키고 싶을 때 사용
//아답터의 역할로도 사용 가능
document.write(`결과 : ${bbb} <br>`) //js는 자동 tostring 해서 출력해줌
// 위 작업을 화살표 함수도 처리
let ccc = aaa.map( value => { return value+3 } )
document.write(`결과 : ${ccc} <br>`)
//실행문이 1줄이면 {}도 생략 가능
//let ddd = aaa.map( value => return value+5 ) //ERROR - 실행문 1줄이 return 일때는 return 키워드도 반드시 생략해야만 한다
let ddd = aaa.map( value => value+5 )
document.write(`결과 : ${ddd} <br>`)
//익명함수와 화살표함수 안에서 this는 다른 의미를 가짐 -- 이건 리액트네이티브에서 소개
</script>
</body>
</html>
[2] 모듈
- script src 가 아닌 import로 다른 js 포함 시키기!!
- 이 모듈 기능은 웹 서버에서만 동작함 ...닷홈!!!
- 모듈은 비동기로 처리하는 친구라 write를 쓸 수 없다
=> 그래서 새로운 요소노드를 직접 만들어서 추가해야함
💡 모듈 사용법!!
1. 부르는곳
- script type="module" 타입에 너 지금 모듈이라고 말해줘야함
- 부르는 문법 import show from './module_aa.js'
- export detault가 아닌 것들은 import 할 때 반드시 {} 안에 작성
- 같은 문서 안에 있는 여러개 한번에 import 할 땐 디폴트 붙은 애는 따로 나머지는 {}안에
import show, {addTextToBody, num, age} from './module_aa.js'2. 부름 받는 곳
- 다른 js에서 show를 임포트 할 수 있도록 하려면 반드시 내보내야함
export 키워드 붙이기!!- 단, 하나의 .js안에서 여러개를 export 할 수 있음. 그 중에 반드시 한개는 default 키워드가 필요함
- default가 없으면 함수 선언하면서 export를 명시
module.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>Js es6 module</title>
<!-- JS는 다른 JS에서 만든 클래스나 변수를 사용 할 수 없다 -->
<!-- 만약 앱을 제작중이라면 HTML에서 JS 파일을 연결하여 사용하기에 -->
<!-- 서로 다른 JS의 함수나 변수를 사용할 수 있음 -->
<!-- <script src="./module_aa.js"></script> -->
<!-- 하지만 React Native나 JS를 서버용 언어로 사용하는 node.js 에서는 HTML없이 프로그램이 동작함
자스로만 돌아가야하기 때문에 노드제이에스를 설치해여함 -->
<!-- 이 모듈 기능은 웹 서버에서만 동작함 ...닷홈 -->
<!-- 모듈은 비동기로 처리하는 친구라 write를 쓸 수 없다 -->
<script type="module">
// html안에서는 모듈 import 쓰러면 타입을 써줘야 알아먹음
//다른 JS의 함수, 변수, 클래스를 가져오는 문법
// import show from './module_aa.js'
//export detault가 아닌 것들은 import 할 때 반드시 {} 안에 작성
// import {addTextToBody} from './module_aa.js'
//변수나 상수도 가져오기 가능
// import {num, age} from './module_aa.js'
//같은 문서 안에 있는 여러개 한번에 import
import show, {addTextToBody, num, age} from './module_aa.js'
//import 하는 것의 이름을 이곳에서 변경 가능
// import {num as n , age} from './module_aa.js'
show();
addTextToBody("dkdkdk");
alert(`${num} \n ${age}`)
</script>
</head>
<body>
</body>
</html>module_aa.js
function show(){
//document.write("show!!!")
//모듈 타입일때는 document.write()사용 못함
//그래서 새로운 요소노드를 직접 만들어서 추가해야함
const e= document.createElement('h4')
e.textContent= "show!!"
document.body.appendChild(e)
}
//다른 js에서 show를 임포트 할 수 있도록 하려면 반드시 내보내야함
//단, 하나의 .js안에서 여러개를 export 할 수 있음. 그 중에 반드시 한개는 default 키워드가 필요함
export default show
//또 다른 함수도 export 해보기
export function addTextToBody(message) {
const e = document.createElement("h4")
e.textContent = message
document.body.appendChild(e)
}
// export default addTextToBody //ERROR - default는 문서에서 하나만 가능
// export addTextToBody // ERROR - default가 없으면 함수 선언하면서 export를 명시
//변수나 상수도 export 가능
export const num = 100;
export let age = 20;
보조기억장치