프론트엔드 스쿨 5기 TIL - 4월 3일

크롱·2023년 4월 4일

JavaSrcipt

목록 보기

9/53

script는 변수를 공유하기때문에 let과 const를 사용해야합니다.

🌈 number

🌃 parseInt 와 문자열로 반환하는 toFixed

소숫점을 지워보자

<script>
	let num = 10.123123;

	console.log(parseInt(num)); // 10
	console.log(~~num); // 10

	console.log(num.toFixed(3)); // "10.123" 문자열로 반환한다.
</script>

외웁시다

<script>
	console.log(parseInt(" ")) // NaN
	console.log(parseInt("")) // NaN
	console.log(parseInt("hi")) // NaN
	console.log(parseInt("10 20")) // 10
	console.log(parseInt("10abc"))  // 10 ***중요
    
    console.log(parseInt("10")) // 10
	console.log(parseFloat("10.123")) // 10.123
    
</script>

🌃 Math

<script>
  Math.abs(-10) // 절댓값 // 10
  Math.ceil(10.3) // 끌어 올려~~~ // 11
  Math.floor(10.3) //내려 // 10
  Math.round(10.5) // 반올림 // 11
  Math.round(10.4) // 반올림 // 10
  Math.sqrt(100) //square root, 루트 // 10

  Math.PI // 3.14
  Math.min(1, 3, 5, 6, 7, 23, 9) // 1
  Math.max(1, 3, 5, 6, 7, 23, 9) //23

  // Math.min([1,2,3,4,5]) // 작동안됩니다.전개구문을 써야해요
  Math.min(...[1,2,3,4,5]) // 1

  let values = [1,2,3,4,5]
  let values2= [6,7,8,11,10]
  Math.max(...values) //5
  Math.max(...values, ...values2) //11

  // Math.random
  Math.random() // 0이상 1미만 ex.0.48573458

  // 1부터 10까지 아무 랜덤 숫자
  parseInt(Math.random() * 10 + 1) // +1 해줘야 10을 포함 
  parseInt(Math.random() * 10) // 0부터 9를 포함
</script>

🌃 부동 소수점

컴퓨터에서 10진수 연산은 정확하지 않아요
0.1이 컴퓨터에선 무한수이다. 🤯0.1씩 더하는건 매우 위험한 행위이다🤯
반복문 안에 0.1씩 증가하는 코드를 작성하면, 예측 불가한 값이 생성된다
외워주세용✅
0.1 + 0.2 => 0.30000000000000004
0.1 * 3 => 0.30000000000000004
0.3 + 0.6 => 0.89999999999

🌃 BigInt

JS에서 큰 숫자를 사용할 때에는 BigInt를 사용해요

제대로 된 숫자 계산을 하려면 n을 붙이세요!
ex. 9007199254740992n + 1n
참고

<script>

        // 참고삼아 기억해주세요.
         BigInt(5) + 5n   // 10n
         BigInt(5) + 5    // error
         BigInt(5) / 2n   // 2n (소수 표현 안됨)
         BigInt("10") + BigInt("10") // 큰 값을 정수로 입력받을 때에는 string으로 처리해서 받아야 함
</script>

🌃 단락 회로평가

단락회로평가란? 논리 연산자 (&& , ||) 를 사용하여 연산을 진행 할 때 좌측 식의 값에 따라 우측 식의 실행 여부를 판단하는 동작

true : 1
false : 0
and (&&) : 곱
or (||) : 합
not (!) : 부정

<script>
// 단락회로평가(***)

        console.log(!"false") // false
        console.log(!"0") // false

        console.log(!false) // true
        console.log(!0) // true

        console.log('abc' / 2) // NaN

        console.log(!!NaN)          // false
        console.log(!!undefined)   // false
        console.log(!!null)        // false

        let username = "";
        username = username || "무명" //username이 false이므로 뒤에껄 봐야한다
        console.log(username) // "무명"

        let username2 = "크롱";
        username2 = username2 || "무명"  
        console.log(username2) // 크롱
</script>

🌃 삼항 연산자

조건식 ? 참일 경우 실행되는 표현식 : 거짓일 경우 실행되는 표현식

<script>
  //9000원 이상이면 비싸다
  //9000원 미만이고 7000원 이상이면 적절하다
  //7000원 미만이면 저렴하다
  const price = 7500
  const message = (price >= 9000) ? '비싸다' : ((price >= 7000) ? '적절해요' : '저렴해요')
  console.log(message) // 적절해요
</script>

🌃 nullish 연산자

nullish 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

이는 왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 falsy 값( '' 또는 0)에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR (||)와는 대조된다.

<script>
  let firstName = null;
  let lastName = null;
  let nickName = 'licat';

  console.log(firstName ?? nickName) // licat
  console.log(firstName ?? lastName ?? nickName) // licat
  console.log(firstName ?? lastName ?? nickName ?? '익명 사용자') 
  // 만약 nickName도 null이면 마지막 '익명 사용자'가 떠요
</script>

단락 회로평가와 nullish 연산자 차이

<script>
// 단락회로평가와 nullish 연산자 차이점
let height = 0;
console.log(height || 100) // 100// 하이트가 없네용. 100 고 
console.log(height ?? 100) // 0// 하이트가 null이야? 아니 0인데 -> 아그럼 0
</script>

🌃 NaN

<script>
// 암기
  console.log(NaN == NaN); // false
  console.log(NaN === NaN); // false
  console.log("---");

  console.log(isNaN(undefined)); // true
  console.log(isNaN(null)); // false
  console.log(isNaN(NaN)); // true
  console.log("---");

  // ES6에서 추가 도입(암기) *
  console.log(Number.isNaN(undefined)); // false
  console.log(Number.isNaN(null)); // false
  console.log(Number.isNaN(NaN)); // true
  </script>

왜 isNaN(null) 는 false로 리턴하나요?

typeof null은 object
넘어오는 argument를 Number로 변환을 시도
Number(null) // 0
isNaN(0) // false

isNaN 과 Number.isNaN

<script>
isNaN('hello world'); // true

Number.isNaN('hello world'); // false
//문자열은 숫자가 아닌 건 맞지만, 그 자체로 NaN이 아니기 때문이다.
</script>

isNaN()

인자로 들어온 값이 NaN이거나, 값을 숫자로 변환했을 때 NaN이면 참(true)을 리턴한다.
isNaN()은 인자를 숫자로 변환하는 과정을 거쳐 판별한다.

Number.isNaN()

인자로 들어온 값이 NaN이어야만 참(true)을 리턴한다.

🌃 Boolean

<script>
///////// 별표 4개 -짱짱중요짱짱
  console.log(Boolean('hello')); // true
  console.log(Boolean('')); //false
  console.log(Boolean([1, 2, 3])); //t
  console.log(Boolean([])); // t...말도안됨.
  console.log(Boolean({'one': 10, 'two': 20})); //t
  console.log(Boolean({})); // true
  console.log(Boolean(0)); // f
  console.log(Boolean(-1)); //t

  //false
  console.log(Boolean(undefined)); //false
  console.log(Boolean(null)) //f
  console.log(Boolean(NaN)) // f
</script>

🌃 undefined

<script>
  let a; 
  console.log(a); // undefined

  if (typeof a === "undefined") {
      console.log('a에 아무것도 할당되지 않았습니다!')
  }

	
  //!a    :: true     undefined가 false이므로 !undefined는 true

  if (!a) {
      console.log('a에 아무것도 할당되지 않았습니다!')
  }
</script>

크롱

👩‍💻안녕하세요🌞

이전 포스트