Visitar URL original
ES6 commit · Jaehyunleejava/JavaScript@523aa2b · GitHub
Skip to content

Commit 523aa2b

Browse files
yjkwon07yjkwon07
committed
ES6 commit
1 parent 62fd73e commit 523aa2b

28 files changed

Lines changed: 993 additions & 0 deletions

‎ES2015(ES6)/1. Scope/1. ES2015(ES6) 시작하기.txt‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
ES6.
2+
3+
ES6 === ES2015
4+
(ES2016, ES2017....)
5+
6+
ES2015
7+
개선된 JavaScript문법
8+
ES6 browser compatibility의 훌륭한 지원
9+
ES6를 기반으로 한 JavaScript 생태계의 확산

‎ES2015(ES6)/1. Scope/2. let.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var name = "global var";
2+
3+
(function let_p() {
4+
console.log(name);
5+
// out: global var
6+
var homevar = "homevar";
7+
//for(let i = 0; i < 100; i++)
8+
for(var i = 0; i < 100; i++) {
9+
}
10+
// scope chain
11+
// function단위의 scope만 존재했기 때문에
12+
// fucntion안의 지역변수값을 먼저 찾고 그게 없다면
13+
// 전역변수로 위로 scope chain으로 찾게 된다.
14+
console.log(i);
15+
// out: 100
16+
// let -> exception
17+
18+
// let
19+
// block scope
20+
if(true) {
21+
let myif = "myif";
22+
}
23+
// console.log(myif) -> exception
24+
})();

‎ES2015(ES6)/1. Scope/3. let과 closure.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
(function closure_p() {
2+
/*
3+
closure scope
4+
callback은 나중에 실행된다.
5+
callback이 가지고 있는 i 값은 callback 밖에 있는 var i를 참조 하여
6+
클로저 변수를 가지게 된다.
7+
i 값이 변경이 되다 보니... i를 참조하여 쉐어 하고 있는 상황에
8+
i는 마지막에 4가 되어 모두 4가 나오게 된다.
9+
*/
10+
/*
11+
var list = document.querySelector("li");
12+
for (var i = 0; i < list.clientHeight; i++) {
13+
list[i].addEventListener("click", function () {
14+
console.log(i + "번째 리스트 입니다.");
15+
});
16+
}
17+
*/
18+
19+
// let을 사용하기
20+
// 지역변수화 시키기
21+
for (let i = 0; i < list.clientHeight; i++) {
22+
list[i].addEventListener("click", function () {
23+
console.log(i + "번째 리스트 입니다.");
24+
});
25+
}
26+
})();

‎ES2015(ES6)/1. Scope/4. const-선언된 변수 지키기.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// const - 선언된 변수 지키기
2+
// var로 대문자로 약속을 하는 상황
3+
function isYourHome() {
4+
// 상수 키워드로 약속 지켰지만 변경이 됨..
5+
var HOME_NAME = "my house";
6+
HOME_NAME = "your house";
7+
}
8+
9+
// 변경을 금지 시킴
10+
function isYourHome() {
11+
const HOME_NAME = "my house";
12+
HOME_NAME = "your house";
13+
}
14+
15+
// So what?
16+
function home() {
17+
const homename = [1, 2, 3, 3,];
18+
homename = ["1", "2"];
19+
console.log(homename);
20+
// const를 기본으로 사용한다.
21+
// 그런데 변경이 될 수 잇는 변수는 let을 사용한다.
22+
// var는 사용하지 않는다.
23+
}

‎ES2015(ES6)/1. Scope/5. const 특성과 immutable array.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// 1.const 특성
2+
function whatIsHome() {
3+
const list = ["apple", "orange" , "watermelon"];
4+
list.push("bananaa");
5+
// 추가가 됨....
6+
// const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.
7+
// 절대 불변이 아니다.
8+
// 일종의 값을 재할당하는 코드만 불가능하다.(주소)
9+
}
10+
11+
/*
12+
2.immutable array
13+
***immutable array를 어떻게 만들지?
14+
뒤로가기, 앞으로가기 데이터를 저장해서 보여주어야 하는 상황.
15+
array는 참조하는 값이 바뀜..
16+
이전의 데이터를 알 수 없다.
17+
So immutable(불변)
18+
*/
19+
// 불변의 array!!!
20+
// list를 그대로 보관 바뀜이 없음
21+
const list = ["apple", "orange", "watermelon"];
22+
// 새로운 배열
23+
list2 = [].concat(list, "banana");
24+
// false
25+
// 증명
26+
console.log(list === list2);

‎ES2015(ES6)/2. String/1. ES2015 String 에 새로운 메서드들.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// ES2015 String에 새로운 메서드들
2+
let str = "hello world ! ^^ ~~~";
3+
let matchstr = "hello";
4+
let endchstr = "^ ~~~";
5+
// 함께 시작하니?
6+
console.log(str.startsWith(matchstr));
7+
// 함께 끝나니?
8+
console.log(str.endsWith(endchstr));
9+
// world라는 글자가 들어가 있어?
10+
console/log("include test ", str.includes("world"));

‎ES2015(ES6)/3. Array/1. for of - 순회하기.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// for of - 순회하기
2+
var data = [1, 2, undefined, NaN, null, ""];
3+
for (var i = 0; i < data.length; i++) {
4+
console.log(i);
5+
}
6+
7+
data.forEach(function (value) {
8+
console.log("valueis", vlaue);
9+
});
10+
11+
// bad............
12+
for (let idx in data) {
13+
console.log(data[idx]);
14+
}
15+
16+
// for - in 의 문제점(Array)
17+
// Objeect도 순회한다. array도 일종의 Object
18+
// 자신이 갖고 있지 않은 상위의 값도 포함해서 결과에 출력할 수 있다.
19+
var data = [1, 2, undefined, NaN, null, ""];
20+
Array.prototype.getIndex = function () { };
21+
// 출력시 function(){} 출력
22+
23+
// So!!! for - of
24+
for(let value of data) {
25+
console.log(value);
26+
}
27+
28+
// 배열 뿐만 아니라 문자열도
29+
// 문자 단위로 출력 (공백도 포함)
30+
var str = "hello world!!!";
31+
for(let value of str) {
32+
console.log(value);
33+
}

‎ES2015(ES6)/3. Array/2. spread operator - 배열의 복사.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//spread operator, 펼침연산자
2+
let pre = ["apple", "orange", 100];
3+
let newData = [...pre];
4+
5+
console.log(pre, newData);
6+
// ["apple", "orange", 100]
7+
// ["apple", "orange", 100]
8+
9+
// But!! false 다른 데이터 !!!
10+
console.log(pre === newData);
11+
// immutable ~~~
12+
// 메모리의 새로운 공간에 새로운 데이터를 넣어 참조
13+
// 완전히 복사
14+
15+

‎ES2015(ES6)/3. Array/3. spread operator - 몇가지 활용.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// spread operator - 몇가지 활용
2+
let pre = [100, 200, "hello", null];
3+
4+
// 배열을 특정 위치에 끼워넣을 때 활용
5+
let newData = [0, 1, 2, 3, ...pre, 4];
6+
console.log(newData);
7+
// [0, 1, 2, 3, 100, 200, "hello", null, 4]
8+
9+
function sum(a, b, c) {
10+
return a + b + c;
11+
}
12+
13+
let pre2 = [100 ,200 ,300];
14+
// 너무 귀찮아.
15+
sum(pre2[0] , pre2[1] , pre2[2]);
16+
17+
// 1 sol. 이전 방법
18+
sum.apply(null, pre2);
19+
// out: 600
20+
21+
// 2. spread operator
22+
// -> immutahle array
23+
//즉, 배열을 바꾸지 않고 새로운 값을 복사할 수 있는 방법을 제공
24+
// 배열을 merge하거나 spread하는방법으로
25+
// 배열을 합치거나 펼쳐진 상태로 새로운 인자값으로 전달할 수 있는 기능
26+
sum(...pre2);
27+
28+
console.log(sum.apply(null, pre2));
29+
console.log("result =>", sum(...pre2));

‎ES2015(ES6)/3. Array/4. from 메서드로 진짜 배열 만들기.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//from 메서드로 진짜 배열 만들기
2+
function addMark() {
3+
let newData = [];
4+
for (let i = 0; i < arguments.length; i++) {
5+
newData.push(arguments[i] + "!");
6+
}
7+
console.log(newData);
8+
}
9+
// 인자값을 안주더라도 내부값의 argument(객체)라는 펀션아안에 있는
10+
// 내부 지역변수와 같은 특별한 값을 이용한다. -> 베열과 비슷한 형태
11+
// 아주 권장되는 패턴은 아니다.
12+
addMark(1, 2, 3, 4, 5);
13+
14+
15+
// 1. Error -> arguments는 map을 못쓴다.
16+
function addMark() {
17+
// map을 사용하여 순회하면서 필요한 값을 추가하고,
18+
// 새로운 배열을 반환
19+
// But arguments는 map을 못쓴다.. 배열이 아니기 때문에
20+
let newData = arguments.map(function (value) {
21+
return value + "!";
22+
});
23+
24+
console.log(newData);
25+
}
26+
27+
// 2. from!!!
28+
function addMark2() {
29+
// form으로 진짜 배열로 만든다.
30+
let newArray = Array.from(arguments);
31+
let newData = newArray.map(function (value) {
32+
return value + "!";
33+
});
34+
console.log(newData);
35+
}

0 commit comments

Comments
 (0)