JavaScript ES6 & 객체 지향 문법

📒 왜? (사용 이유)

◼ JavaScript로 UI 같은 것은 매우 쉽게 만들 수 있지만, JavaScript 문법을 사용하다 보면 어렵고 불편한 문법들이 많다.

◼ ES6는 JavaScript 버전(2015)으로 대규모 업데이트가 진행되어, JavaScript를 조금 더 쉽고 편리하게 사용할 수 있도록 많은 문법들을 지원해 준다.

---

📒 Arrow function

<script>
  // 방법 1
  function test1(data) {
    console.log(data);
  }

  // 방법 2
  var test2 = (data) => {
    console.log(data);
  };
  
  // 방법 2와 같은 코드
  var test2 = data => console.log(data);

</script>

◼ 함수를 만드는 방법에는 위 두 가지 방법이 존재한다.

◼ function 키워드 대신 ES6의 Arrow function을 사용해서 방법 2와 같이 함수를 만들 수 있다.

◼ this 값을 재정의 하지 않아도 될 때, 사용하는 것이 좋다.

 

✔ Arrow fucntion의 장점

◼ 함수를 만들 때 가독성이 향상된다.

◼ 파라미터가 1개 있을 때, 소괄호를 삭제할 수 있다.

◼ 코드가 한 줄이면 {}를 생략할 수 있다.

---

📒 변수

◼ 사용할 수 있는 변수 키워드는 var, let, const가 존재한다.

◼ 선언, 할당, 범위, 호이스팅 4가지를 기억하는 것이 좋다.

◼ 호이스팅은 var 키워드와 함수에서 발생한다.

 

✔ var 키워드

// 재선언
var a = 1;
var a = 1; // 가능

// 재할당
a = 3; // 가능 

// 범위
function asc() {
  var b = 1;
}

console.log(b); // 에러 발생

if (true) {
  var c = 1;
}

console.log(c); // 1

// 호이스팅
console.log(d); // undefined
var d = 1;

◼ 재선언이 가능하다.

◼ 재할당이 가능하다.

◼ 범위(스코프)는 function이다.

◼ 호이스팅이 발생한다.

    ❗ 호이스팅이란, 선언부를 위로 끌어올리는 것을 의미한다. * 할당은 이루어지지 않는다.

   💥 호이스팅으로 인해 위 코드의 d 변수 부분이 다음과 같아진다.

var d;
console.log(d);
d = 1;

 

✔ let 키워드

// 재선언
let a = 1;
let a = 1; // 불가능

// 재할당
a = 3; // 가능

// 범위
function asc() {
  let b = 1;
}

console.log(b); // 에러 발생

if (true) {
  let c = 1;
}

console.log(c); // 에러 발생

// 호이스팅
console.log(d); // 에러 발생
var d = 1;

◼ 재선언이 불가능하다.

◼ 재할당이 가능하다.

◼ 범위(스코프)는 block이다.

◼ 호이스팅이 발생하지 않는다.

 

✔ const 키워드

// 재선언
const a = 1;
const a = 1; // 불가능

// 재할당
a = 3; // 불가능

// 범위
function asc() {
  let b = 1;
}

console.log(b); // 에러 발생

if (true) {
  let c = 1;
}

console.log(c); // 에러 발생

// 호이스팅
console.log(d); // 에러 발생
var d = 1;

◼ 재선언이 불가능하다.

◼ 재할당이 불가능하다.

◼ 범위(스코프)는 block이다.

◼ 호이스팅이 발생하지 않는다.

 

const arr = [1, 2, 3];

const obj = {
  name: "choi",
};

arr[3] = 4; // 가능
obj.age = 10; // 가능

console.log(arr);
console.log(obj);

◼ Object, Array에서는 수정이 가능하다.

 

const arr = [1, 2, 3];

const obj = {
  name: "choi",
};

Array.freeze(arr);
Object.freeze(obj);

arr[3] = 4; // 불가능
obj.age = 10; // 불가능

◼ 수정이 불가능한 Object, Array를 만들기 위해서는 Object.freeze({Object 명}), Array.freeze({Array 명})을 사용하여 수정이 불가능하게 할 수 있다.

◼ strict 모드에서 에러가 발생한다.

 

💬 JavaScript에서 전역 변수 만들기

// 방법 1
<script>
  var a = 1; // 전역 변수
  let b = 2; // 전역 변수
  const c = 3; // 전역 변수
  
  console.log(window.a); // 1
  console.log(window.b); // undefined
  console.log(window.c); // undefined
</script>

// 방법 2
<script>
  window.a = 1; // 전역 변수
  window.b = 2; // 전역 변수
  window.c = 3; // 전역 변수
</script>

◼ 위와 같이 JavaScript에서 전역 변수를 선언 및 초기화할 수 있다.

💥 단, 1번 방법에서 var a는 window.a로 할당되지만, let과 const는 window.b, window.c로 할당되지 않는다.

// 에러 발생
<script>
  function test() {
    var a = 10;
  }
  test();
  console.log(a); // 에러 발생
</script>

// 정상 출력
<script>
  function test() {
    window.a = 10;
  }
  test();
  console.log(a); // 10 
</script>

◼ 위와 같은 코드 현상 때문에, 전역 변수 선언 및 초기화 시, window.{전역 변수 명} 방식을 권장한다.

 

💥 조심해야 할 상황

<script>
  for (var i = 0; i < 10; i++) {
    setTimeout(() => {
      console.log(i);
    }, 1000);
  }
</script>

◼ 위 코드의 결과로 1초 후에, 1부터 10까지 출력되길 원했지만 실제 출력 값은 10이 10번 출력된다.

◼ 실제로 console.log()가 실행되는 시점은 1초 후이고, var 키워드로 선언된 i는 function 스코프로 사용되므로, 1초 후에는 모든 for문 돌아 i 값이 10으로 변경된 상태로 console.log()가 실행되기 때문에 위와 같이 출력된다.

◼ for 문에서는 var 키워드로 i를 선언하는 것이 아닌 let 키워드로 선언해서 block 범위로 사용하는 것이 좋다.

---

📒 template literals (strings)

◼ ES6 버전부터 지원하는 문자열을 다르게 제작할 수 있는 방법이다.

◼ `(백틱)을 사용해서 문자열을 생성할 수 있다. 

 

✔ 장점

// 엔터키
let a = `Hello
Enter`;
console.log(a); // Hello
                // Enter

// 변수 넣기
let age = 10;
console.log(`choi의 나이는 ${age}살이다.`); // choi의 나이는 10살이다.

// 함수 넣기
let age = function () {
return 10;
};
console.log(`choi의 나이는 ${age()}이다.`); // choi의 나이는 10살이다.

// 해체하기
let name = "choi";
let age = 10;

function separator(strs, var1, var2) {
  console.log(strs); // ["안녕하세요 저는 ", "이며, ", "살입니다."]
  console.log(var1); // choi
  console.log(var2); // 10
}

separator`안녕하세요 저는 ${name}이며, ${age}살입니다.`;

◼ 엔터키를 사용해서 엔터가 적용된 문자열을 생성할 수 있다.

◼ ${}를 사용하여, 문자열 중간에 변수, 함수를 쉽게 넣을 수 있다.

◼ ``을 사용하여 만들어진 문자열을 변수 기준으로 해체해서 원하는 문자열로 재조립하기 쉽다.

---

📒 Spread Operator

◼ ...(Spread Operator)을 사용해서 펼쳐서 늘여 트릴 수 있다.

◼ 변수 왼쪽에 붙여 사용한다.

◼ 항상 소괄호( () ), 중괄호( {} ), 대괄호( [] ) 안에서 사용해야 한다.

 

✔ 사용법

// 변수 늘여 트리기
var arr = ["Hello", "World!"];
console.log(...arr); // Hello World!

var str = "Hello";
console.log(...str); // H e l l o

◼ 배열에 사용하면 원소 기준으로 공백이 붙고, 합쳐진다.

 

// Array, Object 합치기
var arr1 = [1, 2, 3];
var arr2 = [4, 5];

var arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5]

var o1 = { a: 1, b: 2 };
var o2 = { ...o1, c: 3 };
console.log(o2); // {a: 1, b: 2, c: 3}

◼ 문자열도 Array 처럼 인덱싱이 가능하기 때문에 사용하면, 문자들로 나뉜다.

 

// Deep Copy
var arr1 = [1, 2, 3];
var arr2 = arr1; // shallow copy
var arr2 = [...arr1] // deep copy

var o1 = { a: 1, b: 2 };
var o2 = { ...o1 };
console.log(o2); // {a: 1, b: 2}

◼ Array, Object을 합치거나, Deep Copy에서 유리하다.

   💥 단, Object의 Deep Copy에서 o1가 {a: 1} 일 때, o2 = {a: 3, ...o1}로 코드를 작성하면, o2 = {a: 1}이 된다. 뒤에 오는 것으로 덮어 씌워진다.

 

// 인자로 넘기기
var arr1 = [1, 2, 3];

function test(a, b, c) {
  console.log(a + b + c);
}

test(...arr1);

◼ Array를 인자로 넘길 때 Spread Operator를 사용하면, 원소 하나씩 받아서 사용할 수 있다.

◼ Object에서는 사용할 수 없다.

---

📒 ES6 함수에 추가된 기능

✔ dafult parameter

// 값
function add(a, b = 10) {
  console.log(a + b);
}

add(1); // 11

// 식
function add(a, b = 10 + 5) {
  console.log(a + b);
}

add(1); // 16

// 변수
function add(a, b = 10 + a) {
  console.log(a + b);
}

add(1); // 12


// 함수
function defaultValue() {
  return 10;
}

function add(a, b = defaultValue()) {
  console.log(a + b);
}

add(1); // 11

// 파라미터 2개 넘어왔을 때
function add(a, b = 10) {
  console.log(a + b);
}

add(1, 4); // 5

◼ 기존 JavaScript에서는 파라미터를 2개 받는 함수에서 1개의 파라미터만 넘어와도 정상 실행되었다.

◼ ES6 이후 부터는 default 파라미터를 사용해서 파라미터의 초기 값을 설정할 수 있다.

◼ 파라미터를 정상적으로 2개 넘겼을 때는 default parameter의 값이 적용되지 않는다.

 

✔ 함수의 arguments

function printParameters(a, b, c) {
  console.log(arguments[0]); // 1
  console.log(arguments[1]); // 2
  console.log(arguments[2]); // 3
}

printParameters(1, 2, 3);

◼ 파라미터를 배열처럼 사용할 수 있다.

 

function printParameters(a, b, c) {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

printParameters(1, 2, 3);

◼ 위와 같이 조금 확장성 있게 사용할 수 있다.

 

✔ rest parameter

function print(...arr) {
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
}

print(1, 2, 3);

function print(a, b, ...arr) {
  console.log(a); // 1
  console.log(b); // 2
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 3 // 4 // 5
  }
}

print(1, 2, 3, 4, 5);

◼ 함수의 파라미터 자리에 ...이 붙으면 rest parameter이다.

◼ 인자로 여러 개의 값을 따로 넘길 때, rest parameter를 사용해서 받으면 각 값들이 Array 요소로 저장되어 사용할 수 있다.

◼ 인자로 몇 개의 값이 넘어올지 모를 때, 사용하면 좋고 함수의 arguments를 사용하는 것보다 좋다.

💥 rest parameter는 파라미터 마지막에 사용하지 않고, 두 번 이상 사용하면 오류가 발생한다.

---

📒 Data Type

✔ primitive data type

"abc"
10
true
undefined
null

◼ 종류는 number, string, boolean, null, undefined가 있다.

◼ primitive data type은 변수에 값이 그대로 저장된다.

 

✔ reference data type

[1, 2, 3]
{name: "choi"}

◼ 종류는 array, object가 있다.

◼ reference data type은 변수에 값이 존재하는 것이 아닌 참조 주소 값이 존재한다.

 

💥 고려 사항

// primitive data type
let a = 10;
let b = a;
b = 20;
console.log(a) // 10

// reference data type
let obj1 = {age: 10};
let obj2 = obj1;
obj2.age = 20;
console.log(obj1.age) // 20

◼ primitive data type은 b = a;에서 a의 데이터 값이 복사되어 b에 저장된다. 따라서, b의 값을 변경해도 a의 값은 변함없이 10이 출력된다.

◼ reference data type은 obj2 = obj1;에서 obj1의 참조 주소 값이 복사되어 obj2에 저장된다. 따라서, obj1와 obj2는 같은 참조 공간을 가리키기 때문에, obj2의 값을 변경하면 obj1의 값도 변경되어 20이 출력된다.

 

// 상황 1
var obj1 = {name: "choi"}

function change(obj) {
  obj = {name: "kim"};
}

change(obj1);
console.log(obj1.name) // choi

// 상황 2
var obj1 = {name: "choi"}

function change(obj) {
  obj.name = "kim";
}

console.log(obj1.name) // kim

◼ 상황 1) JavaScript는 Call By Value이기 때문에, 파라미터로 넘어온 참조 주소 값을 obj라는 새로운 변수에 복사해서 할당한다. 이후, obj에 다른 Object를 대입하였기 때문에, obj와 obj1은 다른 참조 주소 값을 가지게 되어 change 함수 후 obj1.name 값을 출력하면 "choi"가 출력된다.

◼ 상황 2) 파라미터로 넘어온 참조 주소 값을 obj라는 새로운 변수에 복사해서 할당한다. obj.name = "kim"이 동작할 때, obj에는 obj1의 참조 주소 값이 복사되어 저장되어 있기 때문에, obj1과 같은 실제 값의 name을 "kim"으로 바꾼다. chage 함수 호출 후 obj1.name을 출력하면 "kim"이 출력된다.

---

📒 Symbol

let person = { name: "choi" };
let age = Symbol("나이");

person[age] = 10;
console.log(person); // {name: 'choi', Symbol(나이): 10}
console.log(person.age); // undefined
console.log(person[age]); // 10

for (let key in person) {
  console.log(key); // name만 출력된다.
}

◼  실용적인 자료형은 아니다.

◼  Symbol의 용도는 Object 자료형의 비밀스러운 key 값이다. (비공개)

◼  Object key 값으로 Symbol을 넣을 수 있다.

◼  person.age를 사용하면 10이라는 값이 아닌, undefined가 출력된다.

◼  symbol을 사용해서 값을 넣으면 ,enumerable하지 않다. 따라서, person에 대해서 for 문을 실행하면, name이라는 key 값만 출력된다.

---

📒 Map & Set

✔ Map

let map = new Map();

map.set("name", "choi");
map.set(100, "age");
console.log(map); // Map(2) {'name' => 'choi', 100 => 'age'}

console.log(map.get("name")); // choi

◼ key, value를 저장하는 Map 자료형

◼ Map 자료형은 자료 간의 연관성/의존성을 표현하기 위해서 사용한다. 따라서, "name" => "choi" 같은 형태로 저장되어 있다.

◼ Object 자료형에서 key 값은 문자열만 가능했지만, Map은 모든 자료형이 가능하다.

 

✔ Set

let set = new Set(["a", "a"]);
set.add("a");

console.log(set); // Set(1) {'a'}
console.log(set.has("a")); // true
console.log(set.size); // 1

◼ 중복 자료를 허용하지 않는 Array와 비슷한 자료형

---

📒 ?. & ??

✔ ?. (optional chaining)

let user = {
  name: "choi",
};

console.log(user.age.value); // Reference Error
console.log(user.age?.value); // undefined

◼ ?. 왼쪽이 null 이거나 undefined면 오른쪽을 실행하지 않고 undefined를 출력한다.

◼ 중첩 Object일 경우 사용한다. 즉, 한 코드에 .이 2번 이상 있을 경우 2번 째 .부터 사용한다.

 

✔ ?? (nullish coalescing)

let user = {
  name: "choi",
};

console.log(user.age ?? 10); // 10

◼ ?? 왼쪽이 null이거나 undefined면 오른쪽을 실행한다.

---

📒 객체 지향

💬 객체 지향 문법은Object를 여러 개 만들어서 사용할 때, 조금 더 편리하게 만들고 사용하기 위해서 사용한다.

 

💥 ES6 문법 이전

✔ constructor

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(`내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`);
  };
}

let person1 = new Person("choi1", 10);
let person2 = new Person("choi2", 20);
let person3 = new Person("choi3", 30);

person1.say(); // 내 이름은 choi1 이고, 나이는 10 입니다.
person2.say(); // 내 이름은 choi2 이고, 나이는 20 입니다.
person3.say(); // 내 이름은 choi3 이고, 나이는 30 입니다.

◼ constructor는 새로운 객체를 생성할 때, 사용한다.

◼ 여기서 this는 새로운 Object를 가리킨다.

◼ 자바처럼 Class를 정의하고 생성자(constructor)를 사용해서 인스턴스를 만드는 것이 아닌, 생성자만 가지고 Object(인스턴스)를 생성할 수 있다.

 

✔ prototype

function Person(name) {
  this.name = name;
  this.age = 10;
  this.say = function () {
    console.log(`내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`);
  };
}

console.log(Person.prototype);

◼ prototype은 상속을 구현할 수 있는 JavaScript의 문법이다.

◼ constructor를 만들면 prototype이라는 공간이 자동으로 생긴다.

◼ Person이라는 constructor를 생성한 뒤, prototype을 출력하면 특정 값이 출력된다.

◼ prototype이라는 공간에 값을 추가하면, 모든 자식들이 물려받을 수 있다.

◼ prototype은 함수에만 생성되는 공간이다.

 

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(`내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`);
  };
}

let person1 = new Person("choi", 10);
let person2 = new Person("choi2", 20);
console.log(person1.country);
console.log(person2.country);

Person.prototype.country = "ko";
console.log(person1.country);
console.log(person2.country);

◼ 위 예제와 같이, new Person()으로 인스턴스를 생성한 뒤, 추후 new Person() 생성한 모든 인스턴스에 값을 추가해야 할 경우, 유용하다.

💬 이러한 방법이 가능한 이유는, person1.country 코드에 경우 JavaScript는 person1이 직접 name을 가지고 있는지 확인하고 없으면  prototype 공간을 확인해서 값이 존재하면 출력한다. person1.toString() 같은 경우에는 Person 객체에 값도 없고, prototype에도 없어, 그 상위인 Object.prototype에 존재하는 toString()을 실행해 준다.

 

💥 ES6 문법 이후

✔ class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.say = function () { // 1번
      console.log(`1. 내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`);
    };
  }

  say() { // 2번
    console.log(`2. 내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`);
  }
}

let person1 = new Person("choi", 10);
console.log(person1.name); // choi

person1.say(); // 1. 내 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.

◼ Class를 사용해서 인스턴스를 생성할 수 있다.

◼ 1번으로 함수를 작성하는 방법과 2번으로 함수를 작성하는 방법이 있다.

   ❗ 1번으로 함수를 작성하면, Person이라는 Object에 포함된 함수로써 작동한다. 즉, 생성된 인스턴스가 실제 값을 가지게 된다.

   ❗ 2번으로 함수를 작성하면, Person의 prototype 공간에 포함된 함수로써 작동한다. 즉, 인스턴스가 실제 값으로 가지는 것이 아닌 Person 클래스의 prototype 공간에서 가지고 있다.

◼ 따라서, person1.say() 코드를 실행하면, Object의 실제 값부터 출력하기 때문에 1번 함수의 실행 결과가 출력된다.

 

✔ extends

class Dog {
  constructor(type, characteristic) {
    this.type = type;
    this.characteristic = characteristic;
    this.burk = function () {
      console.log("Bow-wow!!");
    };
  }

  print() {
    console.log("print");
  }
}

class Bulldog extends Dog {
  constructor(something) {
    super("Bulldog", "strong");
    this.something = something;
  }
}

class Poodle extends Dog {
  constructor() {
    super("Poodle", "cute");
  }

  print() {
    console.log("i`m poodle");
  }
}

let bulldog = new Bulldog("something");
console.log(bulldog.type); // Bulldog
console.log(bulldog.something); // something
bulldog.burk(); // Bow-wow!!
bulldog.print(); // print

let poodle = new Poodle();
console.log(poodle.type); // Poodle
poodle.burk(); // Bow-wow!!
poodle.print(); // i`m poodle

◼ class 상속을 위해서 사용한다.

◼ class의 값이나 함수를 그대로 사용하면서, 별도의 추가적인 class 여러 개가 추가되어야 할 때, 상속이라는 개념을 사용한다.

◼ extends 해서 만든 class는 constructor 내부에서 super 함수를 통해 부모 객체의 constructor도 호출해 주어야 한다.

◼ print 함수의 경우, Dog 클래스의 prototype 공간에 저장했기 때문에, bulldog 변수에서 print 함수를 사용하면 Dog의 print가 호출되지만, poodle의 경우 print 함수를 재정의 하였기 때문에, "i`m poodle"이 출력된다. Java의 IOverride랑 동일하다.

---

📒 Destructuring

✔ Array, Object -> 변수

let arr = [1, 2, 3];

// 기존
let a = arr[0];
let b = arr[1];
let c = arr[2];

// destructing (Array)
let [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// destructing (Object)
let obj = { name: "choi", age: 10 };
let { name, age } = obj;

console.log(name);
console.log(age);

◼ 모양( [] ) 맞춰서 변수를 선언하고 Array를 대입하면, 각 변수의 순서에 맞는 Array 인덱스 값이 할당된다.

◼ 모양( {} ) 맞춰서 key 값을 변수 이름으로 선언하고 Object를 대입하면, 각 변수에 맞는 Object  value 값이 할당된다.

 

✔ default 값 지정

// Array
let arr = [1, 2];
let [a, b, c = 3, d] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // undefined

// Object
let obj = { name: "choi", age: 10 };
let { name, age, type = "person", something } = obj;

console.log(name);
console.log(age);
console.log(type);
console.log(something);

◼ default 값도 지정할 수 있다.

◼ default 값도 없을 경우에는 undefined가 출력된다.

 

✔ 변수 -> Object

let name = "choi";
let age = 10;

let person = { name, age };
console.log(person.name); // choi
console.log(person.age); // 10

◼ 반대로 Object를 생성할 때, 변수 자체를 넣을 경우, 변수의 이름이 key 값, 변수의 값이 value 값으로 저장된다.

 

✔ 함수 파라미터로 받기

// Array
let arr = [1, 2, 3];

function print([a, b, c]) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

print(arr);


// Object
let person = { name: "choi", age: 10 };

function print({ name, age }) {
  console.log(name); // choi
  console.log(age); // 10
}

print(person);

◼ { }를 사용하여 Object의 key 값의 value 값을 변수로 받을 수 있다.

---

📒 import & export

✔ preview.js 파일을 preview.html 파일에서 사용하기

// 기존
<script src="preview.js"></script>

// import & export
/* preview.html 파일 */
<script type="module">
  import a from "/preview.js";
  console.log(a); // 10
</script>

<script type="module">
  import exportVal from "/preview.js";
  console.log(exportVal); // 10
</script>

/* preview.js 파일 */
let a = 10;

export default a;

◼ import { 파일에서 사용할 변수명 } from {경로} 를 사용해서 해당 js 파일에서 원하는 부분만 가져올 수 있다.

◼ export default { 내보낼 것 } 을 사용해서 js 파일에서 원하는 부분만 내보낼 수 있다.

◼ import 에서의 a는 작명 부분으로 export 한 a 대신 다른 변수명을 사용해도 a의 값이 잘 출력된다.

 

/* preview.html 파일 */
<script type="module">
  import { a, b } from "/preview.js";
  console.log(a); // 10
  console.log(b); // 20
</script>

/* preview.js 파일 */
let a = 10;
let b = 20;

export { a, b };

◼ export default는 파일 당 1회 사용이 가능하다.

◼ 여러 개를 내보내고 싶다면 export { {내보낼 것}... } 을 여러 개 작성해서 사용한다.

◼ html 파일에서 받을 때, 내보낸 것의 변수명을 사용해서 받아야 한다.

 

/* preview.html 파일 */
<script type="module">
  import exportDefaultVal, { a, b as other} from "/preview.js";
  console.log(a); // 10
  console.log(other); // 20
  console.log(exportDefaultVal); // 30
</script>

/* preview.js 파일 */
let a = 10;
let b = 20;
let c = 30;

export { a, b };
export default c;

◼ export, export default를 같이 사용할 수 있다.

◼ import 할 때는 export default 값 부터 받은 후 ,(콤마)와 {}를 사용해서 export 변수를 받아서 사용할 수 있다.

◼ export 한 변수를 html 파일에서 다른 변수명으로 사용하고 싶으면, as를 사용해서 다른 변수명으로 지정할 수 있다.

 

/* preview.html 파일 */
<script type="module">
  import exportDefaultVal, * as obj from "/preview.js";
  console.log(obj.a); // 10
  console.log(obj.b); // 20
  console.log(exportDefaultVal); // 30
</script>

/* preview.js 파일 */
let a = 10;
let b = 20;
let c = 30;

export { a, b };
export default c;

◼ import 시 *을 사용해서 모든 export 변수를 받고 as obj로 변수명을 변경하여 Object 형식으로 변수 값을 사용할 수 있다.

 

💥 별도의 js 파일을 가져다 쓰고 싶을 때는 <script src={경로} /> 방법을 사용하는 것이 제일 호환성 좋다. 그러나 React, Angular 등을 사용할 떄는 해당 문법을 사용해서 쓴다.

---

📒 Promise

◼ JavaScript에서 비동기 함수 호출 또는 비동기 연산이 완료되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈이다.

◼ 순차적 실행을 위해 콜백 함수 대신 쓸 수 있는 코딩 패턴이다.

◼ 3가지 상태가 존재한다. (resolved(성공), reject(실패), pending(판정 대기 중))

 

✔ 사용법

let promise = new Promise(function (reslove, reject) {
  let result = 1 + 1;
  reslove(result); // promise가 함수 실행을 성공 처리한다.
});

promise
  .then(function (data) {
    console.log(data); // 2
  })
  .catch(function () {
    console.log("error");
  });

let promise = new Promise(function (reslove, reject) {
  try {
    Exception();
    reslove();
  } catch (error) {
    reject(error); // promise가 함수 실행을 실패 처리한다.
  }
});

promise
  .then(function () {
    console.log("success");
  })
  .catch(function (err) {
    console.log(err); // error가 출력된다.
  });

◼ Promise는 해당 함수가 성공/실패 했는지 판정하는 기계이며, 이후 처리를 도와준다.

◼ Promise Object를 생성할 때, reslove와 reject 인자를 사용하여 함수 실행 결과를 성공 처리, 실패 처리할 수 있다.

◼ reslove({결과 값}): 함수 실행 결과를 성공 처리하며, 인자로 넣은 결과 값을 then({변수})에서 변수로 받아 사용할 수 있다.

◼ reject({Exception}): 함수 실행 결과를 실패 처리하며, 예외를 넘겨서 catch({변수})에서 변수로 받아 사용할 수 있다.

◼ then({function}): 비동기 함수 호출이 성공적으로 종료되었을 때, 이후 처리할 함수를 등록할 수 있다.

◼ catch({function}): 비동기 함수 호출에서 에러가 발생했을 때, 에러 처리 함수를 등록할 수 있다.

◼ finally({function}): 비동기 함수 호출이 성공적이든, 에러가 발생했든 무조건 실행하는 함수를 등록할 수 있다.

 

💬  Promise는 실행의 결과(성공, 실패)에 따라서, then(), catch()가 적절하게 호출되어 이후 처리가 가능하도록 도와주는 문법이다.

💬 Promise 객체를 반환하면, js 파일의 모든 코드가 종료된 후, Call Stack에 등록되어 처리된다.

💬 fetch() 함수는 Promise 객체를 반환하기 때문에, then(), catch()를 사용하여 실행 결과를 처리할 수 있다.

 

✔ 이미지 로딩 체크하는 Promise 만들기

<img id="test" src="js.png" />

<script>
  // Promise 객체 생성
  let imgLoadingCheck = new Promise(function (reslove, reject) {
    let img = document.querySelector("#test");
    // 이미지 로딩 성공
    img.addEventListener("load", function () {
      reslove();
    });
    // 이미지 로딩 실패
    img.addEventListener("error", function () {
      reject();
    });
  });

  imgLoadingCheck
    .then(function () {
      console.log("성공"); // 출력
    })
    .catch(function () {
      console.log("실패");
    });
</script>

◼ 이미지 로딩 성공/실패 Promise 객체를 만들어두면, imgLoadingCheckPromise를 사용해서 then(), catch()로 성공/실패를 처리할 수 있다.

---

📒 async/await

✔ async

async function add() {
  console.log("1111");
  1 + 1;
}

add().then(() => {
  console.log("add Finish");
});

console.log("2222");

◼ async 함수 앞에 붙일 수 있는 키워드로, 해당 키워드가 붙은 function은 Promise 역할을 가능하게 한다.

◼ async 함수는 함수 실행 후, Promise 오브젝트가 return 된다.

◼ 실행 실패로 처리하기 위해서는 return Promise.reject({내용})을 사용해야 한다.

◼ 위 코드의 실행 결과는 1111 출력, 2222 출력, "add Finish"가 호출된다.

💥 Promise 객체와 마찬가지로, add 함수 내부의 코드는 JavaScript 메인 쓰레드에서 실행되고, 함수가 종료 후, Promise 객체를 반환하기 때문에, then()에 등록한 콜백 함수보다, 다른 모든 코드를 실행하고, Call Stack이 비었을 때, then()에 등록한 콜백 함수가 실행된다.

 

✔ await

async function add() {
  let promise = new Promise((resolve, reject) => {
    console.log("1번");
    let result = 0;
    for (let i = 0; i < 10; i++) {
      result += i;
    }
    console.log(result);
    resolve(result);
  });

  console.log("2번");

  try {
    let result = await promise;
    console.log("3번");
    console.log(`결과: ${result}`);
  } catch (err) {}

  console.log("4번");
}

console.log("시작");

add().then(() => {
  console.log("add Finish");
});

console.log("맨아래!");

◼ async function 안에서 사용한다.

◼ await은 Promise 객체 인스터스 앞에 사용해서 성공/실패 값을 받아서 사용할 수 있다.

◼ async function 안에서 Promise 객체의 결과를 받을 때 까지, 대기해서 async 함수 내부의 실행 흐름을 맞출 수 있다.

◼ 위 코드의 실행 결과는 "시작" -> "1번" -> 45 -> "2번" -> "맨아래!" -> "3번" -> "결과: 45" -> "4번" -> "add Finish" 순서로 출력된다.

 

💥 await을 사용하지 않는다면?

async function add() {
  let promise = new Promise((resolve, reject) => {
    console.log("1번");
    let result = 0;
    for (let i = 0; i < 10; i++) {
      result += i;
    }
    console.log(result);
    resolve(result);
  });

  console.log("2번");

  promise.then((res) => {
    console.log(`결과: ${res}`);
  });

  console.log("3번");
}

add().then(() => {
  console.log("add Finish");
});

console.log("맨아래!");

◼ 위 코드의 실행 결과는 "1번" -> 45 -> "2번" -> "3번" -> "맨아래!" -> "결과: 45" -> "add Finish" 순서이다.

◼ await을 사용해서 Promise 결과 값을 받을 때 까지 기다리지 않고, 코드 맨 아래까지 실행한 뒤, Task Queue 순서에 의해 promise.then()에 등록한 콜백 함수 실행 결과가 출력되고, 다음으로 add().then()에 등록한 콜백 함수의 실행 결과가 출력된다.