이 글은 udemy의 '한입 크기로 잘라 먹는 리액트(React.js)'를 수강하고 적는 글입니다.
📌 섹션 2: Javascript 기본
2-2. 변수와 상수
- let : 변수 중복 선언을 금지, 값 변경 가능
let age = 25; //변수를 선언하다.
console.log(age); //25
age = 30; //값 변경 가능- var : var은 변수 중복 선언 가능 -> 코드 에서 오류날 가능성 높아짐
var age = 30;
console.log(age);
var age = "30"; //중복 선언- const : 선언 이후에 값 변경 불가능.
const age = 25;
console.log(age);변수명 만들기 규칙
1. 기호를 사용할 수 없음 (_, $ 제외)
2. 문자로 시작해야 한다.
3. 예약어는 사용할 수 없음 (ex. if)
2-3. 자료형과 형 변환
Primitive Data Type (원시 타입)
let number = 12;한번에 하나의 값 만 가질 수 있음.
하나의 고정된 저장 공간 이용
Non-Primitive Type(비 원시 타입)
let array = [1,2,3,4];한번에 여러 개의 값을 가질 수 있음.
여러 개의 고정되지 않은 동적 공간 사용
- Number
let age = 25; // 정수
let tall = 175.9; // 상수
let inf = Infinity;
let minusInf = -Infinity;
let nan = NaN; // 수학적 연산의 실패값
console.log(age * tall);- String
let name = "winterlood";
let name2 = "이정환";
let name3 = `winterlood ${name2}`; // ${} : 템플릿 리터럴
console.log(name3);- Boolean
let isSwitchOff = false;- Undefined
let a;
console.log(a); //undefined- Null
let b = null; //아무것도 가지지 않은 값형변환(캐스팅)
- 형변환(캐스팅) : 값은 유지하면서 자료형만 바꾸는 것
let numberA = 12;
let numberB = "2";
console.log(numberA * numberB); //24 묵시적 형변환 : 알아서 자동으로 변환됨
console.log(numberA + numberB); //122 (문자)
console.log(numberA + parseInt(numberB)); //14 명시적 형변환 : 프로그래머가 의도적으로 형변환2-4. 연산자
- 대입 연산자
let a = 1; let b = 2;
* 산술 연산자
```js
console.log(a + b);
console.log(a * b);
console.log(a - b);
console.log(a / b);
console.log(a % b);- 연결 연산자
let a = "1";
let b = "2";
console.log(a + b); //연결 연산- 복합 연산자
let a = 5;
a += 10;
a -= 10;
a *= 10;
a /= 10;- 증감 연산자
let a = 10;
a++;
a--;
++a;
--a;- 논리 연산자
console.log(!false); //true
console.log(true && true); //true
console.log(true && false); //false
console.log(true || false); //true
console.log(false || false); //false- 비교 연산자
let compareA = 1 == "1"; //값만 비교 : 값이 똑같으므로 true
let compareB = 1 === "1"; //타입도 같고 값도 같아야 하므로 false
let compareC = 1 != "1"; // 값만 비교 : 값이 같으므로 false
let compareD = 1 !== "1"; //타입도 다르고 값도 다르므로 true- typeof 연산자
console.log(typeof compareA); //변수의 자료형 알아내기- null 변환 연산자
let a;
a = a ?? 10; // 양 값 중 null이나 undefined가 아닌 값을 선택
console.log(a); //102-5. 조건문
- if
let a = 3;
if(a >= 7){
console.log("7 이상입니다.");
}else if(a>=5){
console.log("5 이상입니다.");
}else {
console.log("5 미만입니다.");
}- switch
let country = "ko";
switch(country){
case 'ko':
console.log("한국");
break;
case 'cn':
console.log("중국");
break;
default:
console.log("미 분류");
}2-6. 함수
function getArea(width, height) {
let area = width * height;
return area;
} //함수 선언식, 함수 선언 방식의 함수 생성
함수 외부 전역변수
let area1 = getArea(100, 200); //함수 호출
console.log("area1 : ", area1);- 지역 변수 : 함수 내부에서 선언되어 함수 내에서만 사용 가능
- 전역 변수 : 함수 외부에서 선언되어 어디서든 사용 가능
- 매개 변수 : width, height과 같이 함수 내부 실행할 때마다 받아오는 변수
2-7. 함수 표현식 & 화살표 함수
/*함수 표현식 1*/
let hello = function () {
return "안녕하세요 여러분";
}; //변수에 넣어 사용하므로 함수 이름 따로 적지 않음x
/*함수 표현식 2(화살표 함수)*/
let hello = () => "안녕하세요 여러분";
let hello = () => {
return "안녕하세요 여러분";
}
const helloText = hello();
console.log(helloText);
/*함수 선언식*/
function helloB() {
return "안녕하세요 여러분";
}함수 선언식과 함수 표현식의 차이점
함수 선언식은 포이스팅이 이루어져(함수가 가장 먼저 선언된 상태로 시작) 함수 선언식보다 함수호출이 먼저 이루어져도 동작 그러나 함수 표현식은 포이스팅이 이루어지지 않으므로 함수 표현식보다 함수호출이 먼저 이루어지면 오류
2-8. 콜백 함수
- 콜백 함수 : 어떤 함수의 매개변수로 함수를 넘겨줌
function checkMoood(mood, goodCallback, badCallback) {
if (mood === "good"){
goodCallback();
} else {
badCallback();
}
}
function cry() {
console.log("ACTION :: CRY");
}
function sing() {
console.log("ACTION :: SING");
}
function dance() {
console.log("ACTION :: DANCE");
}
checkMoood("sad", sing, cry);