제로초 JS 입문 강의 6강 정리 (로또 추첨기)

 

 

 

 

 

6 - 1 입력값 체크

trim() 함수

문자열의 좌우 공백을 없애는 함수.

 

let str = "        test ";
let testA = str.trim();


test

 

 

 

 

 

6 - 2 공 뽑아서 정렬

 

피셔-예이츠 셔플 알고리즘

랜덤 정렬을 위해 고안한 알고리즘.

예시는 아래와 같다.

 

const bbopki = Array(45).fill().map((v, i) => i + 1);
const shuffle = [];
while( bbopki.length > 0){
	const random = Math.floor(Math.random() * bbopki.length);
    const tempArray = bbopki.splice(random, 1);
    const value = tempArray[0];
    shuffle.push(value);
}
console.log(shuffle);

 

 

 

splice(없애고자 하는 시작 인덱스, 갯수)

배열에서 원하는 값을 뽑아내고 없애는 함수다.

 

 

 

 

 

6 - 3

딜레이 함수 setTimeout(함수, 딜레이타임) 

딜레이 타임은 ms 단위다.

 

 

 

자바 스크립트 요소 추가,제거

하기 url 참고

https://shinyks.com/2023/07/javascript/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-createelement-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/

 

 

 

 

 

6 - 4 let / var 차이

변수는 scope(범위) 라는 것을 가진다.

 

var 은 함수 범위를 가지고

let 은 Block 범위를 가진다. (for, if문 등등)

 

예를 들어

let은 if 안에서 선언되면 if 블록 밖에서 접근이 안된다. (자바 지역 변수 같은 개념)

var는 if 안에서 선언되면 함수가 아니기 때문에 접근이 된다.

 

함수 안에 있는 변수와 외부 변수와의 관계를 클로져 라고 한다.

 

이런 범위 차이 때문에

함수 범위를 가진 var 와 비동기 함수를 같이 쓰면 문제가 발생한다.

결론은 그냥 let 써라.

 

 

 

 

 

6 - 5 async / await

비동기로 인해 코딩 사이의 순서가 헷갈리게 왔다갔다 하는 걸 막기 위해 사용한다.

해당 문법을 사용하려면 Promise 함수여야 사용이 가능하다.

setTimeout 함수를 Promise 함수로 변경 하려면 아래와 같다.

 

const setTimeoutPromise = (ms) => new Promise((resolve, reject) => {
	setTimeout(resolve, ms);
});

 

 

 

그 후,

form 태그 submit을 하는 이벤트 리스너에 event 를 매개 변수로 받는 함수를

(event) 에서 async(event)로 변경해서 사용한다.

 

그 다음

원하는 곳에 awit setTimeoutPromise(1000);

이런 식으로 사용하면

해당 함수가 끝날 때까지 다른 비동기 함수로 넘어가지 않아서

코딩 순서가 꼬이지 않는다.

 

참고로

awit setTimeoutPromise(0);

=> 0초가 아니라 4ms 가 디폴트 값으로 있다.