Web Front-end/JavaScript

[JS/Basic/문법/연산자,조건문] 자바스크립트 연산자, 조건문

  • JavaScript는 특이한 자료형과 연산자가 몇개 있기 때문에, 한번 정리해보려고 합니다.
  • 자바스크립트 재활훈련 3편입니다.
  • "===" 라던가, NaN,undefined,null 이라던가...

자바스크립트의 자료형

  • 자바스크립트는 변수를 let,const로 선언하여 사용한다. 자료형에 따라서 변수형이 다르지 않지만, 변수끼리 계산을 하거나, 어떠한 로직의 Parameter로 들어갈 때는 자료형을 신경써줘야한다.
  • 기본적으로 문자형, 숫자형,Boolean 3가지 type이 있다.
  • 특이한 자료형인 NaN,undefined, Null 3가지가 있다. 
  • 문자형(string) : " " , 숫자형 : 정수형, 실수형 , Boolean: true,false

자바스크립트의 연산자

  • 기본적인 수학의 사칙연산과 거듭제곱, 나머지연산은 다른 언어와 동일하다.
  • 증감연산자(++,--), 비트연산자(>>,<<..),논리연산자(AND && ,OR || ,NOT ! ) 모두 지원한다.
  • 비교연산자 중에서, 엄격한 비교 "==="이 존재한다.  JavaScript에서는 "==" , 비교연산자를 했을 때,자동으로 형변환되는 현상이 있는데, 일반적으로 자료형과 값이 똑같은게 "같다"라는 개념이므로 , "==="을 쓰는게 권장된다.
  • "In" 연산자가 있다. 객체안에 Key값을 검사할 때 쓰일 수 있음.
5 > 4 // true
"apple" > "bannna" // false. 문자열은 사전순입니다. a가 가장 작습니다.
"2" > "12" // 문자열은 첫번째 글자부터 비교합니다. "2" > "1" 입니다.
undefined ==null // true . undefined와 null은 모두 false로 형변환이 됩니다.
undefined === null // false 자료의 타입까지 체크합니다. null과 undefined는 같은 type이 아닙니다.

 

조건문 (IF)

  • IF(조건) { true 면 실행할 로직 }
  • JavaScript에서는 숫자 0 ,빈 문자열(" "),null,undefined,NaN,false 6가지가 모두 false를 의미합니다.
  • if - else if - else 의 로직을 따릅니다. (파이썬이랑 문법이 조금 다름) 
if (조건){


}else if(조건){

}else{
	

}
  • 삼항 연산자를 지원합니다. IsTrue ?  value1(참) : value2(거짓)
let IsMapin = true;
let message = IsMapin ? "hello,Im mapin" : "no Im not Mapin";
console.log(message);

* Tips) If 문은 적당히 겹쳐서 쓰자! (가독성)

  • 삼항 연산자를  겹쳐서 쓰거나, If문 안에 또 If else문을 지속적으로 쓰는 callback 지옥이 형성될 수 있는데, 웬만하면 If문안에 If문은 겹쳐서 적지 않는게 좋습니다.  if ( if (if - else{} )else{ if -else{} }) else{}  어질어질 합니다. 
  • If문이 겹쳐서 작성이 되었다면, if -return, continue,break 등으로 중첩을 제거해주면 좋습니다
  • 추천강의 : 제로초님의 if문 중첩 줄이기 https://www.youtube.com/watchv=NUOPdY14JKo&lc=Ugz7yFbRbhta7pePbgF4AaABAg 
if (조건 A){
	if (조건 B){
    	if(조건 C){
        }
    }else{
    	if(조건 D){
        	if(조건 E){
            }else{
            
            }
        }else{
        
        }
    }
}
//위의 조건문의 중첩을 제거 해보겠습니다.
// else 이하 문이 더 잛다면, if (!조건) 해서, if 이하의 로직에 넣어주고, return으로 else를 제거해준다.
// 다음 if를 하나 더 써준다.
if (!조건 A) return
if (조건 B && C){
	return	
}
if (!조건D) return
if (조건E) return

Nullish 병합 연산자 "??"

가끔 코드를 보다보면, ??를 쓰는 경우도 간혹 있습니다. 당황하지 말고, null,undefined가 아니면 앞에거 실행 , null,undefined면 뒤에거 실행이라고 생각하면 편합니다.

  • a ?? b의 평가 결과는 a가 null도 아니고 undefined도 아니면 a , 그 외의 경우는 b 입니다. 
  • 즉 , 다음과 같습니다. result = (a != null && a!= undefined) ? a : b
  • 값을 초기화하거나, default 값을 매길 때 , 유용할 수 있습니다.
  • 우선순위가 낮기 때문에, 잘 사용해야 합니다.
age = age ?? 20;
// age가 정의되어 있지 않다면, 20을 할당.
// age가 정의 되어있다면, age 할당.