[JS] this 간단 정리

[JS] this 간단 정리

이채현

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다.

엄격모드와 비엄격 모드에서도 일부 차이가 있다.

  • this는 scope와 관계가 있다.
  • 객체에도 영향을 준다.
  • this가 어디에 묶여있냐를 아는 것이 코드를 작성하는 시점, 동작하는 시점에 차이가 있을 수 있다.

(함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수 를 추가했습니다.)

암시적 바인딩

자세히 보기
[JS] 스코프 간단 정리

[JS] 스코프 간단 정리

이채현

전역 스코프 (Global)

  • 그냥 가장 바깥쪽
  • 언제 어디서나 접근 가능하기 때문에 재정의가 가능하다 ← 큰 문제
    • 그 결과, 프로그램의 실행 결과 때 내가 만든 변수들의 결과를 예측하기 어려워짐 → 팀 단위로 개발할 때 최악

지역 스코프

함수 스코프

블록 스코프

자세히 보기
[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] Algorithm - 자주 쓰이는 구문 정리(22.02.06)

[JS] Algorithm - 자주 쓰이는 구문 정리(22.02.06)

이채현

배열 중복값 개수 구하기

reduce()

reduce() 함수는, 배열의 값을 순회하면서 배열의 값을 특정 형태로 누적하는데 사용합니다.

1
2
3
4
5
6
7
8
9
10
const inputNum = [1, 1, 2, 3, 4, 2, 1];

const result1 = inputNum.reduce((obj, t) => (obj[t] = obj[t] ? obj[t] + 1 : 1, obj), {});

const result2 = inputNum.reduce((obj, t) => {
obj[t] = (obj[t] || 0) + 1;
return obj;
}, {});

// { '1': 3, '2': 2, '3': 1, '4': 1 }

forEach()

자세히 보기
[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오류가 발생할 것이다.

자세히 보기