멋사 4-3 TIL (JavaScript)

Seunggyu Jung·2023년 4월 3일
0
post-thumbnail

1. 변수의 차이

1-1. 변수와 상수의 차이:

  • 변수에는 var과 let이 있으며, 상수에는 const가 존재한다.
  • 변수의 경우, 선언한 값을 다시 선언하여 바꿀 수 있지만, 상수는 변하지 않기에 새로운 값을 입력하고 싶으면 초기화 작업을 거쳐야 한다.

1-2. var과 let의 차이:

  • let은 const와 같이 블록-레벨 선언이기에 중괄호 {} 안에서(지역변수로) 선언되면, 범위 밖에서 호출할 수가 없다.
  • 반면 var는 전역변수이기에 어디서든 호출이 가능하다.

1-3. 모던 자바스크립트에서 추천되는 변수

  • const : 값을 변경할 수 없는 상수이기에 변수의 중복선언을 방지함으로써 코드의 가독성을 높일 수 있기 때문이다.
  • 만약, 변하는 변수가 필요한 경우에는 var이 아닌 let을 사용하는 것이 바람직하다. 이는 전역변수로 선언가능한 var의 특성상, 원치 않은 곳에서 호출되어 코드의 성능을 저하를 야기할 수 있기 때문이다.

2. Number

2-1. parseInt()

  • 텍스트가 숫자로 시작하지 않으면 NaN을 출력하고, 텍스트가 숫자로 시작하는 경우 숫자끼리만 변환 가능하다.
console.log(parseInt(" ")); // NaN  
console.log(parseInt("")); // NaN    
console.log(parseInt("10abc2")); // 10  
  • 참고로, Number()는 parseInt()과는 다른 결과를 도출하는데, 이는 Number()가 boolean값을 출력하기 때문이다. 그러나 문자열에 대해서는 NaN을 출력한다.
console.log(Number(true)) // 1
console.log(Number(false))  // 0
console.log(Number("10abc2")) // NaN
console.log(Number(""))  // 0
console.log(Number(" ")) // 0

2-2. Math

  • Math.min() 또는 Math.max()의 경우 문자열과 숫자열만 사용이 가능하기에, 배열이 들어가면 작동을 하지 않는다. 이를 위해 배열앞에 전개구문(...)을 반드시 붙여 문자열로 나눠줘야 작동한다.
  • 배열로 선언된 두개 이상의 변수를 비교할 경우, 두 변수에 전개구문을 붙여 활용할 수 있다.
Math.min([1, 3, 4, 5, 11])  // 작동 x
Math.min(...[1, 3, 4, 5, 11])  // '...' 전개 구문을 사용하여 활용

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

2-3. Bigint

  • JavaScript에서 큰 수를 입력받을 때 사용하는 속성으로, 뒤에 항상 n이 붙는다는 규칙이 있다.
9007199254740991 + 2
// 9007199254740992 // 오류

9007199254740991n + 2n
// 9007199254740993n // O

BigInt(9007199254740991) + BigInt(2)
// 9007199254740993n  // O

2-4. toString

10.toString() // 10.까지 소숫점으로 인식 // errer
(10).toString()  // "10"

2-5. 단항 연산자

  • 문자열에 연산자(+,-)를 붙이면 숫자열이 된다.
console.log(typeof (+'2'))  // Number

3. 단락회로평가

3-1. 정의

논리연산자(|| , &&)를 사용하여 좌측식의 결과에 따라 우측식의 실행 여부가 달라지는 동작을 단락 회로 평가라 한다.

let username = "";
username = username || "무명"  // 좌측식의 결과가 false이기에 우측식을 실행함
console.log(username);  // "무명"

let username2 = "정승규";
username2 = username2 || "무명"  // 좌측식의 결과가 true이기에 우측식을 실행 안함
console.log(username2); // "정승규"

3-2. nullish 연산자와의 차이점

nullish 연산자 : 식에 null값이 아닌 값을 출력하는 연산자로 단락회로평가와 유사하다.

let a = null;
let b = 10;
let c = null;
console.log(a ?? b ?? c) // 10
  • 단락회로평가는 논리 연산자의 결과를 따르지만, nullish 연산자는 오로지 null 값이나 undefined 값만을 무시하고 실행된다.
let height = 0;
console.log(height || 100)  // 100
console.log(height ?? 100)  // 0

let height2;
console.log(height2 || 100)  // 100
console.log(height2 ?? 100) // 100

let height3 = "";
console.log(height3 || 'hello')   // hello
console.log(height3 ?? 'world')  // 공백

4. NaN

  • 일단 암기
console.log(isNaN(undefined)); // true  // 이것 때문에 Number.isNaN()이 생김
console.log(isNaN(null)); // false
console.log(isNaN(NaN)); // true
console.log(Number.isNaN(undefined)); // false
console.log(Number.isNaN(null)); // false
console.log(Number.isNaN(NaN)); // true

5. undefined와 null의 차이

  • undefined는 정말 아무값도 없는 것을 의미한다.
  • null은 값은 있는데, 유의미하지 않은 것을 의미한다.
  • 그래서 undefined가 요소로 들어간 연산의 결과는 NaN으로 끝나지만, null은 그 값을 없는 값(0) 취급을 하고 넘어간다.
  • null을 요소로 사용한 배열의 예시
let score = [10, 20, 30, null, 40, 50]
let average = 0
for (const i of score) {
    console.log(i)
    average += i
}
average // 150
  • undefined를 요소로 사용한 배열의 예시
let score = [10, 20, 30, undefined, 40, 50]
let average = 0
for (const i of score) {
    console.log(i)
    average += i
}
average // NaN

6. 삼항 연산자

  • 언어적 이슈로 문제가 생기기 때문에, 되도록 2개 이상 중첩시키지 말 것
profile
감동을 주고픈 개발자(준비생)

0개의 댓글