🔥변수란?
내가 원하는 값에 이름을 붙여서 저장하는 것을 말합니다.
자바스크립트에서는 변수를 사용하여 여러가지 형태의 데이터를 저장할 수 있습니다.
변수의 이름 = 원하는 값;
name = "lemon";
age = 28;
gender = "여자";
hairColor = "검정";위의 예제는 name에 lemon을 저장 / age에 28을 저장 / gender에 여자를 저장 / hairColor에 검정을 저장한것입니다.
자바스크립트에서 저장했다는 값을 할당해주었다고 합니다.
- 줄 마지막에 들어간 ;(세미콜론)은 한줄이 끝났다는 의미로 사용한다.
- 변수의 = 은 수학적 기호의 ‘같다’라는 뜻이 아닌 대입연산자(=)입니다.
오른쪽 값을 왼쪽으로 대입한다는 뜻입니다. - “lemon”, “여자”, “검정” 은 “”(따옴표)로 감싸져있습니다. 자바스크립트에서 문자열은 항상 “”(따옴표)(쌍따옴표, 홑따옴표 상관없습니다)로 감싸줘야합니다. 그래야 문자임을 인식할 수 있습니다.
변수명
name, age, gender, hairColor에 해당하는 변수의 이름이 ‘변수명’ 입니다.
가끔 변수명이 에러가 날 수 있습니다. 예를 들어서 class = ”수업”이라는 변수를 적었을 때 에러가 발생합니다. class는 자바스크립트에서 이미 사용하고 있는 단어이기 때문입니다. 이렇게 자바스크립트에서 이미 사용하고 있는 단어는 변수명으로 쓸 수 없습니다. 이런 단어들을 예약어(Reserved Words)라고 합니다.
예약어 확인하기 👇🏻
JavaScript Reserved Words
🔥 변수의 선언
위의 예제들과 같이 변수를 사용하는 것은 위험합니다. 왜냐하면 변수명이 유일하다는 보장이 없기 때문입니다. 혼자 만드는 작은 프로젝트면 괜찮겠지만, 여러 개발자가 만드는 큰 프로젝트라면 다른 사람이 name이라는 변수를 또 사용하게 될 경우 마지막에 선언된 name의 값으로 덮어씌어지게 됩니다.
name = "Mike"
// 많은 코드들....
name = "Lemon"이렇게 되면 처음에 name 변수에 할당 된 "Mike"가 "lemon"으로 덮어씌어지게 됩니다.
이런 것들을 방지하기 위해 let 과 const가 존재합니다.
let 과 const는 변수를 만들겠다는 의미로 변수 앞에 붙여서 사용합니다. 이것을 변수를 선언했다고 말합니다.
const name = "lemon";
const gender = "여자";
let age = 28;
let hairColor = "검정";보통 선언과 할당은 한번에 이루어집니다.
🔥 let과 const (+ var)
let
let grade = "F";
// 많은 코드들....
let grade = "A+";
변수의 이름은 주민등록번호 같은 것입니다. 절대로 중복이 되면 안됩니다. 때문에 중복된 변수명을 사용했다면 위와 같은 경고창이 뜹니다. grade라는 변수명은 이미 사용됐다는 의미입니다. 그러나 let은 한번 선언 후에 다른 값으로 바꿀 수 있다. 이럴 경우에는 let을 생략하고 적으면 됩니다.
let grade = "F";
// 1000 Lines
grade = "A+";const
절대로 바뀌지 않는 상수입니다. 수정할 수 없기 때문에 용도가 확실합니다.
π(파이) , 최대값, 생일, id, password 같은 바뀌지 않는 값을 입력할 때 사용합니다.
TIP] 대문자로 사용하는게 좋습니다. 다른 개발자들에게 이게 상수라는 것을 알리는 방식입니다.
const PI = 3.14;
const SPEED_LIMIT = 50;
const BIRTH_DAY = '1995-06-08';정리하자면 자바스크립트에서 변수를 선언할 때
변하지 않는 값은 const,
변할 수 있는 값은 let으로 선언한다.
이렇게 하면 의도치 않은 동작을 방지할 수 있습니다.
TIP] 모든 변수를 일단 const로 작성하고 변경될 여지가 있는 변수들만 let으로 바꾸면됩니다.
+ var
초기 자바스크립트 구현 방식입니다. 최근에는 잘 사용하지 않지만 오래된 자바스크립트에서 종종 볼 수 있습니다.
🔥변수명 규칙
변수 이름은 원하는대로 정할 수 있지만 몇 가지 주의할 점이 있습니다.
-
대소문자 구문합니다.
myName≠MyName -
camelCase(카멜케이스) 방식으로 사용합니다.
camelCase(카멜케이스)는 대상의 이름을 띄어쓰기 없이 짓기 위하여 띄어쓰기 대신 단어의 첫 글자만 대문자로 표기하는 것을 말합니다.
snake_case 표현법도 있지만 잘 사용하지 않습니다.
let someVariable -
변수는 문자와 숫자, $, _만 사용합니다.
const MY_HOME="..."let _ = 1;let $ = 3;⭕ -
첫글자는 숫자가 될 수 없습니다.
let 1stGrade="A+"❌ -
예약어는 사용할 수 없습니다.
let let = "..."❌ -
가급적 상수를 대문자로 알려줍니다.
const MAX_SIZE = 99;⭕ -
변수명은 읽기 쉽고 이해할 수 있게 선언합니다.
let a = 1❌let userNumber = 3;⭕
🔥console.log
변수들을 꺼내서 보고싶을때 이름을 부르면 화면에 보여지도록 해주는게 console.log 입니다. console.log는 괄호 안의 메세지를 콘솔창에 출력하는 명령어입니다. (여기서 출력이란 값을 눈에 보이도록 나타내는 것입니다.)
콘솔은 브라우저에 이미 담겨있습니다. 브라우저에서 오른쪽 마우스를 클릭하고 검사를 누르면 콘솔창을 볼 수 있습니다.
// 괄호 안의 메세지 출력
console.log(300); // 300이 출력됩니다.
console.log("apple"); // apple이 출력됩니다.// 선언된 변수의 값을 출력
let age = 17;
let color = "black";
let vaccine = true;
console.log(age); // 17이 출력됩니다.
console.log(color); // black이 출력됩니다.
console.log(vaccine); // true가 출력됩니다.🤔자바스크립트와 자바에서 사용하는 변수의 차이점
변수는 자바, C, C++같은 다른 언어에서도 다 쓰입니다. 언어 마다의 차이가 조금씩 있지만 기본 형식은 비슷합니다.
-
자바스크립트는 느슨합니다. 변수안에 어떤 타입(숫자, 문자 등)이 들어와서 신경 쓰지않습니다.
-
자바, C, C++는 엄격합니다. 어떤 타입의 데이터인지 꼼꼼하게 따집니다. 변수를 선언할 때 부터 미리 변수 타입을 지정해줘야합니다.
자바스크립트로 쓴 아래의 예시를 보면
let a = 12;
console.log(a); // 12 출력
a = "haha"
console.log(a); // "haha" 출력숫자형에서 문자형으로 타입이 바뀌어도 에러를 일으키지 않습니다.
이것을 만약 자바로 바꾸면 아래와 같습니다.
class Main {
public static void main(String[] args) {
int a = 12;
System.out.print(a);
// console.log()랑 비슷한 일을 합니다.
// 언어별로 하는 일은 같지만 표현하는 방식이 다릅니다.
// 여기까지 실행하면 12가 뜬다.
a = "haha";
System.out.print(a);
// 1 error : 바로 에러가 뜹니다.
}
}위처럼 어떤 타입의 데이터를 사용했었는지 엄격하게 체크하는 걸 알수있습니다.
- 자바, C, C++은 처음부터 자료형에 엄격했기 때문에 에러가 적습니다.
- 자바스크립트는 뭔가 시도해보기는 좋지만 뒤에서 에러가 생기면 원인을 찾기 힘들어진다는 단점이 있습니다.
✍🏻최종 정리
- 변수는 여러가지 형태의 데이터를 저장하는 것입니다.
- 변수명은 예약어를 사용할 수 없고, 문자와 숫자, $, _만 사용합니다. (첫글자에 숫자가 올 수 없습니다.)
- 변수가 덮어씌어지는 것을 방지하기 위해 let 과 const을 사용해서 선언합니다.
(선안 방법 중에 var도 있지만 최근에는 사용하지 않습니다.) console.log()로 변수안의 값을 콘솔창에 꺼내볼 수 있습니다.- 변수는 자바스크립트 말고도 자바, C, C++ 같은 다른 언어에서도 사용됩니다. 하지만 다른언어에서는 데이터 타입에 더 엄격합니다.
