[Day 2] 1.6 ~ 1.9강 수강
이정환 강사님의 '한 입 크기로 잘라먹는 리액트' 강의를 바탕으로 정리한 글입니다.
1.6) 형 변환
형 변환이란 형태를 변환한다라는 의미로, 어떤 값의 타입을 다른 타입으로 변경하는 것을 말하며 영어로는 Type Casting이라 한다.
형 변환의 종류
자바스크립트의 형변환은 묵시적 형 변환과 명시적 형 변환으로 나뉜다.
묵시적(암묵적) 형 변환
- 개발자가 직접 설정하지 않아도 자바스크립트 엔진이 눈치껏 형 변환하는 것을 말한다.
- 생각지도 못하게 형이 변환될 수 있다는 말이다.
let num= 20;
let str = '25'
const result = num + str; // '20' + '25'= '2025'불가능한 연산의 경우, 자바스크립트 엔진이 오류를 발생시키지 않기 위해 숫자를 문자열로 암묵적 형 변환을 시키게 된다.
다만, 모든 불가능한 연산에서 다 암묵적 형 변환이 발생하는 것은 아니며, 하나의 변수 값을 형 변환하면 오류가 발생하지 않는 경우 묵시적 형 변환이 발생한다.
명시적 형 변환
- 개발자가 직접 함수 등을 이용해 형 변환하는 것을 말한다.
- 명시적으로 어떤 타입으로 바꿔줘라고 시켜야만 바뀐다는 말이다.
let str1 = '10'
let strToNum1 = Number(str1); // '10' -> 10
let str2 = '10개'
let strToNum2 = Number(str2); // '10개' -> NaN (Not a number)
strToNum2 = parseInt(str2); // '10개' -> 10 - 숫자값이 아닌 문자열도 숫자로 잘 변환해준다.1.7/1.8) 연산자
연산자란, 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말한다.
대입 연산자
대입 연산자는 변수에 값을 저장할 때 사용하는 가장 기초적인 연산자이다.
let var1 = 1;산술 연산자
산술 연산자에는 +, -, *, /, %가 있으며, 산술 연산자 간에는 우선 순위가 존재한다.
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;복합 대입 연산자
복합 대입 연산자는 산술 연산자 + 대입 연산자로 이루어져 있으며, 산술 연산자에는 어떠한 연산자도 다 넣을 수 있다.
증감 연산자
값을 1씩 늘리거나 줄일 때 사용하는 연산자이다. 이 때, ++ 또는 --를 앞에 붙이느냐 뒤에 붙이느냐에 따라 실행 결과가 달라질 수 있다.
증감 연산자를 변수명 앞에 붙이는 걸 전위 연산, 증감 연산자를 변수명 뒤에 붙이는 걸 후위 연산이라 한다.
let num8 = 10;
num8++;논리 연산자
논리 연산자는 Boolean타입의 값을 다룰 때 사용하는 연산자이다. 딱 세 가지의 종류만 있다.
||: 두 개의 피연산자 중 하나만true이면 연산 결과가true가 된다.&&: 두 개의 피연산자 모두true이면 연산 결과가true가 된다.!: 피연산자의 값이true면false가,false면true가 된다.
let or = true || false;
let and = true && false;
let not = !true;비교 연산자
두 개의 값을 서로 비교하는 연산자이다.
let comp1 = 1 === 2;
let comp2 = 1 !== 2;
let comp3 = 2 > 1;
let comp4 = 2 < 1;
let comp5 = 2 >= 1;
let comp6 = 2 <= 1;null 병합 연산자
null 병합 연산자는 두 개의 피연산자 중 존재하는 값을 추려내는 기능을 하는 연산자이다. 즉, null이나 undefined가 아닌 값을 찾아내는 연산자이다. 이 때, 피연산자 모두 null, undefined가 아니라고 하면 첫 번째 피연산자의 값을 반환하게 된다.
let var1; //undefined
let var2 = 10;
let var3 = 20;
let var4 = var1 ?? var2; // 널 병합 연산자 ??가 10을 찾아 var4에 저장하게 된다.typeof 연산자
typeof 연산자는 값의 타입을 문자열로 변환하는 기능을 하는 연산자이다.
let vary =1;
var7 = "hello"
let typeOfVar7 = typeof var7;삼항 연산자
삼항 연산자는 이름 그대로 항을 3개 사용하는 연산자로 조건식을 이용해서 참/거짓일 때의 값을 다르게 반환하는 역할을 한다.
// 조건식 ? 연산자1 : 연산자2
let var8= 10
let res = var8 % 2 ? '짝수' : '홀수';1.9) 자바스크립트의 조건문
조건문이란, 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법이다. 대표적으로 if, switch 조건문이 존재한다.
if - else if - else 조건문
if는 맨 처음에, else는 반드시 맨 마지막에 나와야 한다.
if(조건식1) {
실행문
} else if(조건식2) {
실행문
} else {
실행문
}switch 조건문
if문과 기능 자체는 동일하지만, 다수의 조건을 처리할 때 if보다 더 직관적이다. 이 때 일치하는 case문을 만나고 나서 그 아래의 모든 코드를 switch문을 탈출할 때까지(switch문이 끝나거나, 중간에 break가 나올 때까지) 전부 실행하게 된다.
let animal = 'owl'
switch(animal) {
case 'cat':
console.log('고양이'); break;
case 'dog':
console.log('강아지'); break;
case 'snake':
console.log('뱀'); break;
default:
console.log('그런 동물은 전 모릅니다.');
}