[🥸JavaScript]📝자바스크립트 변수 선언, 타입, 연산자➰(let, const)

📍 개요

◾ 자바스크립트의 기초적인 변수 선언과 타입을 알아보고 연산자 등의 활용 방법에 대해 학습하였습니다.

---

📌 자바스크립트란?

먼저 자바스크립트는 공부하기 이전에 화면의 움직임 등을 나타내주는 언어라고 알고 있었는데요!
물론, 자바스크립트의 기능에는 제가 알고 있었던 부분도 포함되지만 조금 더 자세히 살펴보도록 하겠습니다☺️

1️⃣ HTML
▪️ 웹페이지의 전체적인 구조 설계

ex) 헤더와 본문, 폼, 버튼, 링크 등

 
2️⃣ CSS
▪️ 웹 페이지 디자인 및 스타일

ex) 배경색, 텍스트 색상, 글꼴

 
3️⃣ JavaScript
▪️ 웹 페이지의 동작과 상호작용

ex) 버튼 클릭 시 알림창 표시,
폼 제출 시 비어있는 필드 발생시 경고 메시지,
버튼 클릭시 외부 API를 가져와 표시

---

🖥️ 콘솔창 관련 함수(log, error, warn ··· )

콘솔창 확인하는 방법은 윈도우 크롬 브라우저 기준으로 `Ctrl` + `Shift` + `i` 누르면 표시됩니다!

console.log(); // 콘솔창에 로그 메시지를 보여줍니다.
console.error(); // 콘솔창에 에러 메시지를 보여줍니다.
console.warn(); // 콘솔창에 경고 메시지를 보여줍니다.
console.info(); // 콘솔창에 정보 메시지를 보여줍니다.
console.table(); // 콘솔창에 데이터를 테이블 형태로 제공합니다.

---

📁 Camel 표기법과 변수명 구분하는 법( $, _ )

변수명은 주로 카멜 표기법으로 쓰는데요.
카멜표기법은 낙타의 등 모양처럼
들쑥날쑥해보여 붙여진 이름이라고 합니다!

👉🏻 첫글자는 소문자로 시작하여
다음 단어의 첫글자는 대문자로 쓰는 방식입니다.

✔️ `user_Id`, `getUserId`

어떤가요? 카멜 표기법을 사용하니
한 눈에 들어와 가독성도 더 뛰어나보이는 것 같습니다.

⭐️ 중요사항
개발자라면 협업 시 암묵적으로 지켜지는 관례라고 하니
필수적으로 알아두어야겠다는 생각이 듭니다.

▪️변수명 구분하는 법

let _apple = 30; // 숨기고 싶은 변수일 때 주로 사용합니다.
let $apple = 40; // 문서 내에 어떤 요소를 선택할 때 주로 사용합니다.
let _ = 50; // 사용하지 않는 변수일 때 주로 사용합니다.

---

📁 변수 종류(var, let, const)

1️⃣ `var`
현재 사용되지 않는 변수

2️⃣ `let`❗값 변경 가능
변수 생성에 쓰이고 어떤 데이터 타입이든 가질 수 있습니다. 자바스크립트는 동적 타이핑 언어이기 때문에, 변수의 타입을 선언할 필요 없이 나중에 원하는 타입으로 변경할 수 있습니다.

3️⃣ `const` ❗값 변경 불가능
상수를 선언할 때 쓰입니다. 불변성을 강조하며, 상수값을 선언할 때 명확하고 안전하게 사용할 수 있습니다. 코드의 의도를 더 분명히 하며, 변경되지 않아야 하는 값에 대해 예기치 않은 변경을 방지할 수 있습니다.

---

💡 let과 const 중에 어느 것을 사용해야될까?

보통 `const`를 사용하는 것이 더 좋은 경우가 많습니다.
그 이유로는 무엇이 있는지 알아보겠습니다.

◾ 값 변경 방지

const를 사용하면 변수의 값이 한 번 할당되면 변경될 수 없기 때문에 의도하지 않은 값의 변경을 방지할 수 있습니다. 따라서 에러가 발생되는 상황을 줄일 수 있습니다.

 
◾ 가독성

const를 사용하면 협업할 때에도 다른 개발자가 코드를 분석할 때 “해당 변수의 값은 불변이구나.”를 보다 빠르게 인지할 수 있습니다.

해당 변수는 코드 도입부에 어떠한 값으로 초기화 해주기 때문에 코드의 가독성과 유지보수와도 연관이 있습니다.

❗️값이 중간에 변경되어야 하는 경우라면 let을 사용하면 됩니다.

 
가끔가다가 JavaScript 코드를 볼 때 코드 최상단에 const로만
변수가 선언된 것을 많이 본 적이 있는데 이러한 이유로 쓰는 것이었군요.

👉🏻 먼저 `const`로 선언 후 `let`으로 변경해보는 것도 괜찮습니다.
가능한 한 불변성을 유지하고, 문제가 발생하거나 필요에 따라 let으로 변경하는 방식으로 사용합니다.

---

📁 연산자 종류

◾ 산술 연산자( +, -, *, /, %, ** )

연산자 종류	연산자	설명	예제
산술 연산자	+	두 값을 더합니다.	5 + 3 → 8
	-	첫 번째 값에서 두 번째 값을 뺍니다.	5 - 3 → 2
	*	두 값을 곱합니다.	5 * 3 → 15
	/	첫 번째 값을 두 번째 값으로 나눕니다.	15 / 3 → 5
	%	나눗셈의 나머지를 반환합니다.	10 % 3 → 1
	**	첫 번째 값을 두 번째 값으로 거듭제곱합니다.	2 ** 3 → 8

---

---

◾ 할당 연산자( =, +=, -=, *=, /=, %= )

연산자 종류	연산자	설명	예제
할당 연산자	=	값을 변수에 할당합니다.	let x = 5
	+=	변수에 값을 더하고 결과를 변수에 저장합니다.	x += 3 → x = x + 3
	-=	변수에서 값을 빼고 결과를 변수에 저장합니다.	x -= 2 → x = x - 2
	*=	변수에 값을 곱하고 결과를 변수에 저장합니다.	x *= 4 → x = x * 4
	/=	변수에서 값을 나누고 결과를 변수에 저장합니다.	x /= 2 → x = x / 2
	%=	변수에 값을 나눈 나머지를 변수에 저장합니다.	x %= 3 → x = x % 3

---

◾ 비교 연산자( ==, === ··· )

연산자 종류	연산자	설명	예제
비교 연산자	==	두 값이 동등한지 비교합니다 (타입 변환 허용).	5 == '5' → true
	===	두 값과 타입이 모두 동일한지 비교합니다.	5 === '5' → false
	!=	두 값이 동등하지 않은지 비교합니다 (타입 변환 허용).	5 != '5' → false
	!==	두 값과 타입이 모두 다른지 비교합니다.	5 !== '5' → true
	>	왼쪽 값이 오른쪽 값보다 큰지 비교합니다.	5 > 3 → true
	<	왼쪽 값이 오른쪽 값보다 작은지 비교합니다.	5 < 8 → true
	>=	왼쪽 값이 오른쪽 값보다 크거나 같은지 비교합니다.	5 >= 5 → true
	<=	왼쪽 값이 오른쪽 값보다 작거나 같은지 비교합니다.	5 <= 8 → true

---

◾ 논리 연산자( &&, ||, ! )

연산자 종류	연산자	설명	예제
논리 연산자	&&	두 조건이 모두 참일 때 참을 반환합니다.	true && false → false
	||	두 조건 중 하나라도 참이면 참을 반환합니다.	true || false → true
	!	조건의 논리 값을 반전시킵니다.	!true → false

---

◾ 비트 연산자( &, |, ^ ···  )

연산자 종류	연산자	설명	예제
비트 연산자	&	비트 수준에서 AND 연산을 수행합니다.	5 & 3 → 1
	|	비트 수준에서 OR 연산을 수행합니다.	5 | 3 → 7
	^	비트 수준에서 XOR 연산을 수행합니다.	5 ^ 3 → 6
	~	비트 수준에서 NOT 연산을 수행합니다.	~5 → -6
	<<	비트를 왼쪽으로 이동합니다.	5 << 1 → 10
	>>	비트를 오른쪽으로 이동합니다.	5 >> 1 → 2
	>>>	비트를 오른쪽으로 이동하며 부호 비트를 유지하지 않습니다.	-5 >>> 1 → 2147483642

 
`==`는 값만 비교하고, `===`는 값과 타입까지 비교하는데요.
더 안전하기 이렇기 때문에 실제 실무에서도 `===`를 사용하는 곳이 많습니다.

---

⭐️ 자주 쓰는 논리부정연산자( !! )

!!''; // false
!!' '; // true
!!0; // false
!!1; // true

 

---

💭 그 외로 궁금했던 사항들!

const 쓰임을 정확하게 이해하기 위해서
i라는 변수에 증감연산자로 붙이는 경우
const로 사용하면 안되는 것이 맞는지 궁금했다.

ChatGPT에게 물어보니 제대로 이해하고 있다고
전달을 받았는데 이렇게 증감 연산자나
산술 연산자 등으로 값이 바뀌는 경우에는
let을 사용하는 것이 바람직하다고 한다.

---

📝 6일차 부트캠프 회고

1️⃣ 잘했던 점
전체적인 부분은 C나 JAVA처럼 언어들에 대한 기본적인 베이스는 동일한 내용이거나 비슷한 내용도 존재했다. 오늘 수업이 엄청 어려운 느낌은 아니었지만 연산자 종류가 많은 편이어서 잘 숙지해야겠다는 생각이 들었다.

2️⃣ 부족했던 점
대기업에서는 개발자를 뽑을 때 “하나의 변수명을 잘 짓기 위해 10번 이상 고민한 적이 있는가?“를 보는 곳도 있다고 한다.

그만큼 변수명을 정하는 것은 쉬워보이지만 어려운 일이다. 깨끗한 코드를 쓰기 위해서 개발에 발을 디딜 때부터 습관을 들여야겠다는 생각이 들었다.

변수명 뿐만 아니라 주석에도 좋은 주석과 나쁜 주석이 존재하므로 올바르게 작성하기 위한 방법을 알아보아야겠다.

✍️ 좋은 주석 작성하는 법
▪️ 구글 등 글로벌 기업에서는 주석을 어떤 식으로 쓰는지 찾아보자.
▪️ 코드의 동작 원리를 이해시키기 위한 주석은 달지 않는다. (코드를 보는 사람은 나보다 코드를 잘 짜는 사람이라고 생각하자 마인드)

3️⃣ 향후 개선 방향
클린코드 도서 목차를 보면 변수명, 주석 관련하여 글이 있다. 이 외에도 해당 도서를 리뷰한 글이 있어서 참고하면 좋겠다.

 

🧷 클린코드 도서 리뷰

BookReview [CleanCode]