기능적이라는 것의 의미
- 변수로서의 함수Functions as Variables
- 화살표의 함수Arrow Functions
- 객체 메서드Object Methods
4. 배열 내의 함수Functions within Arrays
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title>What It Means to Be Functional</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<h1>Functional JavaScript</h1>
<p>Open the console</p>
<script type="text/babel">
const messages = [
"함수는 배열에 넣을 수 없다.", [0]
message => console.log(message),[1]
"일반적인 값과 같다",[3]
message => console.log(message)[4]
]
messages[1](messages[0])
messages[3](messages[2])
</script>
</body>
</html>
- 인수로서의 함수Functions as Arguments
-함수를 매개변수로 넘길 수 있다
-함수를 일반적인 변수처럼 매개변수로 넣어주거나 하는 것이 가능타
- 반환된 함수Returned Functions
7. ES6 개선 사항ES6 Enhancements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수형이란 무엇인가</title>
</head>
<body>
<h1>함수형 자바스크립트</h1>
<p>open the console</p>
<script>
var log = function(massage){
console.log(massage);
}
log("자바스크립트는 함수를 변수에 넣을 수 있습니다.")
</script>
</body>
</html>
에서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수형이란 무엇인가</title>
</head>
<body>
<h1>함수형 자바스크립트</h1>
<p>open the console</p>
<script>
var log = massage => console.log(massage);
log("es6문법.")
</script>
</body>
</html>
명령형 대 선언형
1. 필수Imperative
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title>Imperative vs. Declarative</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<h1>Imperative vs. Declarative</h1>
<p>Open the console</p>
<script type="text/babel">
var string = "This is the mid day show with Cheryl Waters"
var urlFriendly = ""
for (var i=0; i<string.length; i++) {
if (string[i] === " ") {
urlFriendly += "-"
} else {
urlFriendly += string[i]
}
}
urlFriendly = urlFriendly.toLowerCase()
console.log(urlFriendly)
</script>
</body>
</html>
2. 선언적Declarative
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title>Imperative vs. Declarative</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<h1>Imperative vs. Declarative</h1>
<p>Open the console</p>
<script type="text/babel">
const string = "This is the mid day show with Cheryl Waters"
const urlFriendly = string.replace(/ /g, "-").toLowerCase()
console.log(urlFriendly)
</script>
</body>
</html>
미국 인구 채우기
- 미국 채우기Populate the US
populate-united-states.html
populate-united-states.js
불변성...
- 돌연변이Mutations
- 객체 할당Object.assign()
- 객체를 사용한 스프레드 연산자
- Array.push()
- Array.concat()
- 배열을 사용한 확산 연산자
