- 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 할당.
'Web Front-end > JavaScript' 카테고리의 다른 글
[JS/Basic/TDD,BDD] 자바스크립트 테스팅 연습 (0) | 2022.07.27 |
---|---|
[JS/Basic/함수] 자바스크립트 함수 (0) | 2022.07.26 |
[JS/Basic/문법/반복문] 자바스크립트 반복문 (0) | 2022.07.26 |
[JS/Basic/문법/입출력] 자바스크립트 입출력 (0) | 2022.07.25 |
[JS/Basic/문법/변수] 자바스크립트 변수 (0) | 2022.07.25 |