이채현

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()

이채현

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

이채현

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);

이채현

Variables

Let and Const

var를 절대 사용하지 않고 let & const 사용하기

• var를 쓰면 안되는 이유

  • var hoisting
    

    때문에…

    • var는 라이프사이클에서… 선언과 초기화를 동시에 한다.
    • global scope에 변수/함수를 선언할 경우 아무리 아래에 선언해도 제일 위로 올라간다. → 어디서 선언했든 상관없이, 항상 제일 위로 선언을 끌어올려준다.
    • block scope를 철저히 무시한다.

  ⇒ 이러한 유연성으로 작은 어플리케이션을 금방 만들 수 있지만, 프로젝트의 규모가 커지면서 나중에서는 선언하지도 않은 값이 멋대로 출력되거나, 개발자들간의 협업에서 여러가지 문제점이 생길 수 있다.

• let은 선언과 초기화가 분리되어 그 사이에 TDZ가 생성되고, 접근할 경우 Reference Error가 발생한다.

• const는 선언과 초기화가 동시에 진행되지만, 선언 이전에 TDZ가 생성되어 접근하면 Reference Error가 발생한다.

  Dead Zone

  temporal dead zone(TDZ)에 영향을 받는 구문은 크게..

  • const 변수
  • let 변수
  • class 구문
  • constructor() 내부의 super()
  • 기본 함수 매개변수

Block Scope