[JS] 자료 다루기
[JS] Object 객체

[JS] Object 객체

이채현

객체 생성

일반적으로 생성 할 수 있는 객체

싱글 리터럴 (Literal) 객체

1
2
3
4
const object = {
property: 'value',
method: function () {},
}

생성자 함수 객체 // PascalCase

자세히 보기
[JS] DOM 문서 객체 모델

[JS] DOM 문서 객체 모델

이채현

DOM (문서 객체 모델…Document Object Model)

  • HTML ⇒ 문서
  • 문서를 조작하는 언어 ⇒ JavaScript
  • Document Object Model ← JavaScript가 DOM을 통해 HTML을 조작
  • DOM 내부에는 Node: HTML 요소 하나하나 전부를 지칭
    • Node는 Tree형태로 부모노드가 자식노드를, 자식노드가 그 자식노드를…
    • 각 Node에는 수 많은 Properties, Methods…가 존재

결론

  • HTML문서를 JavaScript로 모델링 한 것이 DOM
  • 인터페이스를 하나하나 자르면 단위가 Node이며, Node는 Tree구조로 이루어져있다.

Eg) ’li’ 태그를 뽑아보면 정보가아래처럼 수 많이 담겨있다.

자세히 보기
[JS] ES6 - Promise

[JS] ES6 - Promise

이채현

Promises

async

자바스크립트는 순차적으로 처리되는게 아니라 한꺼번에 실행된다. ⇒ 자바스크립트의 비동기성(async)

이벤트 루프에서 비동기적으로 실행시킨다.

Promise

자세히 보기
[JS] ES6 - For

[JS] ES6 - For

이채현

For

forEach

1
2
3
4
5
6
7
8
9
const friends = ["me", "you", "nico"];

const addHeart = (current, index, array ) => ( console.log(current, index, array));

friends.forEach(addHeart);
// 파라미터 첫번째로 값을 주고 두번째로 인덱스를 주고 세번째로 현재 배열을 준다
// me 0 ["me", "you", "nico"]
// you 1 ["me", "you", "nico"]
// nico 2 ["me", "you", "nico"]

for…of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for (const friend of friends) {
// 장점 1) const, let 뭐로 할건지 결정가능, forEach에서는 안됨
console.log(friend); // 모두다 출력됨
}

for (const char of "strings") {
console.log(char); // s t r i n g s 출력
}
// 장점 2) iterable한 모든것에서 작동한다

for (const friend of friends) {
if (friend === "steve") {
break;
} else {
console.log(char); // "me", "you", "nico" 이렇게만 출력
}
}
// 장점 3) 루프를 멈출수가있음!, 최고장점
자세히 보기
[JS] ES6 - Rest and Spread

[JS] ES6 - Rest and Spread

이채현

Rest and Spread

Spread

기본적으로 변수를 가져와 풀어 해쳐 전개해놓는 것.

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
/**
* Spread
*/
const friends = [1, 2, 3, 4];

console.log(friends); // [1, 2, 3, 4]
console.log(...friends); // 1 2 3 4

const family = ["a", "b", "c"];
console.log(friends + family); // 1,2,3,4a,b,c
console.log([friends, family]); // [ [ 1, 2, 3, 4 ], [ 'a', 'b', 'c' ] ]
console.log([...friends, ...family]); // [ 1, 2, 3, 4, 'a', 'b', 'c' ]
// spread를 통해 모든 요소를 담고 있는 하나의 object를 얻을 수 있다.
// array.push()를 이용하지 않고 값을 추가하여 새로운 객체를 만든다.
const newFriends = [...friends, 5, 6, 7];
console.log(newFriends); // [ 1, 2, 3, 4, 5, 6, 7]

const admin = {
username: "admin",
};
console.log({ ...admin, password: 123 }); // { username: 'admin', password: 123 }
// 조건식
// lastName을 입력받았을 때 값이 있을 때만 객체에 넣어주기
const lastName = prompt("Last name: ");
const person = {
username: "person",
age: 24,
...(lastName !== "" && { lastName }), // spread로 전개하려면 데이터가 object여야하므로, 중괄호로 감싸줌
// lastName: lastName !== "" ? lastName : undefined,
};
console.log(person);

Rest Parameters

자세히 보기
[JS] ES6 - Destructuring

[JS] ES6 - Destructuring

이채현

Destructuring

destructuring(비구조화)는 object나 array 등 안의 변수를 바깥으로 끄집어내는 것

Object Destructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* Object Destructuring
*/
const settings = {
notifications: {
follow: true,
alerts: true,
unfollow: false,
},
color: {
theme: "dakr",
},
};

if (settingss.notifications.follow) {
// send email
}

// 기존에는 위와 같이 사용했다. 보기에 매우 불편하다.
// 만약 follow라는 값이 없느면 undefined오류가 발생할 것이다.

자세히 보기
[JS] ES6 - Array

[JS] ES6 - Array

이채현

Array

Array.of()

무엇이든 Array로 만들어준다.

1
2
3
4
// Array.of()
const alphabet = ["a", "b", "c", "d"];
const alphabet = Array.of("a", "b", "c", "d")const alphabet = Array.of("a", "b", "c", "d", 1, 2, 3);;
console.log(alphabet);

Array.from()

자세히 보기
[JS] ES6 - Strings

[JS] ES6 - Strings

이채현

Strings

Template Literal

variable을 가진 문자열을 쓰는 방법에 대한 개선

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const sayHi = (aName = "anon") => {
return "Hello " + aName;
};

==>
/**
* 변수
*/
const sayHi = (aName = "anon") => {
return `Hello ${aName}`;
}
/**
* 함수
*/
const add = (a, b) => a + b;
console.log(`hello how are you ${add(6, 6)}`);

HTML Fragments 1

자세히 보기
[JS] ES6 - Functions

[JS] ES6 - Functions

이채현

Functions

Arrow Functions

기존 함수의 모습을 개선했다.

기존 함수

1
2
3
4
5
6
7
8
9
10
11
function Hello() {
return "hi";
}
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(function (name) {
return name + " ❤️";
});
console.log(hearts);
자세히 보기