isNaN(), parseInt(), 연속된 숫자생성3종세트Array().fill().map(), 뽑은 숫자들을 랜덤도splice(Math.floor(Math.random()*arr.length, n)

웹 게임을 만들며 배우는 JS : 지뢰찾기

isNaN(), parseInt(), 연속된 숫자생성3종세트Array().fill().map(), 뽑은 숫자들을 랜덤도splice(Math.floor(Math.random()*arr.length, n)

1.isNaN()

isNaN()는 value가 Not-A-Number인 경우 true를 return한다. return type은 boolean이다.

즉 숫자가 아닌 것을 찾는 함수다.

console.log(isNaN(2));
// expected output: false 숫자아님? 놉! 숫자임

console.log(isNaN('me'));
// expected output: true 숫자아님? 얍! 숫자아님

console.log(isNaN('2'));
// expected output: false 숫자아님? 놉! 숫자임

참고로
Number.isNaN(https://www.w3schools.com/jsref/jsref_isnan_number.asp) 와

isNaN()(https://www.w3schools.com/jsref/jsref_isnan.asp)은 완전히 다르다.

2. parseInt()

parseInt()는 문자열을 구분하고 정수로 변환한다.

function roughScale(x, base) {
  var parsed = parseInt(x, base);
  if (isNaN(parsed)) { return 0 }
  return parsed * 100;
}

console.log(roughScale(' 0xF', 16));
// expected output: 1500

console.log(roughScale('321', 2));
// expected output: 0

코딩공부하면서 수학공부를 다시 하게 된다ㅋㅋㅋㅋㅋ하… 대환장파티

정수가 뭐였더라?

3. 연속된 숫자생성 3종세트

지뢰 위치를 뽑기 위해 0부터 99까지의 숫자를 생성해야한다.

이때 암기해두면 좋은 함수 3가지가 있다.

Array().fill().map()꼭 암기할것

연속된 숫자생성에 필요한 3종세트라고 생각하면된다

Array(n)로 => n개의 빈 배열을 만들고

fill()로 => 빈 배열을 undefined로 채워고

map()으로 => n개의 빈 배열과 n개의 undefined를 1대1매칭 시켜준다

예를들어 for문 안쓰고 3~50까지 숫자만들고 싶을때 유용하다.

//step3. 지뢰 위치 뽑기
  var 후보군 = Array(hor*ver).fill().map(function(요소, 인덱스){
      return 인덱스 //0부터 99까지 인덱스를 리턴. 1~100까지하고싶으면 인덱스+1 하면 됨
  }); 
// 100개의 숫자를 만들고 칸에 fill채워주고 map으로 숫자와 칸을 1대1매칭시켜준다

4. 뽑은 숫자들을 랜덤하게 나타내기

후보군으로 뽑은 숫자들을 랜덤하게 나타나게 하고 싶을 때 아래와 같이 코딩한다

var 셔플 = [];
while (후보군.length > 80){ //지뢰는 20개만 필요하므로 100개중애 80개는 안쓴다
    var 이동값 = 후보군.splice(Math.floor(Math.random()*후보군.length), 1)[0];
    셔플.push(이동값); //랜덤하게 순서를 섞어서 셔플배열에 넣어준다
}