Javascript-OOP

Javascript 객체 지향 프로그래밍

서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것

배열과 객체를 만들고, 값을 읽는 법

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const memberArray = ["AAA", "BBB", "CCC"];
console.log("memberArray[2]", memberArray[2]);

//객체
const memberObject = {
manager: "AAA",
developer: "BBB",
designer: "CCC"
};

memberObject.designer = "CCCC"; //객체 이름 수정
console.log("memberObject.designer", memberObject.designer);
console.log("memberObject['designer']", memberObject["designer"]);

delete memberObject.manager;
console.log("delete memberObject.manager", memberObject.manager);

-> result

1
2
3
4
5
6
7
8
CCC
memberObject.designer
CCCC
memberObject['designer']
CCCC
delete memberObject.manager

- undefined

반복문을 이용해서 객체의 모든 값에 적근하는 방법

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const memberArray = ["AAA", "BBB", "CCC"];
console.group("array loop");

let i = 0;
while (i < memberArray.length) {
console.log(i, memberArray[i]);
i = i + 1;
}

console.groupEnd("array loop");
const memberObject = {
manager: "AAA",
developer: "BBB",
designer: "CCC"
};
console.group("object loop");
for (let name in memberObject) {
console.log(name, memberObject[name]);
}
console.groupEnd("object loop");

-> result

1
2
3
4
5
6
7
8
9
10
11
12
0
"AAA"
1
"BBB"
2
"CCC"
manager
AAA
developer
BBB
designer
CCC

#객체를 실제로 활용하는 사례

수학적 객체

index.js
1
2
3
console.log(Math.PI);
console.log(Math.random());
console.log(Math.floor(3.9));

객체를 만들어서 연관된 변수와 함수를 정리 정돈

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
console.log("Math.PI", Math.PI);
console.log("Math,random()", Math.random()); //method
console.log("Math.floor(3.9)", Math.floor(3.9));

const MyMath = {
PI: Math.PI,
random: function() {
return Math.random();
},
floor: function(val) {
return Math.floor(val);
}
};

console.log("MyMath.PI", MyMath.PI);
console.log("MyMath.random()", MyMath.random());
console.log("MyMath.floor(3.9)", MyMath.floor(3.9));

const MyMath_PI = Math.PI;
function MyMath_random() {
return Math.random();
}
function MyMath_floor(val) {
return Math.floor(val);
}

console.log(MyMath_PI);

’This’

메소드 내에서 메소드가 속한 객체를 참조 할 때 사용하는 키워드인 this에 대해서 알아보기

자기 자신을 가리키는 대명사 ’this’

index.js
1
2
3
4
5
6
7
8
9
10
const Kim = {
name: "kim",
first: 10,
second: 20,
sum: function() {
return this.first + this.second;
}
};

console.log(Kim.sum());

-> result

1
30

객체를 수동으로 만드는 가내수공업에서 벗어나서 객체를 자동으로 찍어내는 공장인 constructor을 만들어보자

가내수공업으로 객체를 만들 때의 단점

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const kim = {
name: "kim",
first: 10,
second: 20,
third: 30,
sum: function() {
return this.first + this.second + this.third;
}
};

const lee = {
name: "lee",
first: 10,
second: 10,
third: 10,
sum: function() {
return this.first + this.second + this.third;
}
};

console.log(kim.sum());
console.log(lee.sum());

내장된 객체를 통해서 객체 공장의 쓰임을 체험

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const kim = {
name: "kim",
first: 10,
second: 20,
third: 30,
sum: function() {
return this.first + this.second + this.third;
}
};

const lee = {
name: "lee",
first: 10,
second: 10,
third: 10,
sum: function() {
return this.first + this.second + this.third;
}
};

console.log(kim.sum());
console.log(lee.sum());

const d1 = new Date("2019-12-25");
console.log(d1.getFullYear());
console.log(d1.getMonth() + 1); // 0 ,1, 2, 3...

Constructor function 만들기(construct function : 생성자함수)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Person(name, first, second, third) {
this.name = name;
this.first = first;
this.second = second;
this.third = third;
this.sum = function() {
return this.first + this.second + this.third;
};
}

const kim = new Person("kim", 10, 20, 30);
const lee = new Person("lee", 10, 10, 10);
console.log(kim.sum());
console.log(lee.sum());

-> result

1
2
60
30

Prototype

JavaScript의 prototype이 필요한 이유와 prototype을 통해서 코드의 재사용성과 성능을 향상시키는 방법


prototype을 이용해서 코드의 재사용성을 높이고, 성능을 향상시키는 방법

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}

Person.prototype.sum = function() {
return `prototype : ` + (this.first + this.second);
};
//성능과 메모리 절약뿐 아니라 유지보수가 싶다

const kim = new Person("kim", 10, 20);
kim.sum = function() {
return `this : ` + (this.first + this.second);
};
//재정의도 가능하다
const lee = new Person("lee", 10, 10);
console.log(kim.sum());
console.log(lee.sum());

class

클래스에서 생성자 함수를 구현하는 방법

index.js
1
2
3
4
5
6
7
8
9
10
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
}

const kim = new Person("kim", 10, 20);
console.log(kim);

class에서 객체의 method 구현하기

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return `prototype : ` + (this.first + this.second);
}
}

const kim = new Person("kim", 10, 20);
kim.sum = function() {
return `this : ` + (this.first + this.second);
};
const lee = new Person("lee", 10, 10);
console.log(kim.sum());
console.log(lee.sum());

class 상속

클래스를 상속해서 서브 클래스를 만드는 방법

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}

class PersonPlus extends Person {
avg() {
return (this.first + this.second) / 2;
}
}

const kim = new PersonPlus("kim", 10, 20);
console.log(kim.sum());
console.log(kim.avg());

super

부모 클래스에게 일을 시키고 부모가 하지 못하는 일은 나만 하도록 하는 키워드가 super 다.


super( ) 에서 ( ) 안에는 부모 클래스에서의 생성자를 넣는다.

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum() {
return this.first + this.second;
}
}

class PersonPlus extends Person {
constructor(name, first, second, third) {
super(name, first, second);
this.third = third;
}
sum() {
return super.sum() + this.third;
}
avg() {
return (this.first + this.second + this.third) / 3;
}
}

const kim = new PersonPlus("kim", 10, 20, 30);
console.log(kim.sum()); // 60
console.log(kim.avg()); // 20

객체간의 상속

1.proptotype(__proto__)을 이용해서 상속을 구현

index.js
1
2
3
4
5
6
7
8
9
10
11
const superObj = { superVal: "super" };
const subObj = { subVal: "sub" };
subObj.__proto__ = superObj; //subObj 가 superObj의 자식이다.

console.log(subObj.subVal);
console.log(subObj.superVal);

subObj.superVal = "sub";
console.log(superObj.superVal);

// sub super super

2.Object.create를 이용해서 __proto__를 대체하는 방법

index.js
1
2
3
4
5
6
7
8
9
10
const superObj = { superVal: "super" };

const subObj = Object.create(superObj);
subObj.subVal = "sub";
debugger;

console.log(subObj.subVal); //sub
console.log(subObj.superVal); //super
subObj.superVal = "sub";
console.log(superObj.superVal); //super

예제)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const superObj = { superVal: "super" };

const subObj = Object.create(superObj);
subObj.subVal = "sub";
debugger;

console.log(subObj.subVal); //sub
console.log(subObj.superVal); //super
subObj.superVal = "sub";
console.log(superObj.superVal); //super

const kim = {
name: "kim",
first: 10,
second: 20,
sum: function() {
return this.first + this.second;
}
};

// const lee = {
// name: "lee",
// first: 10,
// second: 10,
// avg: function() {
// return (this.first + this.second) / 2;
// }
// };

// lee.__proto__ = kim;

const lee = Object.create(kim);
lee.name = "lee";
lee.first = 10;
lee.second = 10;
lee.avg = function() {
return (this.first + this.second) / 2;
};

console.log(lee.sum());
console.log(lee.avg());

객체와 함수

자바스크립트는에서 함수는 혼자 있으면 개인이고, new가 앞에 있으면 객체를 만드는 신이고, call을 뒤에 붙이면 용병이고, bind를 붙이면 분신술을 부리는 놀라운 존재입니다.

1. call을 통해서 실행할 때마다 this의 값을 변경하는 방법

index.js
1
2
3
4
5
6
7
8
9
10
const kim = { name: "kim", first: 10, second: 20 };
const lee = { name: "lee", first: 10, second: 10 };

function sum(prefix) {
return prefix + (this.first + this.second);
}

// sum();
console.log(sum.call(kim, "=>")); // =>30
console.log(sum.call(lee, ":")); // :20

2. bind를 통해서 독립적이면서도 특정 객체의 메소드 역할을 할 수 있는 함수 만들기

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const kim = { name: "kim", first: 10, second: 20 };
const lee = { name: "lee", first: 10, second: 10 };

function sum(item) {
return item + (this.first + this.second);
}

// sum();
console.log(sum.call(kim, "=>"));
console.log(sum.call(lee, ":"));

const kimSum = sum.bind(kim, "->");
console.log(kimSum()); // ->30

Javascript 기초잡기

Javascript 기본개념

자바스크립트는 사용자와 상호작용을 하는 언어이다.

자바스크립트 이벤트 헨들러들 :
onclick, onchange and so on.

자료형 (data type)

  1. Boolean
  2. number
  3. string
  4. null
  5. undefined
  6. symbol
  7. Object

변수와 대입연산자

x = 1 (오른쪽 1을 왼쪽 x 에 대입한다 라는 뜻)

variable vs constant

변수 바뀔수 있는 함수: 변수(variable) 바뀌지 않는 함수 : 상수 (constant)

비교연산자 (Comparison operators & Boolean)

=== 같다

index.js
1
2
1 === 1; //true
1 === 2; //false

!== 같지않다

index.js
1
2
1 !== 1; //false
1 !== 2; //true

조건문 (Conditional statements)

index.js
1
2
3
4
5
If ( ) {
XXXXXXXXXXX
} else {
XXXXXXXXXXXX
}

If 문에는 true / false의 Boolean값이 온다 즉 Boolean값에 따라서 실행되는 순서가 바뀐다.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<input
id="night_day"
type="button"
value="night"
onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day'
}
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night'
}
"
/>
</body>

리팩토링 (Refactoring)

공장으로 다시 보내서 개선한다?

자기 자신을 가리키는 ’this’를 사용

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<input
type="button"
value="night"
onclick="
if(this.value === 'night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value = 'day';
}
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value = 'night';
}
"
/>
</body>

프로그래밍을 잘하는 팁 : 중복된 코드를 전부다 제거한다.

변수를 활용하여 document.querySelector('body’)를 target에 대입한다.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<input
type="button"
value="night"
onclick="
const target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
}
else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
"
/>
</body>

배열 (Array)

집에 시간이 지날수록 살람이 늘어나게 되고 책장이나 수납상자를 사거나 방을 여러개 늘릴 수 도 있다.
프로그래밍도 마찬가지로 데이터가 많아짐에 따라 복잡해진다.

배열 만들기 :
배열은 대괄호 안에 [ ] 표현 배열을 변수에 넣기 : const XXX = [1, 2, 3];

배열 꺼내오기:

index.js
1
2
3
const XXX = ["a", "b", "c"];

console.log(XXX[0]);

배열에 들어있는값이 몇개 인가 체크하기:

index.js
1
2
3
const XXX = ["a", "b", "c"];

console.log(XXX.length);

배열에 더하기:

index.js
1
2
3
4
5
6
7
8
9
const XXX = ["a", "b", "c"];

XXX.push("d");

console.log(XXX);

const pre = ["aa", "bb", "cc"];
const newData = [...pre, "dd", "ee"];
console.log(newData);

반복문 (Loop)

프로그래밍을 하다보면 반복적으로 복사&붙여넣기 할 경우가 많이 생긴다. 그것을 해결하기 위한것이 반복문이다.
예) ul li 코드

while(){} : while이라는 반복문의 키워드를 이용하기

If ( )와 마찬가지로 while ( ) 문도 true/false 같은 Boolean 이 들어간다.

항상 반복문에서는 이 반복문이 언제 종료될 것인지 지정하는 것이 필요하다. 그렇지 않으면 무한 루프되는 지옥을 맛볼것이다.

예졔1

index.js
1
2
3
4
5
*
**
***
****
*****
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// print stars example 01
for(let i=0;i<5;i++){
let result = "";
for(let m=0;m<=i;m++){
result+="*";
}
document.write(result,"
");
}// print stars example 01
for(let i=0;i<5;i++){
let result = "";
for(let m=0;m<=i;m++){
result+="*";
}
document.write(result,"
");
}

예졔2

index.js
1
2
3
4
5
*****
****
***
**
*
index.js
1
2
3
4
5
6
7
for (let i=5; i>0; i--){
let result = "";
for (let m=0; m<i; m++){
result += "*";
}
document.write(result,"<br/>")
}

예졔3

index.js
1
2
3
4
5
6
7
8
9
3*1=3
3*2=6
3*3=9
3*4=12
3*5=15
3*6=18
3*7=21
3*8=24
3*9=27
index.js
1
2
3
4
let tables=3;
for (let i=1; i<=9; i++){
document.write(`${tables}*${i}=${tables*i}`+"<br/>")
}

예졔4

index.js
1
배열의 총합구하기
index.js
1
2
3
4
5
6
const data = [10,20,30,40,50];
let result = 0;
for (let i=0; i<data.length; i++){
result += data[i];
}
document.write(`The Array Sum are ${result}.`);

예졔5

index.js
1
배열과 반복문 합성하기
index.js
1
2
3
4
5
6
7
const coworkers = ["asadada", "vsvsvsvs", "cwdwdwdw", "adqwdaqwe"];

let i = 0;
while (i < coworkers.length) {
document.write(`<li>${coworkers[i]}</li>`);
i = i + 1;
}

예제:버튼 클릭으로 a 태그 색상변화와 백그라운드 색상 변화를 동시에 주기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
</ul>
<input
type="button"
value="night"
onclick="
const target = document.querySelector('body');
if(this.value === 'night'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = 'day';
const blist = document.querySelectorAll('a');
var i = 0;
while (i < blist.length){
blist[i].style.color = 'red';
i = i + 1;
}
}
else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';

const blist = document.querySelectorAll('a');
var i = 0;
while (i < blist.length){
blist[i].style.color = 'blue';
i = i + 1;
}
}
"
/>

함수(function)

예제: 함수를 이용하여 더욱 유지보수 편하게 하기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
function nightDayHandler(self) {
const target = document.querySelector("body");
if (self.value === "night") {
target.style.backgroundColor = "black";
target.style.color = "white";
self.value = "day";

const blist = document.querySelectorAll("a");
var i = 0;
while (i < blist.length) {
blist[i].style.color = "red";
i = i + 1;
}
} else {
target.style.backgroundColor = "white";
target.style.color = "black";
self.value = "night";

const blist = document.querySelectorAll("a");
var i = 0;
while (i < blist.length) {
blist[i].style.color = "blue";
i = i + 1;
}
}
}
</script>
<body>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
</ul>
<input type="button" value="night" onclick="nightDayHandler(this);" />

<script src="src/index.js"></script>
</body>

함수의 이론

함수의 기본적인 문법:

index.html
1
2
3
4
5
6
7
8
9
10
<ul>
<script>
function two() {
document.write(`<li>2-1</li>`);
document.write(`<li>2-2</li>`);
}
document.write(`<li>1</li>`);
two();
</script>
</ul>
index.js
1
2
3
4
5
function NAME( ) {

}

NAME( ) ;

함수로 만들어 더욱 심플하게

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<script>
function linksSetColor(color) {
const blist = document.querySelectorAll("a");
var i = 0;
while (i < blist.length) {
blist[i].style.color = color;
i = i + 1;
}
}

function bgSetColor(color) {
document.querySelector("body").style.color = color;
}

function bgSetBackgroundColor(color) {
document.querySelector("body").style.backgroundColor = color;
}

function nightDayHandler(self) {
const target = document.querySelector("body");
if (self.value === "night") {
bgSetBackgroundColor("black");
bgSetColor("white");
self.value = "day";

linksSetColor("red");
} else {
bgSetBackgroundColor("white");
bgSetColor("black");
self.value = "night";

linksSetColor("blue");
}
}
</script>
<body>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
</ul>
<input type="button" value="night" onclick="nightDayHandler(this);" />

<script src="src/index.js"></script>
</body>
</html>

입력 (Parameter: 매개변수 & Argument: 인자 )

index.js
1
2
3
function sum(left, right){
document.write();
}

여기서 left, right는 Parameter 즉 매개변수이다.

index.js
1
2
3
4
5
function sum(left, right) {
document.write(`${left + right}<br/>`);
}
sum(2, 3);
sum(3, 4);

Sum(2, 3) 에서 2 와 3 은 Argument 즉 인자이다.

출력 (Return)

index.js
1
2
3
4
function sum2(left, right) {
return left + right;
}
document.write(sum2(2, 3) + "<br/>");

객체 (Object)

배열 [ ] 은 순서로 데이터를 저장하는것이다. 반대로 순서없이 데이터를 저장 하는것은 바로 객체이다.
“객체는 바로, 이름이 있는 정리정돈 상자 “
객체에 속해 있는 함수는 함수라고 하지 않고 메소드(method)라고 부른다.

함수명이 중복되는 것을 막는 방법은 ?
이름이 충돌되지 않도록 객체를 만든다. (폴더라는 관점)

배열은 대괄호 [ ]

객체는 중괄호 { }

객체의 생성

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>

<h1>object</h1>
<script>
const coworkers = {
programmer:"aaaaa",
designer: "bbbbb"
};
document.write(`${coworkers.programmer} ${coworkers.designer}`);
</script>
</body>
</html>

객체의 추가

이미 만들어진 객체에 객체를 추가하고 싶을때는?

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<h1>object</h1>
<script>
const coworkers = {
programmer:"aaaaa",
designer: "bbbbb"
};
document.write(`${coworkers.programmer} ${coworkers.designer}`);
coworkers.writer = "ccccc";
document.write(` ${coworkers.writer}`);
coworkers["data maker"] = "dddddd"; // 띄어 쓰기가 있는 이름에는 배열을 이용해 문자열을 만든다.
document.write(` ${coworkers["data maker"]}`);
</script>
</body>
</html>

객체를 가져오기 (반복문)

For in


ABC라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문

ABC에 있는 키를 하나하나 꺼내 중괄호에 있는 코드를 실행해 주는 명령이 for다.:

index.js
1
2
for (const key in ABC){
}

`즉, key라는 것은 우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠

반대로 배열에서는 순서대로 정렬되어 있기 때문에 key라고 표현을 하지않고
index라는 표현을 쓴다.`

객체의 데이터 순회하는 방법

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<h1>object</h1>
<script>
const coworkers = {
programmer:"aaaaa",
designer: "bbbbb"
};
document.write(`${coworkers.programmer} ${coworkers.designer}`);
coworkers.writer = "ccccc";
document.write(` ${coworkers.writer}`);
coworkers["data maker"] = "dddddd"; // 띄어 쓰기가 있는 이름에는 배열을 이용해 문자열을 만든다.
document.write(` ${coworkers["data maker"]}`);
</script>

<script>
for (const key in coworkers){
document.write('<br/>' + key + ':' + coworkers[key] +'<br/>');
}
</script>
</body>
</html>

객체프로퍼티와 메소드

객체에는 변수, 상수 뿐만아니라 함수도 담을 수 있다.

index.js
1
2
3
coworkers.showAll = function(){

}

위에와 같은 표현 방식

index.js
1
2
function showAll() {
}

객체에 소속된 함수 만들기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<h1>object</h1>
<script>
const coworkers = {
programmer:"aaaaa",
designer: "bbbbb"
};
document.write(`${coworkers.programmer} ${coworkers.designer}`);
coworkers.writer = "ccccc";
document.write(` ${coworkers.writer}`);
coworkers["data maker"] = "dddddd"; // 띄어 쓰기가 있는 이름에는 배열을 이용해 문자열을 만든다.
document.write(` ${coworkers["data maker"]}`);
</script>

<script>
for (const key in coworkers){
document.write('<br/>' + key + ':' + coworkers[key] +'<br/>');
}
</script>

<h2>property and method</h2>
<script>
coworkers.showAll = function(){
for (const key in this){
document.write('<br/>' + key + ':' + this[key] +'<br/>');
}
}
coworkers.showAll();
</script>
</body>
</html>

coworkers.showAll(); // showAll 은 메소드

이 와 같이 객체에 소속된 함수를 메소드라고 한다. 또한 객체에 소속된 변수(programmer, designer…등)를 프로퍼티라고 부른다.

객체는 객체의 프로퍼티와 프로퍼티를 구분 할때 콤마를 찍는다.

객체의 활용

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<script>
const Links = {
setColor: function(color) {
const blist = document.querySelectorAll("a");
var i = 0;
while (i < blist.length) {
blist[i].style.color = color;
i = i + 1;
}
}
};

const Bg = {
setColor: function(color) {
document.querySelector("body").style.color = color;
},
setBackgroundColor: function(color) {
document.querySelector("body").style.backgroundColor = color;
}
};

function nightDayHandler(self) {
const target = document.querySelector("body");
if (self.value === "night") {
Bg.setBackgroundColor("black");
Bg.setColor("white");
self.value = "day";

Links.setColor("red");
} else {
Bg.setBackgroundColor("white");
Bg.setColor("black");
self.value = "night";

Links.setColor("blue");
}
}
</script>
<body>
<ul>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
<li><a href="#">aaaa</a></li>
</ul>
<input type="button" value="night" onclick="nightDayHandler(this);" />

<script src="src/index.js"></script>
</body>
</html>

추가 공부할 검색어 (문제에 닥쳤을때)

  1. Document (객체)
  2. Dom (다큐먼트객체는 돔의 일부)
  3. window (웹브라우저 자체를 제어하려면 윈도우 객체를 조사한다)
  4. ajax (웹페이지를 리로드하지 않고 정보를 변경하고 싶다면)
  5. cookie (웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면)
  6. Offline web application (인터넷이 끊겨도 동작하게 하려면)
  7. webRTC (화상통신 웹 앱을 만들고 싶다면)
  8. speech (사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면)
  9. webGL (3차원 그래픽으로 게임과 같은 것을 만들고 싶다면)
  10. webVR (가상 현실에 관심이 많다면)

모던 자바스크립트

모던 자바스크립트 - 01

Scope

const를 기본으로 사용한다. 그런데 변경이 될 수 있는 변수는 let 을 사용한다. var는 사용하지 않는다.

const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.

index.js
1
2
3
4
5
6
7
function home() {
const list = ["apple", "orgnge", "apple"];
list.push("banana");
console.log(list);
}

home();

-> [“apple”, “orgnge”, “apple”, “banana”]

immutable array를 어떻게 만를지?

index.js
1
2
3
4
5
6
7
function home() {
const list = ["apple", "orgnge", "apple"];
lists = [].concat(list, "banana");
console.log(list, lists);
}

home();

String

index.js
1
2
3
4
5
6
7
8
const str = "hello world ! ^^ ~~";
const matchstr = "hello";
console.log(str.startsWith(matchstr));
//true
console.log(str.endsWith(matchstr));
//false
console.log(str.includes("world"));
//true

Array

use forEach

index.js
1
2
3
4
5
const data = [1, 2, undefined, NaN, null, ""];
data.forEach(value => {
console.log("value is", value);
}
);

###for in *Don’t use [Array]

index.js
1
2
3
4
5
const data = [1, 2, undefined, NaN, null, ""];
for (const idx in data) {
console.log(data[idx]);
}
//1 , 2, undefined, NaN, null, ""

for of

index.js
1
2
3
4
5
6
7
8
9
10
11
const data = [1, 2, undefined, NaN, null, ""];
for (const value of data) {
console.log(value);
}
//1, 2, undefined, NaN, null, ""

const str = "hello world";
for (const value of str) {
console.log(value);
}
// h e l l o w o r l d

spread operator - array (펼침연산자)

index.js
1
2
3
const pre = ["apple", "orange", 100];
const newData = [...pre];
console.log(pre, newData);

-> [“apple”, “orange”, 100][“apple”, “orange”, 100]

…pre -> pre를 펼쳐준다.

  1. add
index.js
1
2
3
4
const pre = [100, 200, "hello", null];
const newData = [0, 1, 2, 3, 4, ...pre, 5];
console.log(newData);
// 0 ,1, 2, 3, 4, 100, 200, "hello", null ,5
  1. sum
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
// function sum(a, b, c) {
// return a + b + c;
// }

const sum = (a, b, c) => {
return a + b + c;
};

const pre = [100, 200, 300];
console.log(sum.apply(null, pre)); //이전 방법
console.log(sum(...pre)); //요즘 방법

// 600 600
  1. from method (from메서드로 진짜 배열 만들기)
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// function addMark() {
// const newArray = Array.from(arguments);
// const newData = newArray.map(function(value) {
// return value + "!";
// });
// console.log(newData);
// }

// addMark(1, 2, 3, 4, 5, 6, 7, 8, 9);

function addMark() {
const newArray = Array.from(arguments);
const newData = newArray.map(value => value + "!");
console.log(newData);
}

addMark(1, 2, 3, 4, 5, 6, 7, 8, 9);

filter, includes, from을 사용해서 문자열 ‘e’가 포함된 노드로 구성된 배열을 만들어서 반환하기

index.js
1
2
3
4
5
6
7
8
9
10
function print() {
let list = document.querySelectorAll("li");
// console.log(toString.call(list)); // 자바스크립트에서 타입체크할때 많이 쓰는 방법
// console.log(typeof list);
let listArray = Array.from(list); //li node로 구성된 배열
// console.log(toString.call(listArray));
let eArray = listArray.filter(v => v.innerText.includes("e"));
console.log(eArray.length);
}
print();

간단히 객체 생성하기

index.js
1
2
3
4
5
6
7
8
9
const name = "heno";
const age = 33;

const obj = {
name: name,
age: age
};

console.log(obj);

Destructuring

Destructuring Array

index.js
1
2
3
4
5
6
const data = ["a", "b", "c", "d", "e"];
// const aae = data[0];
// const bbb = data[2];

const [aaa, , bbb] = data; // 가운데 스페이스로 건너뛰기
console.log(aaa, bbb);

-> a c

Destructuring Object

index.js
1
2
3
4
5
6
7
8
9
10
11
const obj = {
name: "aaa",
address: "Tokyo",
age: 30
};

// const { name, age } = obj;
// console.log(name, age);

const { name: myName, age: myAge } = obj; // 다른 이름으로 할당
console.log(myName, myAge);

Destructuring활용 JSON파싱

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
title: "News",
newlist: ["aaaaaaaaaaaa", "bbbbbbbbbbbb", "cccccccccccc", "dddddddddddd"]
},
{
title: "Blogs",
newlist: [
"sasasasasassa",
"rarararararar",
"cdcdcdcddcdcd",
"qwqwqwqwqwqwq"
]
}
];

// 두 번째 항목만 따로 뽑겠다.

// const [, Blogs] = what;
// const { title } = Blogs;
// console.log(title);

const [, { title }] = what;
console.log(title);

Destructuring Event

index.js
1
2
3
4
5
6
7
8
9
10
11
// document
// .querySelector(".aaa")
// .addEventListener("click", function({ type, target }) {
// console.log(type, target.innerText);
// });

document
.querySelector(".aaa")
.addEventListener("click", ({ type, target }) =>
console.log(type, target.innerText)
);

Set

index.js
1
2
3
4
5
6
7
8
9
10
const mySet = new Set();
// console.log(toString.call(mySet));

mySet.add("aaa");
mySet.add("bbb");
mySet.add("aaa");

// console.log(mySet.has("aaa")); //check values
// 증복된 값을 제외하고 반환
mySet.forEach(v => console.log(v));

-> aaa bbb

index.js
1
2
3
4
5
6
7
8
9
10
const mySet = new Set();
// console.log(toString.call(mySet));

mySet.add("aaa");
mySet.add("bbb");
mySet.add("aaa");

mySet.delete("aaa");

mySet.forEach(v => console.log(v));

-> aaa

ES6 문법 훑어보기

ES6의 정석

1 Variables

1.1 const and let

const : 변하지 않는 값

index.js
1
const name = “heno”;

let : 이전의 var와 같은 것 (값을 변경해야 한다면 let을 사용)

index.js
1
2
let heno = “las”;
heno = “lalala”;

// 가능하면 default로 모두 const를 사용하길 권장 절대 var는 사용하지 말기

1.2 Temporal dead zone

index.js
1
2
3
var myName = “heno”

console.log(myName);

-> heno

if I changed this :

index.js
1
2
3
console.log(myName);

var myName = “heno”

-> undefined (이론상으로 존재하지 않는 걸 console.log로 출력하려 한 것)

if I changed let :

index.js
1
2
3
console.log(myName);

let myName = “heno”

-> myName is not defined (error)
// 이것이 let의 temporal dead zone이다.

1.3 Block Scope

let과 const의 또 다른 장점은 block scope가 있다는 점이다.

scope는 기본적으로 버블이다. 이 버블이 variable들이 접근
가능한지 아닌지를 감지해준다.

index.js
1
2
3
4
5
6
7
if (true) {
const hello = "hi";
}

console.log(hello);

// hello is not defined

const 와 let 은 모두다 block scope로 되어있다.
이 말의 뜻은 그 block 안에서만 존재한다.
블록은 { } 이것으로 만들어져 있다.
즉 대괄호 밖의 hello 는 존재하지 않는다.

그러나 var를 쓰면

index.js
1
2
3
4
5
6
if (true) {
var hello = "hi";
}
console.log(hello);

// hi

var에는 block scope같은게 없다.
if 나 while, for 구문안에서 var로 변수를 만들 수 있다.
var 는 function scope를 가지고 있다. (var가 function안에서 접근할 수 있다는 뜻)

1.4 The future of ‘var’

var를 계속 사용하는 이유가 기존의 많은 웹사이트가 var로 구성되어있기 때문에, 좋아서가 아니라 바꿀 수 가 없기 때문에 아직도 var를 쓴다.
하지만 앞으로는 절대 var를 사용하지 않는 것을 권장.
*let 은 앞으로 변경될 것이고, const는 default로 변경되지 않을것이다.

2 Functions

2.1 Arrow Functions

Arrow function은 자바스크립트에서 함수의 모습을 개선한 것이다.

-기존 function의 구조

index.js
1
2
3
4
5
function name() {
}

const hello = function(arg){
}

-개선된 function의 구조

예) 바꾸기 전
map은 각각의 아이템마다 함수를 호출하는 일을 한다.

index.js
1
2
3
4
5
6
7
8
const names = ["a-", "b-", "c-"];

function addHeart(item) {
return item + "heart";
}
const heart = names.map(addHeart);

console.log(heart);

예) 바뀐 후
but 요즘에는 다른 함수를 만들어 넣지 않는다.

index.js
1
2
3
4
5
6
7
const names = ["a-", "b-", "c-"];

const heart = names.map(function(item) {
return item + "heart";
});

console.log(heart);

arrow function 사용

  1. 첫번째 function을 없애고
index.js
1
2
3
const heart = names.map((item) {
return item + "heart";
});
  1. 제거한 function을 =>로 대체
index.js
1
2
3
const heart = names.map((item) => {
return item + "heart";
});
  1. 최종 () 제거
index.js
1
2
3
const heart = names.map(item => {
return item + "heart";
});
  1. Implicit return (같은 줄에 뭘 적든 간에 리턴이 된다는 뜻)
    *{} 를 추가 하는 순간 Implicit return은 사라진다
index.js
1
const heart = names.map(item => item + "heart");

기본형:
XXX = () => {};

2.2 ’This’ in Arrow Functions

  1. 대부분의 경우에 Arrow function은 자바크립트에서 사용가능하지만 this키워드를 사용할 경우는 예외다.
  2. Arrow functions은 this를 이벤트로 부터 가지고 있지 않다.(window object로 가지고 있다.)

this 는 현재 실행 문맥이다

  1. 실행문맥이란 말은 호출자가 누구냐는 것과 같습니다.

2.3 Arrow Functions in the Real World

find
Before arrow :

index.js
1
2
3
4
5
6
7
8
9
10
11
12
const email = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const foundMail = email.find(function(item) {
return item.includes("@gmail.com");
});

console.log(foundMail);

After arrow :

index.js
1
2
3
4
5
6
7
8
9
10
const email = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const foundMail = email.find(item => item.includes("@gmail.com"));

console.log(foundMail);

filter
Filter 메소드는 제공된 함수의 조건을 만족한 모든 엘리먼트로 새로운 Array를 만든다. 그렇기 때문에 첫번째 엘리먼트 뿐만이 아니라
모든 엘리먼트를 반환한다.

예) 지메일이 아닌 모든 메일을 반환하라:

index.js
1
2
3
4
5
6
7
8
9
10
const emails = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const noGmail = emails.filter(email => !email.includes("@gmail"));

console.log(noGmail);

forEach
각 array의 엘리먼트 마다 제공된 함수를 실행한다.
예) 유저의 이름만 얻자 (array함수에선 현재 값을 나타내므로 current value를 사용한다)

멋진 메소드 split 사용 : split는 뭔가를 나누는 것이다.

배열의 첫번째 것만 가져와서 메일의 유저이름만 가져오게 하기 :

index.js
1
2
3
4
5
6
7
8
9
10
const emails = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

emails.forEach(email => {
console.log(email.split("@")[0]);
});

map

index.js
1
2
3
4
5
6
7
8
9
10
const emails = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const cleaned = emails.map(email => email.split("@")[0]);

console.log(cleaned);

보너스 : 값만 리턴하는것이 아니라 오브젝트를 리턴시킬 경우 (이름 뿐만 아니라 순서까지 리턴 시킬 경우)

{} 안에 있으므로 리턴이 되지 않는다.

index.js
1
2
3
4
5
6
7
8
9
10
11
12
const emails = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const cleaned = emails.map((email, index) => {
username: email.split("@")[0], index;
});

console.log(cleaned);

object를 return 할 수 있는 방법: 대괄호 밖에 괄호를 넣어준다.\

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const emails = [
"quruquru80@naver.com",
"henojiwu@gmail.com",
"rodelheno@gmail.com",
"21-coka@daum.net"
];

const cleaned = emails.map((email, index) => ({
username: email.split("@")[0],
position: index
}));

console.table(cleaned);

2.4 Default Values

기본적인 function:

index.js
1
2
3
4
5
function sayHi(aName) {
return "hello" + aName;
}

console.log(sayHi());

Use Default Values:

index.js
1
2
3
4
5
function sayHi(aName = "Rodel") {
return "hello" + aName;
}

console.log(sayHi());

Arrow function 으로 Default Values:

index.js
1
2
3
const sayHi = (aName = "rodel") => "hello" + aName;

console.log(sayHi());

3 Strings

3.1 Sexy Strings

Template literas
문자열 안에 + 가 많아지고 , “로 열었다가 “닫았다가 하는 복잡한 예 :

index.js
1
2
3
const sayHi = (aName = "rodel") => "hello " + aName + " lovely to have you";

console.log(sayHi());

개선안
Use `` and string

index.js
1
2
3
const sayHi = (aName = "rodel") => `hello ${aName} lovely to have you`;

console.log(sayHi());

Template literas 에서는 sexy quotes -> `` 를 쓰도록!

String 안에서 function을 실행시켜보기

index.js
1
2
3
const add = (a, b) => a + b;

console.log(`hello how atre you ${add(6, 6)}`);

3.2 HTML Fragments

자바스크립트안에서 HTML사용하기

index.js
1
2
3
4
5
6
7
8
9
10
11
const wrapper = document.querySelector(".wrapper");

const addWelcome = () => {
const something = document.createElement("div");
const whatever = document.createElement("h1");
whatever.innerText = "hello";
something.append(whatever);
wrapper.append(something);
};

setTimeout(addWelcome, 5000);

Template literal string으로 만들기 (HTML이 좀더 복잡해 졌을 경우)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const wrapper = document.querySelector(".wrapper");

const addWelcome = () => {
const something = `
<div class="hello">
<h1 class="title">Hello</h1>
</div>
`;

wrapper.innerHTML = something;
};

setTimeout(addWelcome, 5000);

3.3 HTML Fragments part Two

배열로 친구들 목록 만들기

기본 예:

index.js
1
2
3
4
5
6
7
8
9
const wrapper = document.querySelector(".wrapper");

const friends = ["me", "you", "he", "she", "they"];

const ul = document.createElement("ul");

friends.forEach(friend => ul.append(`<li>${friend}</li>`));

wrapper.append(ul);

Template literal 사용 예 (Map은 무엇을 리턴하던지 그 값을 배열로 만든다)

*결과 값에 [,] 가 나오는데 map을 썼기 때문에 배열로 정리되서 그런거다. [,]를 지우기 위해서 join함수를 쓴다.

index.js
1
2
3
4
5
6
7
8
9
10
11
12
const wrapper = document.querySelector(".wrapper");

const friends = ["me", "you", "he", "she", "they"];

const list = `
<h1>Prople I love</h1>
<ul>
${friends.map(friend => `<li>${friend}</li>`).join("")}
</ul>
`;

wrapper.innerHTML = list;

3.4 Cloning Styled Components

Styled component 는 리액트를 위한 라이브러리다

Error

index.js
1
2
3
4
5
6
7
8
9
10
const styled = aElement => {
const el = document.createElement(aElement); // 호출
return el; // 리턴
};

const title = styled("h1")`
border-radius: 10px;
color: blue;
`;
console.log(title);

fuction 안에 fuction을 리턴하기

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const styled = A => {
const el = document.createElement(A); // 호출
return args => {
// console.log(args[0]);
const styles = args[0];
el.style = styles;
return el;
};
};

const title = styled("h1")`
border-radius: 10px;
background-color: red;
color: white;
`;

const subtitle = styled("span")`
color: black;
`;

title.innerText = "We just clone styled componet";
subtitle.innerText = "Yep! i got it!"

document.body.append(title, subtitle);

3.5 More String Improvements!

3 가지 쿨한 string 메소드

  1. include
index.js
1
2
3
const isEmail = email => email.includes("@gmail");

console.log(isEmail("heno@gmail.com"));
  1. repeat (string.repeat 는 어떤 문자도 반복할 수 있디)
index.js
1
2
3
4
5
const CC_NUM = "4890";

const displayName = `${"*".repeat(10)}${CC_NUM}`;

console.log(displayName);
  1. startsWith (유효성 체크에 사용할 수 있다)
index.js
1
2
3
4
const name = "Mr. Heno";

console.log(name.startsWith("Mr."));
console.log(name.endsWith("Heno"));

4 Array

4.1 Array.from() and Array.of()

Array.of
어떤걸 배열로 만들때 사용

평범한 배열:

index.js
1
const friends = ["heno", "atsuko", "jiu", "anton"];

Array.of:

index.js
1
2
const friends = Array.of("heno", "atsuko", "jiu", "anton");
console.log(friends);

Array.from
Html 에 버튼을 여러개 만들고 각각의 버튼에 이벤트리스너를 붙이기 *가끔 html에서 array를 얻지 못하고, array-like object를 얻는다.
그러면 에러가 난다.
그럴때 쓰는것이 Array.from() 이다. -> array and array-like object의 차이

index.js
1
2
3
4
5
const buttons = document.getElementsByClassName("btn");

Array.from(buttons).forEach(button => {
button.addEventListener("click", () => console.log("I clicked"));
});

Also,

index.js
1
2
3
4
5
6
const buttons = document.getElementsByClassName("btn");

const arg = Array.from(buttons);
arg.forEach(button => {
button.addEventListener("click", () => console.log("I clicked"));
});

4.2 Array.find() / Array.findIndex() / Array.fill()

find()
ind() 에는 조건이 필요하다:

index.js
1
2
3
4
5
6
7
8
9
10
const friends = [
"henojiwu@gmail.com",
"quruquru80@gmail.com",
"wwesttune818@hotmail.com",
"21c-coka@daum.net"
];

const target = friends.find(freind => freind.includes("@daum"));

console.log(target);

findIndex()

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const friends = [
"henojiwu@gmail.com",
"quruquru80@gmail.com",
"wwesttune818@hotmail.com",
"21c-coka@daaum.net"
];

// @daaum을 체크한다
const check = () => friends.findIndex(freind => freind.includes("@daaum"));

// 그러면 타겟을 얻게 된다.이 타겟은 @daaum인 사람의 index다
let target = check();

// 만약에 찾았다면 콘솔로그
console.log(target);

// 그리고 usernameㅡㄹ 가져올건데, 문자열을 @로 쪼개고 첫번째 파트만 가져온다
const username = friends[target].split("@")[0];

//그리고 email을 수정하고
const email = "daum.net";

// 그리고 합쳐준다.
friends[target] = `${username}@${email}`;

//고친후 확인
target = check();

//반환
console.log(target);

-> 좀더 간결한 코드:

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const friends = [
"henojiwu@gmail.com",
"quruquru80@gmail.com",
"wwesttune818@hotmail.com",
"21c-coka@daaum.net"
];

const check = () => friends.findIndex(freind => freind.includes("@daaum"));
let target = check();
if (target !== -1) {
console.log(target);
const username = friends[target].split("@")[0];
const email = "daum.net";
friends[target] = `${username}@${email}`;
target = check();
}

console.log(target);
console.log(friends);

결과: 만약 -1이니면 3을 출력, 그리고 -1을 반환
21c-coka@daaum -> 21c-cola@daum으로 수정

fill()
fill은 array를 채우는 것이다 시작 index부터 마지막 index까지 static value로…

index.js
1
2
3
4
5
6
7
8
9
10
const friends = [
"henojiwu@gmail.com",
"quruquru80@gmail.com",
"wwesttune818@hotmail.com",
"21c-coka@daaum.net"
];

friends.fill("*".repeat(8), 0, 3); // 첫번째 부터 3번째까지

console.log(friends);

5 Destructuring

destructuring 은 object나 array, 그 외 요소들 안의 변수를 바깥으로 끄집어 내서 사용할 수 있도록 하는것

5.1 Object Destructuring

기본 사용방법

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const setting = {
notifications: {
follow: true,
alert: true,
unfollow: false
},
color: {
theme: "dark"
}
};

// 만약 유저의 notifications에 alerts가 true로 되어있을 때, follow도 true로 된 상황이면 이메일을 전송

// // 구 버전
// if(setting.notifications.follow){
// // send email
// }

// use destructuring
const {
notifications: { follow },
color
} = setting;

console.log(follow, color);

If 대신 사용 할 수 있는 one-line-statement
(Setting 안의 notifications로가서 follow가 있는지 찾아보고 없다면 follow = false를 선언,그리고 notifications자체가 없다면 notification는 빈 object가 된다 )

index.js
1
2
// use destructuring
const { notifications: { follow = false } = {} } = setting;

5.2 Array Destructuring

가져온 데이터를 조작할 필요없을 때 사용하면 좋다 (예: 수정 할수 없는 외부 API)

요일 array : Not Sexy

index.js
1
2
3
4
5
6
7
8
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

// 이 중에서 앞의 세개만 가져오려면?
const mon = days[0];
const tue = days[1];
const wed = days[2];

console.log(mon, tue, wed);

개선된

index.js
1
2
3
4
5
6
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

// 이 중에서 앞의 세개만 가져오려면?
const [mon, tue, wed] = days;

console.log(mon, tue, wed);

또 다른 버젼

index.js
1
2
3
4
5
6
const days = () => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

// 이 중에서 앞의 세개만 가져오려면?
const [mon, tue, wed] = days();

console.log(mon, tue, wed);

5.3 Renaming

Object Destructuring은 그대로 유지하고 변수명을 변경하는 방법

Before:

index.js
1
2
3
4
5
6
7
8
9
10
11
const setting = {
color: {
theme: "dark"
}
};

const {
color: { theme = "light" }
} = setting;

console.log(theme);

After: (바꾸려는 변수명 앞에 -> : 추가후 새 변수명을 입력만 하면된다.)

index.js
1
2
3
4
5
6
7
8
9
10
11
const setting = {
color: {
theme: "dark"
}
};

const {
color: { theme: myTheme = "light" }
} = setting;

console.log(myTheme);

“만약 여기서 let 변수로 myTheme룰 만들면 어떨까”
-> let 변수 추가후, const 변수를 지운후 () 로 감싸준다.(let 변수에 myTheme를 업데이트 하기)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const setting = {
color: {
theme: "dark"
}
};

let myTheme = "blue";
console.log(myTheme);

({
color: { theme: myTheme = "light" }
} = setting);

console.log(myTheme);

5.4 Function Destructuring

긴 augment

index.js
1
2
function saveSetting(followAlert, unfollowAlert, mrkAlert ,themeColor){
}

단축형 augment

index.js
1
2
3
4
5
6
7
8
9
10
function saveSetting(settings) {
console.log(settings);
}

saveSetting({
follow: true,
alert: true,
mkt: true,
color: "green"
});

진보형: 변수들의 가독성을 확보하고, 각 변수의 기본값을 설정해 주고 싶을 땐
-> object destructuring을 사용한다!

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function saveSettings({ notifications, color: { theme } }) {
console.log(theme);
}

saveSettings({
notifications: {
follow: true,
alert: true,
mkt: false
},
color: {
theme: "blue"
}
});

5.5 Value Shorthands(변수명 단축)

변수 이름을 똑같이 하고 싶다면 shorthand property (단축속성명)을 사용할 수 있다.

index.js
1
2
3
4
5
6
7
8
9
10
11
const follow = checkFollow();
const alert = checkAlert();

const settings = {
notifications: {
// follow: follow, // 여기 반복되는 부분을 안써도 되게 하기
// alert: alert
follow,
alert
}
};

5.6 Swapping and Skipping

Swapping

index.js
1
2
3
4
5
6
7
//Swapping
let mon = "Sat";
let sat = "Mon";

[sat, mon] = [mon, sat];

console.log(sat, mon);

Skipping

index.js
1
2
3
4
//Skipping (빈 칸을 [콤마] 로 채우기)
const days = ["Mon", "Tue", "wed", "Thu", "Fri", "Sat", "Sun"];
const [, , , thu, fri] = days;
console.log(thu, fri);

6 Rest and Spread

6.1 Introduction to Spread

Spread
(spread는 기본적으로 변수를 가져와서 풀어 헤치고 전개하는 것 -> … (점 3개))

Unpack

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const friends = [1, 2, 3, 4];
const family = ["a", "b", "c"];

// array 안에 있는 요소(element)들을 원할때
console.log([...friends, ...family]);

const sexy = {
name: "heno",
age: 20
};

const hello = {
sexy: true,
hello: "hello"
};

console.log({...sexy, ...hello});

6.2 Spread Applications

ADD

index.js
1
2
3
4
5
6
7
8
9
10
11
const friends = ["nicol", "arug", "mina"];

const newFriends = [...friends, "Leb"];

console.log(newFriends);

const nico = {
username: "nico"
};

console.log({ ...nico, password: 123 });

좀더 복잡한 구성 예)

index.js
1
2
3
4
5
6
7
const first = ["Mon", "Tue", "Wed"];

const weeked = ["Sat", "Sun"];

const fullWeek = [...first, "Thu", "Fri", ...weeked];

console.log(fullWeek);

conditional (조건부)
(어떻게 하면 object에 속성(property)을 조건부로 추가할 수 있는가)

index.js
1
2
3
4
5
6
7
8
9
const lastName = prompt("Last Name");

const user = {
username: "nico",
age: 32,
...(lastName !== "" && { lastName })
};

console.log(user);

6.3 Intro to Rest Parameters

끝도없는 paramenter를 전달받는 함수를 만들어 보자

Rest
rest는 모든 값을 하나의 변수로 축소(contract)시켜주는 거다

Contract

index.js
1
2
3
const infiniteParams = (...heyman) => console.log(heyman);

infiniteParams("1", 2, true, "lalala", [1, 2, 3, 4]);

…rest 를 이용해 한개만 픽업하기

index.js
1
2
3
4
5
6
const bestFriendMaker = (firstOne, ...rest) => {
console.log(`My best friend is ${firstOne}`);
console.log(rest);
};

bestFriendMaker("jhe", "sodn", "aaw", "upps");

6.4 Rest + Spread + Restructure Magic

패스워드를 제거하고 싶을때 예)

basic

index.js
1
2
3
4
5
6
7
8
9
const user = {
name: "aeq",
age: 13,
password: 12345
};

user["password"] = null;

console.log(user);

cleaning object

index.js
1
2
3
4
5
6
7
8
9
10
11
const user = {
name: "aeq",
age: 13,
password: 12345
};

const killPassword = ({ password, ...rest }) => rest;

const cleanUser = killPassword(user);

console.log(cleanUser);

setting default - 기본값 설정하기

index.js
1
2
3
4
5
6
7
8
9
const user = {
name: "nico",
age: 24,
password: 12345
};

const setCountry = ({ country = "KR", ...rest }) => ({ country, ...rest });

console.log(setCountry(user));

rename property - 속성명 바꾸기

index.js
1
2
3
4
5
6
7
8
9
const user = {
NAAME: "nico",
age: 24,
password: 12345
};

const rename = ({ NAAME: name, ...rest }) => ({ name, ...rest });

console.log(rename(user));

7 For … of

자바스크립트의 새로운 루프에 대해 배워보기
(루프는 기본적으로 같은 일을 반복적으로 하는 거다)

기본적인 루프

index.js
1
2
3
4
5
const friends = ["win", "cool", "sexy", "cuty"];

for (let i = 0; i < 20; i++) {
console.log("I still loving you");
}

forEach 루프

index.js
1
2
3
4
5
6
7
8
const friends = ["win", "cool", "sexy", "cuty"];

// const addHeart = (currentItem, currentindex, currentArray) =>
// console.log(currentItem, currentindex, currentArray);

const addHeart = (c, i, a) => console.log(c, i, a);

friends.forEach(addHeart);

For of 루프
(For of 에서는 선언을 const 로 할지 let로 할지 선택할 수 있다)
(가끔 루프를 멈추고 싶을 때, for of를 쓰면 된다)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const friends = [
"win",
"cool",
"sexy",
"cuty",
"many friends",
"a lot of friends",
"more then friends"
];

for (const friend of friends) {
console.log(friend);
}

예) sexy를 찾는 순간 루프를 멈추게 하고 싶을 때는

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const friends = [
"win",
"cool",
"sexy",
"cuty",
"many friends",
"a lot of friends",
"more then friends"
];

for (const friend of friends) {
if (friend === "sexy") {
break;
} else {
console.log(friend);
}
}

8 Promises

8.1 Introduction to Async

index.js
1
2
3
4
5
// 비동기적 프로그래밍
const hello = fetch("https://www.google.com/");

console.log("something is wrong!");
console.log(hello);

8.2 Creating Promises

Promise는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다

index.js
1
2
3
4
5
6
7
8
9
10
//resolve : 야, 이게 네 값이야. 자바스크립트로 돌아가!
//reject : 야, 미안한데 에러가 있어!

const amIsexy = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, "yes you are");
});

console.log(amIsexy);

setInterval(console.log, 1000, amIsexy);

8.3 Using Promises

자바스크립트에 promise가 끝난 이후의 명령어를 전달하려면, 언제 끝나는건 중요하지 않고 끝나는 이후에 값을 돌려달라고 명령어를 내리는 것

기본형

index.js
1
2
3
4
5
const amIsexy = new Promise((resolve, reject) => {
setTimeout(resolve, 3000, "yes you are");
});

amIsexy.then(value => console.log(value));

만약 promise에 에러가 생기면 우린 그걸 catch하면 된다

catch는 then이랑 비슷하지만 에러를 잡기 위해 사용한다.
then이 실행되면 catch는 절대 실행되지 않는다, 반대로 catch가 실행되면 then또한 절대로 실행되지않는다

index.js
1
2
3
4
5
6
7
const amIsexy = new Promise((resolve, reject) => {
setTimeout(reject, 1000, "You are sily");
});

amIsexy
.then(result => console.log(result)) //resolve
.catch(error => console.log(error)); //reject

8.4 Chaining Promises

promise들을 엮고 싶을 때는 기존의 then에서 return 값이 있어야 한다
(then은 넣고 싶은 만큼 넣어서 chaining을 해주면 되는거)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const amIsexy = new Promise((resolve, reject) => {
resolve(2);
});

// 결과값이 여러개 나오는 경우
amIsexy
.then(number => {
console.log(number * 2);
return number * 2;
})
.then(otherNumber => {
console.log(otherNumber * 2);
});

Array function으로 간단하게

index.js
1
2
3
4
5
6
7
8
9
10
const amIsexy = new Promise((resolve, reject) => {
resolve(2);
});

amIsexy
.then(number => number * 2)
.then(number => number * 2)
.then(number => number * 2)
.then(number => number * 2)
.then(number => number * 2);

Function을 추가하여 정리

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const amIsexy = new Promise((resolve, reject) => {
resolve(2);
});

const timeTwo = number => number * 2;

amIsexy
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(lastNumber => console.log(lastNumber));

여기서 하나의 then이 에러를 발생시키면 어떻게 될까 ?

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  const amIsexy = new Promise((resolve, reject) => {
resolve(2);
});

const timeTwo = number => number * 2;

amIsexy
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(timeTwo)
.then(() => {
throw Error("Something is wrong");
})
.then(lastNumber => console.log(lastNumber))
.catch(error => console.log(error));

8.5 Promise.all

Promise.all은 주어진 모든 Promise를 싱행한 후 진행되는 하나의(마지막) Promise를 반환한다.

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//하나의 API가 아닌 3개, 4개의 API에서 값을 불러와야 할 때
const p1 = new Promise(resolve => {
setTimeout(resolve, 5000, "first");
});

const p2 = new Promise(resolve => {
setTimeout(resolve, 1000, "second");
});

const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "third");
});

const allPromise = Promise.all([p1, p2, p3]);

allPromise.then(value => console.log(value));

resolve를 하는 대신 Reject가 되게 바꿔보자

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//하나가 reject되면 전체가 reject된다.
const p1 = new Promise(resolve => {
setTimeout(resolve, 5000, "first");
});

const p2 = new Promise((resolve, reject) => {
setTimeout(reject, 1000, "I love JS");
});

const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "third");
});

const allPromise = Promise.all([p1, p2, p3]);

allPromise.then(value => console.log(value)).catch(err => console.log(err));

8.6 Promise.race

Promise.all과 다르게 어느것이 먼저 되는지 상관없이 가장 빠른걸 반환한다.

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const p1 = new Promise(resolve => {
setTimeout(resolve, 5000, "first");
});

const p2 = new Promise((resolve, reject) => {
setTimeout(reject, 5000, "I love JS");
});

const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "third");
});

const allPromise = Promise.race([p1, p2, p3]);

allPromise.then(value => console.log(value)).catch(err => console.log(err));

좀더 간결한 코드

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const p1 = new Promise(resolve => {
setTimeout(resolve, 5000, "first");
});

const p2 = new Promise((resolve, reject) => {
setTimeout(reject, 5000, "I love JS");
});

const p3 = new Promise(resolve => {
setTimeout(resolve, 3000, "third");
});

Promise.race([p1, p2, p3])

.then(value => console.log(value))
.catch(err => console.log(err));

8.7 .finally

finalize하는데 성공하든지 실패하든지 결과에 상관없이 반환한다
finall는 보통…API를 호출할 때 쓴다. 로딩할 때, 하나를 얻고 두개를 얻고 세개를 얻고
마지막으로 데이터를 보여주거나, 로딩을 멈추거나 뭔가를 하거나 할때.

index.js
1
2
3
4
5
6
const p1 = new Promise((resolve, reject) => {
setTimeout(reject, 5000, "first");
})
.then(value => console.log(value))
.catch(e => console.log(`${e} X`))
.finally(() => console.log("Im done"));

8.8 Real world Promises

Promise를 return하는 fetch (fetch는 Promise를 return한다 )

index.js
1
2
3
4
5
6
7
fetch("https://yts.lt/api/v2/list_movies.json")
.then(response => {
console.log(response);
return response.json();
})
.then(json => console.log(json))
.catch(err => console.log(`${err} XXX`));

practice api :
https://jsonplaceholder.typicode.com/

9 Async / Await

9.1 Async Await

Async/await는 두 Promise의 없데이트다

then, then, then, then은 별로다. 이것들은 코드를 좋지 않게 보이게 한다.
Async/await는 기본적으로 Promise를 사용하는 코드를 더 좋게 보이게 하는 문법이다.

먼저, await는 혼자서는 사용할 수 없다

await는 항상 async function안에서만 사용할 수 있다.

await는 기본적으로 Promise가 끝나길 기다린다

.then / .catch를 사용한 경우

index.js
1
2
3
4
5
6
7
8
9
const getMoviesAsync = () => {
fetch("https://yts.lt/api/v2/list_movies.json")
.then(response => {
console.log(response);
return response.json();
})
.then(json => console.log(json))
.catch(e => console.log(`XXX ${e}`));
}; // Promise one

async / await를 사용한 경우

index.js
1
2
3
4
5
6
7
8
9
10
11
12
// 기본 형식으로의 표현
// async function getMovies() {

// }

const getMoviesAsync = async () => {
const response = await fetch("https://yts.lt/api/v2/list_movies.json");
const json = await response.json();
console.log(json);
}; //async one

getMoviesAsync();

6 Reasons Why JavaScript Async/Await Blows Promises Away (Tutorial)
https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9

9.3 Parallel Async Await

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const getMoviesAsync = async () => {
try {
const [moviesResponse, suggestionsResponse] = await Promise.all([
fetch("https://yts.lt/api/v2/list_movies.json"),
fetch("https://yts.lt/api/v2/movie_suggestions.json")
]);
const [movies, suggestions] = await Promise.all([
moviesResponse.json(),
suggestionsResponse.json()
]);
console.log(movies, upcoming);
} catch (error) {
console.log(`XXX! ${error}`);
} finally {
console.log("We are done!");
}
};

getMoviesAsync();

10 Classes

10.1 Introduction to Classes

Class 는 기본적으로 청사진이다. (단지 화려한 object다)

Class는 constructor(생성자)를 안에 가지고있다.

sample1:

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class User {
constructor() {
this.username = "Heno";
}
// make functions
sayHello() {
console.log("hello");
}
} // this is blueprint

const sexyUser = new User(); // this is alive

console.log(sexyUser.username);

setTimeout(sexyUser.sayHello, 4000);

sample2:

index.js
1
2
3
4
5
6
7
8
9
10
11
12
class User {
constructor(name) {
this.username = name;
}
sayHello() {
console.log(`hello, my name is ${this.username}`);
}
}

const sexyUser = new User("Heno");

sexyUser.sayHello();

10.2 Extending Classes

‘this’는 기본적으로 클래스 안에서 볼 수 있고, 클래스 그 자체를 가리킨다.
(언제든 추가하고 싶거나 클래스로부터 어떤것을 불러오고 샆을때 ’this’를 사용 할거다)

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class User {
constructor(name, lastName, email, password) {
// make properties
this.username = name;
this.lastName = lastName;
this.email = email;
this.password = password;
}
sayHello() {
console.log(`hello, my name is ${this.username}`);
}
getProfile() {
console.log(`${this.username} ${this.email} ${this.password}`);
}
updatePassword(newPassword, currentPassword) {
// 이전 password가 맞다면 new password로 바꿀수 있게 해주기
if (currentPassword === this.password) {
this.password = newPassword;
} else {
console.log("Can't change!");
}
}
}

const sexyUser = new User("Heno", "jung", "henjiwu@gmail.com", "1234");

sexyUser.sayHello();
sexyUser.getProfile();
console.log(sexyUser.password);
sexyUser.updatePassword("4321", "1234");
console.log(sexyUser.password);

Extend class

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class User {
constructor(name, lastName, email, password) {
this.username = name;
this.lastName = lastName;
this.email = email;
this.password = password;
}
sayHello() {
console.log(`hello, my name is ${this.username}`);
}
getProfile() {
console.log(`${this.username} ${this.email} ${this.password}`);
}
updatePassword(newPassword, currentPassword) {
if (currentPassword === this.password) {
this.password = newPassword;
} else {
console.log("Can't change!");
}
}
}

const sexyUser = new User("Heno", "jung", "henjiwu@gmail.com", "1234");
sexyUser.sayHello();

class Admin extends User {
deletWebsite() {
console.log("Dewleting the hole Website");
}
}

const sexyAdmin = new Admin("Heno", "jung", "henjiwu@gmail.com", "1234");

sexyAdmin.deletWebsite();

console.log(sexyAdmin.email);

10.3 super

super() 는 호출한다. constructor의 base클래스를…

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class User {
constructor({ username, lastName, email, password }) {
this.username = username;
this.lastName = lastName;
this.email = email;
this.password = password;
}
getProfile() {
console.log(`${this.username} ${this.email} ${this.password}`);
}
updatePassword(newPassword, currentPassword) {
if (currentPassword === this.password) {
this.password = newPassword;
} else {
console.log("Can't change!");
}
}
}

// 만약 여러 argument를 가지고 있다면 options오브젝트로 하는게 더 좋다. 왜냐하면 어떤값을 넘겨주는지 보기위해
const sexyUser = new User({
username: "Heno",
lastName: "jung",
email: "henjiwu@gmail.com",
password: "1234"
});

class Admin extends User {
constructor({ username, lastName, email, password, superAdmin, isActive }) {
super({ username, lastName, email, password });
this.superAdmin = superAdmin;
this.isActive = isActive;
}
deletWebsite() {
console.log("Dewleting the hole Website");
}
}

const admin = new Admin({
username: "Heno",
lastName: "jung",
email: "henjiwu@gmail.com",
password: "1234",
superAdmin: true,
isActive: true
});

console.log(sexyUser.email);
console.log(admin.lastName);

Sample

HTML:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>

<body>
<span id="count"></span>
<button id="add">+</button>
<button id="minus">-</button>
<script src="src/app.js"></script>
</body>
</html>

JS:
eventLister를 target에 add할 때 이 event의 handler는 this를 event target에 가르키게 한다.
-> this가 class를 가르키지 않는다 X

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Counter {
constructor({ initialNumber = 0, counterID, plusID, minusID }) {
this.count = initialNumber;
this.counter = document.getElementById(counterID);
this.counter.innerHTML = initialNumber;
this.plusBtn = document.getElementById(plusID);
this.minusBtn = document.getElementById(minusID);
this.addEventListeners();
}
addEventListeners() {
this.plusBtn.addEventListener("click", this.increase);
this.minusBtn.addEventListener("click", this.decrease);
}
increase() {
this.count = this.count + 1;
this.repaintCount();
}
decrease() {
this.count = this.count - 1;
this.repaintCount();
}
repaintCount() {
this.counter.innerText = this.count;
}
}

new Counter({
counterID: "count",
plusID: "add",
minusID: "minus"
});

-> 해결방법
Array Function으로 변환

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Counter {
constructor({ initialNumber = 0, counterID, plusID, minusID }) {
this.count = initialNumber;
this.counter = document.getElementById(counterID);
this.counter.innerText = initialNumber;
this.plusBtn = document.getElementById(plusID);
this.minusBtn = document.getElementById(minusID);
this.addEventListeners();
}
addEventListeners = () => {
this.plusBtn.addEventListener("click", this.increase);
this.minusBtn.addEventListener("click", this.decrease);
};
increase = () => {
this.count = this.count + 1;
this.repaintCount();
};
decrease = () => {
this.count = this.count - 1;
this.repaintCount();
};
repaintCount = () => {
this.counter.innerText = this.count;
};
}

new Counter({
counterID: "count",
plusID: "add",
minusID: "minus"
});

11 Set and Map

11.1 Sets

set을 사용하면 어떤 타입의 고유한 value든 저장할 수 있게 해준다.

index.js
1
2
3
const sexySet = new Set([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 8]);
// 중복된 값을 유니크 value로 저장
console.log(sexySet);

사용 예:

index.js
1
2
3
4
5
6
7
8
9
const sexySet = new Set([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 8]);

sexySet.has(1);
sexySet.delete(2);
sexySet.clear();
sexySet.add("hi there!");
sexySet.add([1, 2, 3]);
console.log(sexySet);
// console.log(sexySet.size);

11.2 Map

map에서는 key value를 가지고 있다.

index.js
1
2
3
4
5
const map = new Map();
map.set("age", 18);
map.has("age"); //true
map.get("age"); // 18
console.log(map);

SCSS의 기본적인 사용 방법

기본 코딩

자식요소

{} 괄호안의 자식요소에 태그(class, ID등)를 넣으면 자동으로 부모요소를 확인시켜준다.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×