[JS] 노마드코더 바닐라JS (1)

김다빈·2024년 2월 20일

자바스크립트

목록 보기

32/36

1. 자바스크립트에서의 변수 선언 (const, let, var)

이전 학습기록 - [JS] 자바스크립트 기초 (코딩앙마)

자바스크립트에서 변수 선언할 때 const, let, var를 사용하는 건 알고 있다.
그런데 각각의 차이점에 대해 자바스크립트를 처음 배울 당시에는 깊이 생각하지 않았고, 무조건 모든 변수는 const로 선언하고 나중에 바뀔 값만 let으로 바꾼다. 라고 암기?하고 있었다.

✍ example

const a = 5;
const b = 2;
let myName = 'dabin';

console.log(a + b); //7
console.log(a / b); //2.5
console.log('My name is ' + myName); //My name is dabin

myName = 'KimDaBin';
console.log('My name is ' + myName); //My name is KimDaBin

let 의 특징은 재선언 불가능, 재할당 가능이다.

위의 예시에서 알 수 있듯 let 을 사용해서 변수를 선언하면 나중에 해당 변수의 값을 변경(재할당)할 수가 있다.

그런데 왜 변수 선언 방식은 const, let, var 3가지나 존재하고 우리는 왜 이것을 구별해서 사용해야 할까?

👀 const, let을 구분해서 사용해야되는 이유

자바스크립트 태초에 var라는 변수 선언 방식이 있었다.

var를 사용하면 변수의 값을 재할당하는 것뿐만 아니라 같은 이름으로 재선언도 가능했다. ~~(근데 솔직히 변수를 재선언할 수 있다는 것은 변수로서 의미가 있나 싶다. 그래서 let, const가 나온 것이 아닐까? 라고 혼자 생각해보았다.)~~

var에게 무언가의 단점이 있기 때문에 let, const가 탄생했다고 생각하면 왜 변수 선언 방식을 구분해서 사용해야되는지 알 수 있다.

1. 값을 보호할 수 있다.

const 로 선언한 변수의 값은 변경이 불가하다.

그래서 도중에 해당 변수의 값을 변경하는 코드를 작성했을 때 이것이 문제가 있다, 에러가 발생했다고 인식할 수 있게 한다.

변경이 가능한 값은 let으로 선언하여, 도중에 값이 변경되어도 문제없이 코드가 진행될 수 있게 한다.

2. 코드에 의미를 담을 수 있다.

1번과 비슷한 내용이긴 하지만

let을 사용해서 변수를 선언하는 것은 변수의 값이 도중에 바뀐다고 암묵적으로 알려주는 것이다.
이것은 본인을 포함하여 같이 개발하는 사람들이 해당 코드를 읽을 때 매우 도움이 된다.

그러므로 해당 변수의 값이 바뀌지 않는다면 const 를 사용하는 것이 좋다.

☁️ 1번 회고

실제로 프로젝트를 만들면서 let을 사용해본 적은 없고, 항상 const만 사용했다. 아마 리액트를 사용했기 때문일 것같은데.. 자바스크립트로만 제대로 된 프로젝트를 만들어봤다면 let을 썼을지도 모르겠다는 생각이 들었다.
이 부분은 바닐라JS 챌린지를 진행하면서 더 알아봐야겠다.

2. null, undefined

이전 학습기록 - [JS] 데이터 타입

부트캠프에서 특강이나 퀴즈가 있었는데 그럴 때마다 null, undefined에 대한 얘기가 항상 나왔다. 멘토님들께서 두 개념에 대해 설명해보라고 하셨을 때 제대로 대답할 수 있었던 적이 없었다 😅

이번 기회에 확실하게 알아보자.

✍ example

const myAge = null;
let something;

console.log(myAge); //null
console.log(something); //undefined

null

fill with nothingness
= 비어있음X, 아무것도 없는 상태로 채워짐

null과 false는 다르다.
false는 false라는 값이 있는 상태

기억해야할 건 null은 자연적으로 생기지 않는다.
자바스크립트에게 여기엔 값이 "없다"는 것을 알려주기 위해 사용함.

undefined

변수는 존재하는데 값은 없는 상태

변수는 존재함 = 컴퓨터 메모리 안에는 해당 변수의 공간이 있음
정의되지 않음 = 값이 주어지지 않음, 값이 없음

👀 null과 undefined의 차이

null은 메모리에 존재하고, 값도 주어진 상태. 다만 그 값이 "아무것도 없음"일 뿐
undefined는 메모리에 존재하지만, 값이 주어지지 않은 상태

	메모리에 존재?	값 있음?
boolean	O	O
null	O	O
undefined	O	X

☁️ 2번 회고

null과 undefined는 개념적인 이론으로는 완벽하게 이해하기 어려운 것같고, 실제로 코드를 작성해보면서 에러가 발생하거나 하는 경우에 이해가 더 쉬울 것같다.
바닐라JS 챌린지를 진행하면서 더 알아봐야겠다.

240220 회고

지금에 와서 다시 JS 기초 강의를 들으니 한층 더 이해가 잘 되는 것같다. 이미 알고 있는 내용을 다시 반복하는 게 시간 낭비이지 않나? 그럴 시간에 새로운 기술을 더 공부하는 게 좋지 않을까 하는 순간도 있지만, 역시 기초는 공부할 수록 단단해지고, 몰랐던 부분이 계속 보인다. 이 기회에 부트캠프에서 얼렁뚱땅 넘어갔던 자바스크립트의 부족한 기본 개념을 다시 한 번 정립하는 시간을 가져야겠다.