[221213] 동기(Sync) & 비동기(Async), 객체 리터럴

경진·2022년 12월 13일
0

프로그래밍 언어의의 모든 구성요소

  • 표현(Expression) : 어떤 값을 표현하는 것
    • ex) 0 + 11을 표현, sparta는 sparta라는 문자열 표현
  • 문(Statement)
    • 복합문 : 또다른 문을 가짐(if문, for문, function)
    • 단일문 : 다른 문을 가지지 않음(return문)
  • function의 특별함
    • function이 if문 등 다른 문과의 차이
let forStatement = for (...) {...} // Error!
let ifStatement = if (...) {...} // Error!
let functionStatement = function (...) {...} // OK?!
  • 원래 문은 이 아니기 때문에 어떤 변수에 할당할 수 없고 식별자 표시 불가.
  • function은 변수에 할당해도 오류 없음 (JS에서 함수는 객체, 즉 표현 취급)
  • 하지만 JavaScript에서도 함수문(Statement)이다.
  • 다만 구현 특성 때문에 표현 취급이 가능
  • 이러한 특성 때문에 우리는 함수를 호출할 때, 그 인자로 다른 함수를 넘기는 동작 가능 (if문, for문은 불가)



Promise

  • JavaScript에서 비동기 처리 -> 동기 처리할 수 있게 돕는 Built-in(미리 내부적으로 정의된)객체 유형

  • promisecallback으로 작동
    • callback: 다른 코드의 인수로서 넘겨주는 실행 가능한 코드. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수 있음.

Promise 생성자 인터페이스

  • executor에는 함수만 올 수 있으며 인자로 resolve, reject 주입
  • executorPromise의 실행함수라고 불리며 Promise가 만들어질 때 자동으로 실행
  • Promise가 연산을 언제 종료하는지 상관하지 않고, resolve, reject 중 하나를 무조건 호출

Prmoise의 상태

Promise는 반드시 3가지 상태를 지니며, 대기(Pending) 상태가 아니라면 Promise의 연산이 끝난 상태로 볼 수 있음.

  • 대기(Pending): 이행하거나 거부되지 않은 초기 상태.
  • 이행(Fulfilled): 연산이 성공적으로 완료됨.
  • 거부(Rejected): 연산이 실패함.



비동기 함수(Async Function)

특징

  • 비동기 함수는 일반 함수나 화살표 함수와 아주 유사하지만 딱 두가지가 다름
    • 비동기 함수의 결과 값은 항상 Promise 객체reslove된다.
    • 비동기 함수안에서만 await 연산자 사용 가능
// Using Method for Async Function

// 1. 비동기 + 일반 함수
async function 함수이름() {
	(명령문)
}


// 2. 비동기 + 익명 함수
async function() {
	(명령문)
}


// 비동기 + 화살표 함수
async () => {
	(명령문)
}
// 이러한 특징은 마치 아래처럼 작성하는 것과 많은 것이 유사함


// 작성 1
function 함수이름() {
	return Promise.resolve('값');
}

// 작성 2
async function 함수이름2() {
	return '값';
}

// 결과 값 (작성1 == 작성 2)
함수이름();   // Print: Promise{'값'}
함수이름2();  // Print: Promise{'값'}
  • 비동기 함수를 왜 사용하는가?
    • await연산자는 비동기 함수 안에서만 사용 가능함.
    • await함수를 사용하면 문법이 간결해짐
  • new Promise(executor) 코드로 Promise를 직접 생성하면 executor가 바로 실행되는 것과 달리, 비동기 함수는 함수가 실행되기 전 까지 Promise를 생성하지 않음.

await 연산자

  • await 연산자를 사용하면 Promise가 fulfill 상태가 되거나 rejected될 때까지 함수의 실행을 중단하고 기다릴 수 있음
  • Promise의 연산이 끝나면 함수에서 반환한 값을 얻을 수 있음
  • await 연산자는 async함수 안에서만 사용 가능



객체 리터럴

객체(Object)란?

0개 이상의 프로퍼티(Property)로 구성된 집합.
하나의 프로퍼티는 KeyValue로 구성됨.

JavaScript의 데이터 타입은 크게 원시 타입객체 타입으로 분류

  • 원시 타입 : 단 하나의 값만을 나타내고, 원시 타입의 값은 변경이 불가능 한 값 (숫자, Boolean 값)
  • 객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료 구조이고, 객체 타입의 값을 변경 가능한 값

리터럴(Literal)이란?

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

객체 리터럴

객체를 생성하기 위한 표기법

  • 객체 리터럴은 객체를 생성하기 위해 Class를 먼저 선언하고 new 연산자와 함께 생성자를 호출할 필요가 없이 일반적인 숫자, 문자열을 만드는것과 유사하게 객체를 생성할 수 있습니다.

  • 객체 리터럴로 객체 생성하기
    • 객체 리터럴은 중괄호{} 내에 0개 이상의 프로퍼티를 정의해서 선언
let objectLiteral = {
  key: 'value',
  hellowWorld: function () {
    return "Hello world!";
  }
};

console.log(objectLiteral);


// Print: { key: 'value', hellowWorld: [Function: hellowWorld] }

  • 프로퍼티(Property)
    • 객체의 상태를 나타내는 값(Data)
    • 키(key)와 값(value)로 구성
const human = {
  name: 'Solrasido',
  'human age': 28
}

console.log(human);


// Print: { name: 'Solrasido', 'human age': 28 }

  • 메서드(Method)
    • 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)을 나타냄
    • 객체의 프로퍼티 값이 함수로 구성되어 있을 경우 메서드(Method)라고 함
let objectLiteral = {
  key: 'value',
  helloWorld: function () {
    return "Hello world!";
  }
}

console.log(objectLiteral.helloWorld());

// Print: Hello World!
profile
항상 처음 세웠던 목표 처럼

0개의 댓글