[TIL] Javascript-4

 

[2024.01.05 금요일]

 

1. 개념정리

1) 동기 처리와 비동기 처리

동기(snchronous) 코드 : 코드를 차례차례 실행하는 방식.

비동기(asnchronous) 코드 : 한번에 인자를 받고, 빠르게 끝나는 코드가 먼저 끝나는 방식.

 

2) 비동기 처리를 동기 처리로: 순서가 중요한 작업에서 사용할 수 있다.

(1) promise

resolve(성공), reject(실패)를 호출하는 구문이 있는 경우 둘 중 하나가 실행되기 전에는 then(다음), catch(오류)로 넘어가지 않는다.

then 이하 함수의 매개변수가 resolve의 매개변수와 동일한 값이다.

두 매개변수는 서로 다른 이름일 수 있다.

 

(2) generator

함수이름 뒤에*를 붙인다.

iterator 객체는 next()를 가지고 있다. 반복되는 판단 여부를 나타내는 함수에 .next 한다.

입력해야 하는 값 앞에 yield를 붙이다. yield 앞에서 메소드는 멈추고 입력을 대기할 것이다.

 

(3) async+await

함수 이름 앞에 async를 붙인다. 입력해야 하는 값 앞에 await를 붙인다.

await 앞에서 메소드는 멈추고 입력을 대기할 것이다.

*적용 내용은 구글링이 더 필요하다.

 

2. 적용 가능한 메소드 등

var count = 0;

var numberline = setInterval(function() {

console.log(count);

count += 2;

if(count>10) clearInterval(numberline);

}, 300);

반복 생성하기 좋은 함수. clearInterval의  식별자와 동일한 경우 자동으로 멈출 수 있다.

 

var newArr = [10, 20, 30].map(function (currentValue, index) {

console.log(currentValue, index);

return currentValue + 5;

});

console.log(newArr)

console.log("===========")

addition=[];

function newlinefor (line) {

var addition =line.map(function (currentvalue, index){

console.log(currentvalue, index);

currentvalue += 5;

console.log(currentvalue, index);

return addition;})}

var b=[10, 20, 30, 40, 50];

console.log(newlinefor(b));

map 함수는 데이터를 복사하여 새로운 array를 형성하므로 중요한 함수다.

두번째 함수는 array가 나오지 않고 루프만 돈다. 질문하고 답을 달아놓을 것.

 

3. 해당 개념의 적용과 중요한 점

데이터의 입출력을 다룰 때 동기 비동기 작업을 나누는 것은 중요하다. 데이터가 들어오는 시간에 의존하여 작업을 하게 되면, 이후 데이터의 속도가 느려질 때 작업 전체의 순서가 꼬여 중단될 수도 있다. 따라서 데이터의 순서가 명확한 경우 동기 작업을 선택하는 것이 좋다.

 

4. 시행착오 및 문제 해결 과정

var obj32 = {

name : "이것은 이름이다.",

func : function () {

var self = this;

return function () {

console.log(self.name);

};

}

};

console.log(obj32.name)

var obj3={name : '바뀐것이다.'};

var bbb=obj32.func.call(obj3)

setTimeout(bbb, 200);

function을 이용하여 데이터를 교체한다.

새로운 인자를 바로 호출하는 것(bbb 없이 console.log로 호출)은 불가능하다.

 

5. 하루 회고

문제가 있으면 고민하느라 한시간 이상은 쓴다.

타이머를 맞추고 좀 더 짧게 고민하고 물업는게 더 나을것 같다.

이번 주말에는 코드 쓰고 있을 것 같다.