Promise.all​

Promise.all()을 사용하면 여러 개의 Promise 객체를 동시에 실행함. Promise.all()은 배열 형태로 여러 개의 Promise 객체를 받아들이며, 모든 Promise 객체가 완료될 때까지 기다렸다가, 모든 Promise 객체의 결과 값을 배열 형태로 반환.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('첫번째 작업 완료!');
  }, 3000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('두번째 작업 완료!');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('세번째 작업 완료!');
  }, 1000);
});

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });


// ["첫번째 작업 완료!","두번째 작업 완료!","세번째 작업 완료!"]

async/await 사용​

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function parallel() {
  const task1 = async () => {
    await sleep(3000);
    return '첫번째 작업 완료!';
  }

  const task2 = async () => {
    await sleep(2000);
    return '두번째 작업 완료!';
  }

  const task3 = async () => {
    await sleep(1000);
    return '세번째 작업 완료!';
  }

  const [result1, result2, result3] = await Promise.all([task1(), task2(), task3()]);
  console.log(result1, result2, result3);
}

parallel();

// "첫번째 작업 완료!" "두번째 작업 완료!" "세번째 작업 완료!"

이벤트 루프란?​

자바스크립트는 싱글 스레드(single-thread) 기반으로 동작됨. 즉, 한 번에 하나의 작업만 처리할 수 있다는 것을 의미. 하지만 자바스크립트는 이벤트 루프(event loop)를 통해 비동기적으로 동작할 수 있도록 지원.

이벤트 루프는 자바스크립트 엔진의 메인 스레드에서 동작하는 무한 루프. 이 루프는 실행 중인 코드와 이벤트 큐(event queue)를 관찰하고, 이벤트 큐에 이벤트가 들어오면 해당 이벤트를 처리하는 작업을 수행.

TypeScript는 JavaScript의 확장된 버전으로, 정적 타입 시스템을 지원함.

코드의 타입 검사를 통해 컴파일러가 빌드하기 전에 오류를 검출.

강력한 객체 지향 프로그래밍 지원. 클래스, 인터페이스, 제네릭 등의 개념을 지원하여 객체 지향 프로그래밍을 더 쉽게 할 수 있음.

문법​

interface Person {
  name: string;
  age: number;
}

type Person = {
  name: string;
  age: number;
}

interface 사용 예제​

ASI(Automatic Semicolon Insertion)​

자바스크립트 프로그램은 코딩시 세미콜론(;)이 하나라도 누락되면 돌아가지 않는다.

자바스크립트 파서(parser)는 줄 단위로 파싱을 하다가 세미콜론(;)이 빠져 에러가 나면 세미콜론(;)을 넣어보고 타당하면 세미콜론(;)을 삽입한다

문(Statement)​

프로그램을 구성하는 최소 실행 단위

• 타입 캐스팅(Type Casting) : 명시적으로 타입을 바꾸는 경우

  let a = 26
  let b = String(a)
  

• 강제 변환(Coercion) : 암시적으로 타입을 바꾸는 경우

  let a = 26
  let b = 26 + ""
  

문자열이 아닌 값을 문자열로 변환

let a = true;
a = a.toString()
let b = 26
b = b.toString()

console.log(a)          // "true"
console.log(typeof a)   // string

console.log(b)          // "26"
console.log(typeof b)   // string

console.log(Object.prototype.toString.call(a))  // [object String]
console.log(Object.prototype.toString.call(b))  // [object String]

null , undefined 원시값은 타입 캐스팅을 사용할 수 없으니 주의해야 한다.

네이티브란? 특정 환경(브라우저)에 종속되지 않은 ESMAScript 명세에 있는 내장 함수로 원시 값을 감싸는 객체 래퍼 이다.

• String()
• Number()
• Boolean()
• Array()

자바스크립트의 배열은 자유롭게 어떠한 값이든 넣을 수 있으며, 배열의 크기를 미리 선언 할 필요도 없다.

let array = [26, '스물여섯', ['1-1', '1-2'], function () { 'fun' }]

console.log(array.length)   // 4
console.log(array[0])       // 26
console.log(array[1])       // '스물여섯'
console.log(array[2][0])    // 1-1
console.log(array[2][1])    // 1-2
console.log(array[3])       // f () { 'fun' }

배열에 값을 추가하거나 변경할때도 제약이 없이 자유롭다.

심지어, 아래처럼 빠진 슬롯이 있는 배열 생성도 가능하다.

let array = [];

array[3] = '세번째 값'

console.log(array.length)   // 4
console.log(array[2])       // undefined
console.log(array[3])       // 세번째 값

자바 스크립트의 배열에는 주의점이 있다. 배열도 하나의 객체이기 때문에 키/프로퍼티 값을 추가 할 수 있다. 이 때 배열의 length 가 증가하지 않으니 주의 가 필요하다.

형검사에 따른 언어 분류​

타입을 어떻게 얼마나 엄격하게 검사하는지에 따라 언어를 분류할 수 있다.

• 강한 타입(strong typing) : C, C++, Go, Haskell, Java, Kotlin, Rust, Scala

  → 정적 파일 검사 : 타입이 올바른지에 대한 검사를 런타임 이전에 시행

• 약한 타입(weak typing) : Javascript, Lisp, Lua, Perl, PHP, Python, Ruby

자바스크립트란?​

자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다. 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경된다.

JavaScript는 C에서 영향을 받은 C-Family 언어로 기본적인 문법이 유사 중괄호로 구분하는 블럭, 세미콜론으로 줄이 끝남을 알리는 것, 변수 쓰는 법, 연산자 사용법 등 기초적인 문법이 C 문법과 크게 다르지 않다. 호이스팅 같은 것도 C언어의 잔재이다.

자바스크립트 엔진​

자바스크립트 엔진은 소스코드를 가져와서, 문자열 단위로 분해하고(어휘 단위로 정리), 이들 문자열을 컴파일러가 이해할 수 있도록 바이트 코드로 변환한 후, 이를 실 행하며, 메모리를 할당하고, 가비지 컬렉팅을 한다.

자바스크립트는 함수 선언보다 함수 실행을 먼저 하더라도 동작이 된다.

코드는 위에서 아래로 실행이 된다고 알고 있는데 왜 그런걸까?

실행 컨텍스트​

실행 컨텍스트execution context는 실행할 코드의 환경 정보를 모아 놓은 객체로, 가장 먼저 실행되어 스택에 들어가게 된다.

이 실행 컨텍스트가 생성될 때, 호이스팅이 된다.