👉 인프런의 한입크기로 잘라먹는 React.js 강의를 수강하는 이유가 궁금하다면 ?
2024.04.16 - [front end +/강의노트] - [React.js] 한입크기로 잘라먹는 리액트 Day.00 _ 인프런
👉 이전 일차의 강의노트 확인은?
2024.04.16 - [front end +/강의노트] - [React.js] 한입크기로 잘라먹는 리액트 Day.01 _ 인프런
⚡수강범위
⚡내용정리
오늘 강의는 어제까지 배웠던 자료형을 변환하는 것과, 연산자들, 조건문과 반복문을 배웠다.
[형 변환]
형 변환이란?
어떤 값의 타입을 다른 타입으로 변환하는 것
묵시적 형 변환과 명시적 형 변환이 있다
1. 묵시적 형 변환
개발자가 설정 하지 않아도 자바스크립트 엔진이 '알아서' 형 변환 하는 것!
암묵적 형 변환 이라고도 한다.
let num = 10;
let str = "20";
const result = num + str;
-> 변수 num에 저장된 초기값인 숫자 10이
-> 변수 result 안에서 덧셈 연산을 하는 과정 암묵적으로 String 타입으로 변환됨
2. 명시적 형 변환
프로그래머가 내장 함수 등을 사용하여 직접 형 변환을 명시 하는 것!
let srt1 = "10";
let strToNum = Number(srt1);
-> 내장함수 Number(); 를 사용하여 형 변환 명시
let str2 = "10개";
let strToNum2 = Number(str2);
console.log(strToNum2); // NaN
숫자+a 로 이루어져 있다면?
Number()로 형 변환을 명시 했을 때, 콘솔창에 입력 해보면 NaN으로 출력
let str2 = "10개";
let strToNum3 = parseInt(str2);
console.log(strToNum3); // 10
-> 내장 함수 parseInt() 를 사용 하자!
[연산자]
프로그래밍에서 다양한 연산을 위해 기호를 사용
종류 : + * - /
1. 대입 연산자
값을 저장 할 변수의 이름과 값을 "=" 기호를 이용하여 사용
let var1 = 1;
2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;
산수처럼 * / % 연산자의 우선순위가 + - 보다 높다!
우선순위 낮은 연산을 먼저 수행하는건 ()를 사용!
3. 복합 대입 연산자
산술연산자와 대입 연산자가 복합 되어 있는 것!
let num7 = 10;
// 복합 연산자
num7 += 20;
컴퓨터는 중복을 싫어 한다!
num7 = num7 + 20; 처럼 사용하지 않는다
4. 증감 연산자
1씩 늘리거나, 줄일 때 사용
let num8 = 1;
num8++; // 후위 연산
console.log(++num8); // 전위 연산
5. 논리 연산자
let or = true || false; // 값이 하나만 참이어도 참
let and = true && false; // 값이 모두 참이어야 참
let not = !true; // 반대의 값을 출력
console.log(or, and, not); // true false false
6. 비교 연산자
let comp1 = 1 === 2; // 동등비교
let comp2 = 1 !== 2; // 비동등 비교
console.log(comp1, comp2) // false true
==을 쓰는 경우와 ===을 쓰는 경우
==은 ===과 달리 자료형까지 비교 할 수 없다!
let comp3 = 1 == "1"
let comp4 = 1 === "1"
console.log(comp3, comp4) // true false
대소 비교 연산자
let comp5 = 2 > 1;
let comp6 = 2 < 1;
console.log(comp5, comp6) // true false
let comp7 = 2 >= 4;
let comp8 = 2 <= 2;
console.log(comp7, comp8) //false true
7. null 병합 연산자
존재하는 값을 추려내는 기능
null 이나 undefined가 아닌 값을 찾아내는 것!
let var1;
let var2 = 10;
let var3 = 20;
console.log(var1); // undefined
let var4 = var1 ?? var2;
console.log(var4); // 10
let var5 = var1 ?? var3;
console.log(var5) //20
-> 연산에 참여 하는 값들 중 null값이나 undefined가 아닌 값을 찾아낸다!
let var6 = var2 ?? var3;
console.log(var6) // 10
-> 단! null이나 undefined 값이 포함 되어 있지 않은 경우에는 앞에 먼저 입력된 변수의 값이 출력된다.
8. typeof 연산자
자바스크립트에서 변수는 값을 저장 할 때 마다 자료형이 동적으로 결정
let var7 = 1;
var7 = "hello";
let t1 = typeof var7;
console.log(t1) // string
-> var7 변수의 초기 값을 1이라는 number type으로 설정 했다고 해도, "hello"라는 string type으로 변환 할 수 있다.
9. 삼항 연산자
항을 3개 사용 하는 연산자
조건식을 이용하여 참, 거짓일 때의 값을 다르게 변환한다
let var10 = 10;
// let 변수 = 조건 ? '참일때의 값' : '거짓일때의 값'
let res = var10 % 2 === 0 ? '짝' : "홀";
console.log(res) //짝
-> 변수 res에 var10의 값이 짝수일 땐 '짝' , 홀수일 땐 '홀'을 반환
[조건문]
특정 조건을 만족 했을 때에만 실행되는 코드를 작성하기 위한 문법
1. if 조건문
let num = 11;
if (num >= 10) {
console.log("num은 10이상 입니다")
console.log("조건이 참 입니당")
}else if (num >=5) {
console.log('num은 5이상 입니다')
} else {
console.log('조건이 거짓입니당')
}
if ( 조건식 ) { 조건식이 만족 했을 때 수행 할 코드 } else { 조건식이 거짓일 때 수행 할 코드 }
if로 시작해서 else로 마무리
2. switch 조건문
let animal = 'cat';
switch (animal) {
case 'cat': {
console.log('고양이')
break;
}
case 'dog':{
console.log('강아지')
break;
}
case 'rabbit':{
console.log('토끼')
break;
}
case 'tiger':{
console.log('호랑이')
break;
}
default : {
console.log('그런 동물은 전 모릅니다')
}
}
break와 default!
- break : 만족하는 case를 수행 한 후 하위에 있는 case가 수행 되지 않도록 한다!
- default : 어떠한 case도 참이 되지 않아 수행 하지 않을 때, default를 수행 한다!
[반복문]
어떠한 동작을 반복해서 수행 할 수 있도록 만들어주는 문법
1. for 반복문
// for(초기식; 조건식; 증감식) { 수행할 코드 }
for (let idx=0; idx < 5; idx++) {
console.log('반복')
}
-> 0부터 5이하의 값을 반복, 1씩 증가
for (let idx=0; idx < 10; idx++) {
console.log('반복')
if (idx >= 5) {
break; // 6번쨰에서 종료
}
}
-> break를 사용하여 중간에 중단
for (let idx=0; idx <= 10; idx++) {
if (idx % 2 === 0) {
continue;
// 조건이 참이 되면 반복문 내의 이 회차는 실행 되지 않고 넘어간다
}
console.log(idx) // 1,3,5만 출력
if (idx >= 5) {
break; // 6번쨰에서 종료
}
}
-> continue를 사용하여 반복시 특정 회차를 건너 뛰는 방법
⚡새로 알게 된 내용
이번 강의를 들으면서는 기존에 배웠던 내용들을 다시 한번 복기 하는 느낌이었다. 새로 알게 된 내용 보단, 다시 한번 내용을 숙지하는 시간이었다!