프론트엔드/한 입 크기로 잘라먹는 리액트

JavaScript - 변수와 상수, 자료형

icems0428 2025. 1. 8. 17:19

 공부를 하다보면 그 당시엔 이해가 잘 되어도, 며칠만 지나면 뭘 배웠는지 지우개로 지운듯 기억이 안 날 때가 많다. 나의 언어로 공부를 기록하면, 이후에 공부할 때도 참고가 되지 않을까 하여 개발 블로그를 시작한다.

 

 해당 카테고리의 게시물들은 인프런의 '한 입 크기로 잘라먹는 리액트' 강의를 들으며 정리한 자료들이다. 이번 겨울 방학의 목표는 한 입 챌린지의 완주이다. (약 4주동안 완강, 미션 수행) 이렇게라도 써놓는 이유는, 그래야 내가 지킬 것 같아서..ㅎㅎ


변수와 상수

// 1. 변수
let age = 27;

age = 30;

// 2. 상수
const birth = "2003.04.28";

// 3. 변수 명명규청(네이밍 규칙)
// 3-1. $, _ 제외한 기호는 사용할 수 없다.
let $_name;

// 3-2. 숫자로 시작할 수 없다.
let name1;
let $2name;

// 3-3. 예약어를 사용할 수 없다.

// 4. 변수 명명 가이드
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount = refundCount;
// 이해하기 쉽게 작성할 것!

 

 변수는 값을 집어넣는 박스라고 보면 된다. 초기화는 해도 좋고 안해도 된다. 초기화 안할 시 undefined.

 상수는 변하지 않는 값을 정의할 때 사용한다. 선언 시 값으로 고정되기에, 초기화가 필수이다.

 다른 프로그래밍 언어들은 주로 변수 선언 시 자료형(int, string)도 정해주어야 하는데, 자바스크립트는 정수든 문자열이든 let으로 선언해주면 되어서 편한 듯.

 


 

자료형(타입)

// 1. Number Type
let num1 = 27;
let num2 = 1.5;
let num3 = -28;

let inf = Infinity;
let mInf = -Infinity;

let nan = NaN;

// 2. String Type
let myName = "박진주";
let myLocation = "자양동";
let introduce = myName + myLocation;

let introduceText = `${myName}은 ${myLocation}에 거주합니다`;
// 템플릿 리터럴 문법 : 변수의 값을 문자열에 동적으로 포함시킬 수 있다.

// 3. Boolean Type
let isSwitchOn = true;
let isEmpty = false;

// 4. Null Type (아무것도 없다)
let empty = null;

// 5. Undefined Type;
let none;

 

 위에서 말했듯이 상수가 아닌 한 let을 이용해 선언, 자료형은 초기화 시 넣어주는 값에 따라 동적으로 결정된다. 지피티한테 물어봤더니, 이걸 **타입 추론**이라고 한다고 한다.

 또한 ` (백틱)을 이용한 문자열 정의도 가능하다. 변수의 값을 ${변수명}을 통해서 문자열에 동적으로 포함시킬 때 사용된다. 이것은 '템플릿 리터럴 문법'이라고 한다. 실제로 자주 사용되는 문법이라고 하니, 기억해두어야 겠다.

 

 null과 undefined의 차이는? 둘 다 아무것도 들어있지 않다는 비슷한 의미를 가진다. 하지만 null은 개발자가 의도적으로 값이 없음을 나타날 때 사용하고, undefined는 아직 미처 초기화하지 못했거나 다른 값을 넣어주기 위해 선언만 해놓을 때 사용한다.