1929
No
인프런 : 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
1. 모던 자바스크립트 개발을 위한 ES6 강좌 소개
javascript 표준을 정의하는 ECMAScript 중 최근 가장 중요한 변화를 겪었던 ECMAScript 2015(이하 ES6) 를 학습해볼 수 있는 강좌입니다. ES6 에서 새롭게 추가된 syntax 와 기능들을 코드를 통해서 짚어보고 사용해 보면서 javascript 의 이런저런 특징들을 알 수 있게 됩니다. 또한 학습 중간 중간 '배열만들기' 와 '로또번호만들기' 등의 간단한 실습 예제들을 만들어, 생각해보면서 자기의 것으로 만들 수 있도록 도와주는 실습형 강좌입니다.
자바스크립트 테스트 사이트
1) https://jsbin.com/?html,js,console
소스 : https://github.com/braverokmc79/javascript-modern-ES6
scope
1.let
강의 : https://www.inflearn.com/course/es6-강좌-자바스크립트/unit/6975?tab=curriculum
var name = "global var";
function home() {
var homevar = "homevar";
for (let i = 0; i < 100; i++) {
}
//console.log(i);
if (true) {
let myif = "myif";
}
console.log(myif);
}
home();
2.let 과 closure
<!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>
<style>
li{
list-style: none;
border: 1px solid #eeee;
padding: 10px;
width: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<ul>
<li>javarcirpt</li>
<li>java</li>
<li>python</li>
<li>django</li>
</ul>
</div>
<script>
var list =document.querySelectorAll("li");
// for(var i=0; i<list.length; i++){
// list[i].addEventListener("click", function(){
// console.log(i +"번째 리스트입니다.");
// });
// }클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것
// var 변수 사용시 외부에 함수 i값이 누적되어 " 4번째 리스트입니다." 출력
// =>
for(let i=0; i<list.length; i++){
list[i].addEventListener("click", function(){
console.log(i +"번째 리스트입니다.");
});
}
</script>
</body>
</html>
3.const - 선언된 변수 지키기
// function home() {
// var homename = "my house";
// homename = "your house";
// console.log(homename);
// }
function home() {
const homename = "my house";
homename = "your house";
console.log(homename);
}
//const 를 기본으로 사용한다.
//그런데 변경이 될 수 있는 변수는 let을 사용한다.
//var 는 사용하지 않는다.
home()
4.const 특성과 immutable array
function home() {
const list = ["apple", "orange", "watermelon"];
list.push("banana");
console.log(list);
}
//const 를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.
home();
//immutable array 를 어떻게 만들지?
const list = ['apple', "orange", "watermelon"];
list2 = [].concat(list, "banana");
console.log(list === list2);
String
5.ES2015 String 에 새로운 메서드들
//ES2015 string 에 새로운 메서들.
let str = "hello world ! ^^ ~~";
let matchstr = "^ ~~";
console.log(str.startsWith(matchstr));
console.log(str.endsWith(matchstr));
console.log("includes test :", str.includes("world"));
Array
6.for of - 순회하기
var data = [1, 2, undefined, NaN, null, ""];
for (var i = 0; i < data.length; i++) {
console.log(data[i]);
}
data.forEach(function (value) {
console.log(value);
});
//object 사용, array 에서는 사용하지 않는다.
//문제점 for in 을 사용시 자신가지고 있지 않는 상위 객체 까지 출력
//Array.protoype.getIndex =function(){};
for (let idx in data) {
console.log(data[idx]);
}
console.log("배열 출력 for of :");
for (let value of data) {
console.log(value);
}
console.log("str for of==> 문자열도 문자 단위로 출력 가능");
var str = "hello world !!!";
for (let value of str) {
console.log(value);
}
7.spread operator - 배열의 복사
//spread operator, 펼침연산자 let pre = ["apple", "orange", 100]; let newData = [...pre]; console.log(pre, newData); console.log(pre === newData);
8.spread operator - 몇가지 활용
let pre = [100, 200, "hello", null];
let newData = [0, 1, 2, 3, ...pre, 4];
console.log(newData);
function sum(a, b, c) {
return a + b + c;
}
let pre2 = [100, 200, 300];
console.log("전개 연산자 이전 apply 사용 : ", sum.apply(null, pre2));
console.log("전개 연산자 :", sum(...pre2));
9.from 메서드로 진짜 배열 만들기
function addMark() {
//let newData = [];
// for (let i = 0; i < arguments.length; i++) {
// newData.push(arguments[i] + "!");
// }
//가짜 배열을 from 통해 진째 배열로 만든다.
let newArray = Array.from(arguments);
let newData = newArray.map(function (value) {
return value + "!";
})
console.log(newData);
}
addMark(1, 2, 3, 4, 5, 6, 7, 8, 9);
실습 1 - 특정 문자열이 포함된 배열 만들어 반환하기
10.실습 예제1
<!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>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>strawberry</li>
</ul>
<script>
function print(){
/*
filter, includes, from 을 사용해서 문자열 'e' 가 포함된 노드로
구성된 배열을 만들어서 반환하기
*/
}
print();
</script>
</body>
</html>
11.실습 예제 1 풀어보기
<!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>
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
<li>strawberry</li>
</ul>
<script>
function print(){
/*
filter, includes, from 을 사용해서 문자열 'e' 가 포함된 노드로
구성된 배열을 만들어서 반환하기
*/
const li=document.querySelectorAll("li");
console.log("li : " , toString.call(li));
const newArr=Array.from(li).filter(item=>{
console.log(item.innerText);
return item.innerText.includes("e")
});
console.log(" ================");
newArr.forEach((element, index) => {
console.log("newArr : ",index, element.innerText);
});
}
print();
</script>
</body>
</html>
Object
12.간단히 객체생성하기
const name = "crong";
const age = 33;
const obj = {
name: name,
age: age
}
//console.log(obj);
function getObj() {
let name = "crong";
const getName = function () {
return name;
}
const setName = function (newname) {
name = newname;
}
const printName = function () {
console.log(name);
}
return {
getName,
setName
}
}
var obj2 = getObj();
console.log(obj2.setName(11));
console.log(obj2.getName());
console.log(obj2.printName);
Destructuring (구조 분해 할당)
13.Destructuring Array (배열 분해하기)
let data = ["crong", "honux", "jk", "jinny"]; // let jisu = data[0]; // let jung = data[2]; let [jisu, , jung] = data; console.log(jisu, jung);
crong jk
14.Destructuring Object
let obj = {
name: "crong",
address: "Korea",
age: 10
}
let { name, age } = obj;
console.log(name, age);
let { name: myName, age: myAge } = obj;
console.log(myName, myAge);
15.Destructuring 활용 JSON파싱
var news = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 2,
"id": 2,
"title": "2222sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "2222quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
]
let [obj1] = news;
// let { title } = obj1;
// console.log(title);
let { title, body } = news[1];
console.log(title, body);
16.Destructuring 활용_Event객체전달
var news = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 2,
"id": 2,
"title": "2222sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "2222quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
];
function getNewsList([, { title }]) {
console.log(title);
}
getNewsList(news);
<!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>
<div>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</div>
<script>
document.querySelector("div").addEventListener("click", function({target}){
console.log(target.tagName);
console.log(target.innerText);
})
</script>
</body>
</html>
Set & WeakSet
17.Set 으로 유니크한 배열만들기
let mySet = new Set();
//console.log(toString.call(mySet));
//set : 중복없이 유일한 값을 저장하려고 할때, 이미 존재하는지 체크할 때 유용.
mySet.add("crong");
mySet.add("hary");
mySet.add("crong");
console.log("==============");
mySet.forEach(function (v) {
console.log(v);
});
console.log("==============");
console.log(mySet.has("crong"));
mySet.delete("crong");
console.log("==============");
mySet.forEach(function (v) {
console.log(v);
});
18.WeakSet 으로 효과적으로 객체타입저장하기
//weakset
//참조를 가지고 있는 객체만 저장이 가능하다.
//객체형태를 중복없이 저장하려고 할때 유용하다.
let arr = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let obj = { arr, arr2 };
let ws = new WeakSet();
ws.add(arr);
//ws.add(111);
// ws.add("111");
// ws.add(null);
//ws.add(function () { });
//ws.add(arr);
ws.add(obj);
arr = null;
arr2 = null;
console.log(ws);
map & WeakMap
1) Array -> Set, weakset
2) Object -> map, weakmap
Map & WeakMap
19.Map & WeakMap 추가정보를 담은 객체저장하기기
// map & WeakMap
// 1) Array -> Set, weakset
// 2) Object -> map, weakmap
//map 은 key/value
let wm = new WeakMap();
let myfun = function () { };
//이 함수가 얼마나 실행될지를 알려고 할때.
wm.set(myfun, 0);
//console.log(wm);
let count = 0;
for (let i = 0; i < 10; i++) {
count = wm.get(myfun); //get value
count++;
wm.set(myfun, count);
}
//myfun 함수가 키값
console.log(wm);
console.log(wm.get(myfun));
myfun = null;
console.log(wm.has(myfun));
20.WeakMap 클래스 인스턴스 변수 보호하기
//WeakMap 활용
// function Area(height, width) {
// this.height = height;
// this.width = width;
// }
// Area.prototype.getArea = function () {
// return this.height * this.width;
// }
// let myarea = new Area(10, 20);
const wm = new WeakMap();
function Area(height, width) {
wm.set(this, { height, width });
}
Area.prototype.getArea = function () {
const { height, width } = wm.get(this);
return height * width;
}
let myarea = new Area(10, 20);
console.log(myarea.getArea());
console.log(myarea.height);
myarea = null;
console.log(wm.has(myarea));
실습예제 2 - Destructuring 과 Set 을 활용한 로또 번호 생성기
21.로또 번호 생성기
const SETTING = {
name: "LUCKY LOTTO!",
count: 6,
maxNumber: 36
}
function getRandomNumber({ count, maxNumber }) {
console.log(count, maxNumber);
let mySet = new Set();
while (true) {
if (mySet.size === count) break;
let result = Math.floor(Math.random() * maxNumber) + 1;
mySet.add(result);
}
return mySet;
}
console.log(getRandomNumber(SETTING));
Template
22.Template처리
const data = [
{
name: "coffee-bean",
order: true,
items: ['americano', 'milk', 'green-tea']
},
{
name: 'starbucks',
order: false
}
]
//json 으로 응담을 받고, javascript obejct 변환한 후에 어떠한 데이터 처리 조작을 한 후에 dom 에 추가
//데이터, + HTM 문자열의 결합이 필요하기 때문에,
const template = `<div>welcome ${data[0].name} !!</div>`;
console.log(template);
23.Tagged Template literals
<!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>
<div id="message"></div>
<script>
const data = [
{
name: "coffee-bean",
order: true,
items: ['americano', 'milk', 'green-tea']
},
{
name: 'starbucks',
order: false
}
]
//json 으로 응담을 받고, javascript obejct 변환한 후에 어떠한 데이터 처리 조작을 한 후에 dom 에 추가
//데이터, + HTM 문자열의 결합이 필요하기 때문에,
function fn(tags, name, items) {
console.log(tags);
if (typeof items === "undefined") {
items = "주문가능한 상품이 없습니다.";
}
return (tags[0] + name + tags[1] + items + tags[2]);
}
const template = fn`<div>welcome ${data[0].name} !!</div>
<h2>주문가능항목</h2><div>${data[1].items}</div>`;
console.log(template);
data.forEach((v) => {
let template = fn`<div>welcome ${data[0].name} !!</div>
<h2>주문가능항목</h2><div>${data[1].items}</div>`;
document.querySelector("#message").innerHTML += template;
})
</script>
</body>
</html>
function
24.Arrow function 활용
//arrow function
setTimeout(() => {
console.log("setTimeout arrow");
}, 1000);
// let newArr = [1, 2, 3, 4, 5, 6].map((v) => {
// return v * 2;
// });
let newArr = [1, 2, 3, 4, 5, 6].map((v) => v * 2);
console.log(newArr);
25.Arrow function 의 this context
//this context of Arrow function
const myObj = {
runTimeout() {
setTimeout(function () {
console.log(this === window);
this.printData();
}, 200);
},
printData(){
console.log("hi Codeequal");
}
}
myObj.runTimeout();
여기서 this 는 window 라서 오류
화살표 함수를 사용할 경우 this 는 myObj 가리 킴
//this context of Arrow function
const myObj = {
runTimeout() {
setTimeout(()=>{
console.log(this === window);
this.printData();
}, 200);
},
printData(){
console.log("hi Codeequal");
}
}
myObj.runTimeout();
//this context of Arrow function
const el =document.querySelector("p");
const myObj={
register(){
el.addEventListener("click", (evt)=>{
this.printData();
})
},
printData(){
console.log("clicked");
}
}
myObj.register();
26.function default paramaters
//default parameter
function sum(value, size) {
size = size || 1;
return value * size;
}
console.log(sum(3));
function sum2(value, size = 10) {
return value * size;
}
console.log(sum2(3));
function sum3(value, size = { value: 5 }) {
return value * size.value;
}
console.log(sum3(5));
27.rest paramaters
//reset parameter
function checkNum() {
const agrArray = Array.prototype.slice.call(arguments);
console.log(agrArray);
console.log(toString.call(agrArray));
const result = agrArray.every((v) => typeof v === "number");
console.log("result : ", result);
}
//const result = checkNum(10, 2, 3, 5, 6, "555");
// ...agrArray 스프레이드 배열 매개변수가 다음과 같은 역할을 한다.
// const agrArray = Array.prototype.slice.call(arguments);
function checkNum2(...agrArray) {
console.log("arguments : ", arguments);
console.log(toString.call(agrArray));
const result = agrArray.every((v) => typeof v === "number");
console.log("result : ", result);
// agrArray.map(arg => console.log(arg));
}
const result2 = checkNum2(10, 2, 3, 5, 6, "555", false);
객체
28.class 를 통한 객체생성
//Es6 class
function Health(name) {
this.name = name;
}
Health.prototype.showHealth = function () {
console.log(this.name + "님 안녕하세요.");
}
const h = new Health("crong");
h.showHealth();
=>
//Es6 class
class Health {
constructor(name, lastTime) {
this.name = name;
this.lastTime = lastTime;
}
showHealth() {
console.log("안녕하세요.." + this.name);
}
}
const myHealth = new Health("crong");
myHealth.showHealth();
console.log(toString.call(Health));
29.Object assign으로 JS객체만들기
//Object assign 메서드.
var healthObj = {
init: function (name, healthTime) {
this.name = name;
this.healthTime = healthTime;
this.showHelth();
},
showHelth: function () {
console.log("오늘 운동시간 : " + this.healthTime);
}
}
healthObj.init("홍길동", "12:00");
console.log("-----------------");
console.log("");
const myHealth = Object.create(healthObj);
myHealth.healthTime = "11:20";
myHealth.name = "crong";
console.log(myHealth);
console.log("-----------------");
console.log("");
const myHealth2 = Object.assign(Object.create(healthObj), {
name: "crong",
lastTime: "11:30"
});
console.log("Object.assign myHealth2 :", myHealth2);
추
출력=>
오늘 운동시간 : 12:00
-----------------
{ healthTime: '11:20', name: 'crong' }
-----------------
Object.assign myHealth2 : { name: 'crong', lastTime: '11:30'
30.Object assign으로 Immutable 객체만들기
React - 생활코딩 4 - Redux , 글 생성 , 수정,삭제 구현 Object.Assign 깊은 복사
복사 방법
처음에 빈 개열 객체 Object.assign(빈객체, 복사대상객체값, 변경할 값또는 빈객체)
Object.assign({}, previousObj, {
lastTime: "12:30",
name: "호녹스",
age: 99
});
//Object assign 메서드
//객체 복사
const previousObj = {
name: "crong",
lastTime: "11:30"
}
const myHealth = Object.assign({}, previousObj, {
lastTime: "12:30",
name: "호녹스",
age: 99
});
console.log("myHealth is : ", myHealth);
console.log("previousObj === myHealth :", previousObj === myHealth);
const myHealth2 = Object.assign({}, previousObj, {});
console.log("previousObj === myHealth2 :", previousObj === myHealth2);
출력 :
myHealth is : { name: '호녹스', lastTime: '12:30', age: 99 }
previousObj === myHealth : false
previousObj === myHealth2 : false
30.Object setPrototypeOf로 객체만들기
//Object setPrototypeOf로 객체만들기
const healthObj = {
showHealth: function () {
console.log("오늘 운동시간 : " + this.healthTime);
},
setHealth: function (newTime) {
this.healthTime = newTime;
}
}
// const myHealth = Object.assign(Object.create(healthObj), {
// name: "crong",
// lastTim: "11:20"
// });
const newObj = Object.setPrototypeOf({
name: "crong",
lastTim: "11:20"
}, healthObj);
console.log("myHealth is", newObj);
myHealth is { name: 'crong', lastTim: '11:20' }
31.Object setPrototypeOf 로 객체간 prototype chain생성하기
//Object setPrototypeOf 로 객체간 prototype chain생성하기
const healthObj = {
showHealth: function () {
console.log("오늘 운동시간 : " + this.healthTime);
},
setHealth: function (newTime) {
this.healthTime = newTime;
}
}
//child obj
const healthChildObj = {
getAge: function () {
return this.age;
}
}
//healthObj , healthChildObj
Object.setPrototypeOf(healthChildObj, healthObj);
const childObj = Object.setPrototypeOf({
age: 22
}, healthChildObj);
childObj.setHealth("11:55");
childObj.showHealth();
console.log("childeobj is", childObj);
댓글 ( 4)
댓글 남기기