2023년 02월 3주차 Week I Learned.

Dongchan Alex Kim·2023년 2월 18일
0

Week I Learned

목록 보기
8/14
post-thumbnail

1. 자바스크립트 ES6+에 대해 공부했다.

  • Javascript is synchronous.
  • Execute the code block by orgainization after hoisting.
  • Hoisting is only executed when it is var and function declaration.
  1. Destructuring Assignment (...rest)
    • Object 가능
    • Array 가능
* Array Destructuring
[x, y, ...restof] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(restof); // [30, 40, 50]

* Object Destructuring
({ x, y} = { x: 10, y: 20 });
console.log(x); // 10
console.log(y); // 20
  1. Default parameter
    • printMessage(message = "----")
    • 디폴트 매개 변수(default parameter)는 기본값이 제공된 함수 매개 변수다
function append(value, array = []) {
    array.push(value);
    return array;
}

console.log(append(1)); //[1]
console.log(append(2)); //[2], not [1, 2]
  1. Spread Syntax (...rest)
    • 객체 혹은 배열들을 각각 낱개로 펼쳐서 복사한다.
    • 함수호출과 배열의 리터럴할 때는 Iteratorable Object이어야 함. (Iteratorable Object = String, Array, TypedArray, Map, Set)
    • object에서 같은 걸 선언했을 때는 뒤쪽에서 선언된 것이 앞서서 선언된 것을 덮어쓴다.
* Array Literals
const array2 = [1,2,3];
const array3 = [...array2, 4, 5, ...[6]];
console.log(array3); /*[1,2,3,4,5,6]*/
  1. Conditional (ternary) Operator
    • condition ? exprIfTrue : exprIfFalse
    • 삼항 연산자는 조건문이 true일 때 선택문1을 실행. 조건문이 false일 때 선택문2를 실행
var x = 333, y = 3;
var z = x > y ? "x가 y보다 더 큽니다." : "x가 y보다 더 작습니다.";
document.write(z);
  1. Template literal
    • 일반 문자열과 비슷해 보이지만 백틱(backtick) 문자를 사용한다.
    • 일반적인 문자열에서 줄바꿈은 허용 안됨. 공백을 표현하기 위해 백슬래시()로 시작하는 이스케이프 시퀀스를 사용하여야 했다.
    • Template literal은 + 연산자를 사용하지 않아도 새로운 문자열을 삽입할 수 있는 기능을 제공한다.
const first = 'Dongchan';
const last = 'Kim';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Dongchan Kim."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Dongchan Kim."
  1. Optional Chaining
    • ?.이 추가되기 전엔 에러 해결하기 위해 && 연산자를 사용했음.
    • ?. 앞의 조건 대상이 undefined나 null → 평가를 멈추고 undefined를 반환.
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러 X
  1. Nullish Coalescing Operator
    • ??를 사용하면 여러 피연산자 중 ‘확정되어있는’ 변수를 찾을 수 있다.
    • | | 는 첫 번째 truthy 값을 반환함.
    • ?? 는 첫 번째 정의된 값 (defined)을 반환함.
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

2. 자바스크립트의 비동기/동기와 async와 await에 대해 공부했다.

  1. Synchronous Callback
    : 동기는 프로그램을 작성한 순서대로 한 줄씩 실행한다. 브라우저는 각 지점에서 다음 줄로 넘어가기 전까지 현재 라인의 작업이 끝날 때까지 기다린다. 각 라인들은 이전 라인에 의존한다는 점을 알 수 있다.
  2. Asynchronous Callback (Hoisting 개념과 비슷함)
    : 비동기는 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 한다.
setTimeout(function(){
	console.log("2")
},1000);

// 1초 후에 콘솔에 "2"가 나타남.
  1. Promis함수는 비동기를 간편하게 처리할 수 있도록 도와주는 Object이다.
    promise is a javascript object for asynchronous operation.

① state
Heavy한 operation이 실행중인지, 완료되었는지, Error인지 판별한다.
[ pending(대기 상태) → fulfilled || rejected(실행완료 or 에러상태) ]

② producer VS consumer

  • producer
const promise = new Promise(resolve(), reject()=>{
	'doing something heavy...'
})

heavy한 데이터를 가져올 때, 다음 것들이 실행되지 않는다.
→ 비동기적으로 실행시켜본다.
(when new promise is created, the executor runs automatically!)

  • consumer [ catch(), then(), finally() ]
1. promise.then((value)=>{})
promise가 정상적으로 작동이 잘될 때, 해당 값이 value인자로 들어오게 된다.
- 값을 전달받아도 OK, 비동기 promise를 받아도 OK

2. promise.catch((value)=>{})
error가 나타났을 때 어떻게 처리할 것인지에 대한 함수.

3. promise.finally((value)=>{})
실패든, 에러든, 상관없이 무조건!! 마지막에 실행되는 함수.
  1. JS 는 동기적인 처리를 하기 때문에.
    Promise라는 오브젝트를 가지고 있으면, then이라는 콜백함수만 등록해놓으면, 유저의 데이터가 준비되는 대로 등록한 콜백함수를 불러온다는 느낌..?으로 이해한다.
    → 이때 producer 입장에서, resolve()나 reject를 이용해서 완료처리를 해준다.

  2. async를 function 앞에 써주면, promise를 쓰지 않아도 된다.
    → 코드 블럭이 자동적으로 비동기 promise로 바뀐다.

  • promise.all(getapple(),getbanna())
    비동기적으로 동시에 실행시킨다. 동기적으로 한줄씩 실행시키는 것이 아니라,
    when new promise is created, the executor runs automatically를 이용해서 동시에 실행시켜 런타임을 줄이는 용도? 이다.

  • promise.race(getapple(),getbanna())
    두개의 함수의 런타임중에서 더 먼저 수행되는 함수를 먼저 부르는 프로미스 함수이다.


이거 외에도 이번주에는 많은 양의 코딩테스트와
자바스크립트 기본 개념들을 알차게 공부했다.
map,filtet,reduce,splice,forEach등과 같은 내장함수와 친해지는 연습을 정말 많이 했고,
지금은 내장함수 없으면 코딩을 하지 못할 지경이 되어버렸다..ㅎㅋㅎㅋㅋㅋㅎㅋㅎㅋㅎ

다음주는 조금더 심화적인 자바스크립트 개념에 대해 공부할 예정인데,
벌써 신난다. 궁금하다.

꾸준히 성장하자.

profile
Disciplined, Be systemic

0개의 댓글