Skip to content

Instantly share code, notes, and snippets.

@sorie

sorie/index.html

Created January 3, 2019 02:54
Show Gist options
  • Save sorie/bb239d2b6659ff6f2027b9ef2329cdee to your computer and use it in GitHub Desktop.
Save sorie/bb239d2b6659ff6f2027b9ef2329cdee to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/konuyod
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
/***************************
****************************
** ES6 제대로 알기
****************************
***************************/
/***************************
** let의 활용
***************************/
var list = document.querySelectorAll("li");
for(let i=0; i<list.length; i++){
list[i].addEventListener("click", function(){
console.log(i + "번째 리스트 입니다.");
});
}
/***************************
** const 선언과 변수 지키기, immutable array
***************************/
function home(){
const list = ["apple","orange", "watermelon"];
list.push("banana");
console.log(list);
}
const list = ["apple","orange","watermelon"];
list2 = [].concat(list,"banana");
console.log(list === list2);
/***************************
** ES2015 새로운 메서드들
***************************/
let str = "hello world !^^";
let matchstr = "hello";
// console.log(str.startsWith(matchstr));
// console.log(str.endsWith(matchstr));
console.log(str.includes("world"));
/***************************
** for of 순회하기
***************************/
var data = [1,2,undefined,NaN,null,""];
// data.forEach(function(value){
// console.log("value is", value);
// });
//for in을 사용하면 안되는 이유
Array.prototype.getIndex =function(){};
for(let idx in data) {
// console.log(data[idx]);
}
var str = "hello world!!!";
for(let value of str){
console.log(value);
}
/***************************
** spread operator 복사 및 활용
***************************/
function sum(a,b,c) {
return a+b+c;
}
let pre = [100,200,300];
console.log(sum.apply(null,pre));
console.log(sum(...pre));
/***************************
** from 메서드로 진짜 배열 만들기
***************************/
function addMark(){
let newArray = Array.from(arguments);//배열 만드는방법
let newData = newArray.map(function(value){
return value + "!";
});
console.log(newData);
}
addMark(1,2,3,4,5);
/***************************
** Destructuring
***************************/
let data = ["crong","honux","jk","jinny"];
// let jisu = data[0];
// let jung = data[2];
let [jisu,,jung] = data;
console.log(jisu, jung);
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);
</script>
<script id="jsbin-source-javascript" type="text/javascript">/***************************
****************************
** ES6 제대로 알기
****************************
***************************/
/***************************
** let의 활용
***************************/
var list = document.querySelectorAll("li");
for(let i=0; i<list.length; i++){
list[i].addEventListener("click", function(){
console.log(i + "번째 리스트 입니다.");
});
}
/***************************
** const 선언과 변수 지키기, immutable array
***************************/
function home(){
const list = ["apple","orange", "watermelon"];
list.push("banana");
console.log(list);
}
const list = ["apple","orange","watermelon"];
list2 = [].concat(list,"banana");
console.log(list === list2);
/***************************
** ES2015 새로운 메서드들
***************************/
let str = "hello world !^^";
let matchstr = "hello";
// console.log(str.startsWith(matchstr));
// console.log(str.endsWith(matchstr));
console.log(str.includes("world"));
/***************************
** for of 순회하기
***************************/
var data = [1,2,undefined,NaN,null,""];
// data.forEach(function(value){
// console.log("value is", value);
// });
//for in을 사용하면 안되는 이유
Array.prototype.getIndex =function(){};
for(let idx in data) {
// console.log(data[idx]);
}
var str = "hello world!!!";
for(let value of str){
console.log(value);
}
/***************************
** spread operator 복사 및 활용
***************************/
function sum(a,b,c) {
return a+b+c;
}
let pre = [100,200,300];
console.log(sum.apply(null,pre));
console.log(sum(...pre));
/***************************
** from 메서드로 진짜 배열 만들기
***************************/
function addMark(){
let newArray = Array.from(arguments);//배열 만드는방법
let newData = newArray.map(function(value){
return value + "!";
});
console.log(newData);
}
addMark(1,2,3,4,5);
/***************************
** Destructuring
***************************/
let data = ["crong","honux","jk","jinny"];
// let jisu = data[0];
// let jung = data[2];
let [jisu,,jung] = data;
console.log(jisu, jung);
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);
</script></body>
</html>
Raw
jsbin.konuyod.js
/***************************
****************************
** ES6 제대로 알기
****************************
***************************/
/***************************
** let의 활용
***************************/
var list = document.querySelectorAll("li");
for(let i=0; i<list.length; i++){
list[i].addEventListener("click", function(){
console.log(i + "번째 리스트 입니다.");
});
}
/***************************
** const 선언과 변수 지키기, immutable array
***************************/
function home(){
const list = ["apple","orange", "watermelon"];
list.push("banana");
console.log(list);
}
const list = ["apple","orange","watermelon"];
list2 = [].concat(list,"banana");
console.log(list === list2);
/***************************
** ES2015 새로운 메서드들
***************************/
let str = "hello world !^^";
let matchstr = "hello";
// console.log(str.startsWith(matchstr));
// console.log(str.endsWith(matchstr));
console.log(str.includes("world"));
/***************************
** for of 순회하기
***************************/
var data = [1,2,undefined,NaN,null,""];
// data.forEach(function(value){
// console.log("value is", value);
// });
//for in을 사용하면 안되는 이유
Array.prototype.getIndex =function(){};
for(let idx in data) {
// console.log(data[idx]);
}
var str = "hello world!!!";
for(let value of str){
console.log(value);
}
/***************************
** spread operator 복사 및 활용
***************************/
function sum(a,b,c) {
return a+b+c;
}
let pre = [100,200,300];
console.log(sum.apply(null,pre));
console.log(sum(...pre));
/***************************
** from 메서드로 진짜 배열 만들기
***************************/
function addMark(){
let newArray = Array.from(arguments);//배열 만드는방법
let newData = newArray.map(function(value){
return value + "!";
});
console.log(newData);
}
addMark(1,2,3,4,5);
/***************************
** Destructuring
***************************/
let data = ["crong","honux","jk","jinny"];
// let jisu = data[0];
// let jung = data[2];
let [jisu,,jung] = data;
console.log(jisu, jung);
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment