JSBasis 1. 변수

안녕하세요 마늘입니다.

동아리에서 JS를 배우라고 해서 배워보고 있습니다.

 

먼저 들어가기 전, 저도 코딩앙마 님의 자바스크립트 기초 강좌를 보면서 정리하는 글입니다.

해당 영상은 이곳에 가서 보실 수 있습니다!

 

https://youtu.be/KF6t61yuPCY

 

1. JS에서의 변수 선언 방법

 

기본적으로 우리가 파이썬에서 써온 것처럼, 변수를 이런 식으로 지정할 수는 있습니다.

 

name = "Mike";
age = 30;

 

여기서 name 안에 들어갈 '문자' 는, 다음과 같이 지정해 줄 수 있습니다.

 

name1 = "Mike";
name2 = 'Pyke';
name3 = `Cho\'gath`;

 

큰따옴표 " / 작은따옴표 ' / 그레이브 ` (라고 하네요) 이 셋으로 문자를 감싸주어야 합니다.

근데 만약 우리가 name3를 출력해보면, 

 

=> Cho'gath

 

라고 출력됩니다. 분명 우리는 \(백슬래시)를 문장에 넣었는데, 어디로 가버린걸까요?

이는 사실 작은따옴표를 내용에 넣기 위해서 백슬래시로 구문 표시를 해준 건데요.

다른 프로그래밍 언어에서도 이런식으로 작은따옴표를 표현하기도 합니다.

 

근데 사실...

name1 = "Cho'gath";
name2 = `Cho'gath`;

 

 

그냥 바깥에 작은따옴표를 안 쓰면 쉽게 작성이 가능합니다(...)

 

아무튼, 이런 식으로 변수를 선언해도 되지만, JS에는 변수를 선언하는 데 많은 도움을 주는 녀석들이 있습니다.

 

2. var / let / const

 

이 셋은 우리가 변수 관리를 잘 할수 있도록 돕는 녀석들입니다.

물론 우리가 기억을 기똥차게 잘하면 변수 관리를 위해 이 녀석들을 사용 할 일이 적어질 테지만,

인간이 원래 잘 까먹는 걸 어쩌겠습니까, 도구를 써야죠 뭐.

 

일단 var는 별다른 차이점이 없습니다.

 

something() {
	x = 1;
	var y = 0;
    	
}

console.log(x);
console.log(y);

 

이런 식으로 코드를 작성했다 쳐봅시다.

출력은 어떻게 나올까요?

 

정답은 1이 나오고 그대로 에러를 뱉어냅니다.

왜냐하면 var 를 통해서 선언한 변수는 기본적으로 전역 변수가 아니기 때문입니다.

something 내에서 선언되었기 때문에, 밖에서는 쓸 수 없게 됩니다.

 

다음으로 let을 알아봅시다.

let name = "GalaKrond";

// 1000000 lines of codes..

let name = "Garlic";

 

이런 식으로 변수를 선언하게 되면, 이후에 같은 이름의 변수를 let으로 선언했을 때 에러를 뱉어냅니다.

만약 let을 사용하지 않고 일반적으로 변수를 생성했다면,

이전에 쓰였던 변수에 값을 덮어씌우고 재활용하는 상황이 벌어집니다.

이는 곧 코드 유지보수를 힘들게 하고, 복잡한 스파게티 코드를 만들게 합니다.

그래서 바로 우리가 let을 써야 하는 겁니다.

 

 

 

다음으로 const를 알아봅시다.

const name = "Gala";

이게 끝입니다! 이 녀석은 let과 완전히 같은 기능으로 동작하지만, 딱 한가지 다른 점이 있습니다.

평소에 영어 공부를 좀 하셨던 분이라면 바로 알아채셨을 수도 있을텐데,

const는 constant, 즉 상수를 의미합니다. 고로 이 값은 선언 이후 절대로 바꿀 수 없습니다.

 

 

이제 대충 변수를 선언하는데 도움을 주는 3인방도 알아보았겠다. 다음은 변수의 자료형을 공부해봅시다.

 

3. JS의 변수 자료형

 

String - 문자형

 

text1 = "Sans"
text2 = "I\'m Garlic";
text3 = `My name is ${text1}`;

 

여기서 ` (그레이브) 를 사용하는 이유가 나옵니다.

변수 text3의 값은, ${} 내부의 값과 합쳐지면서 결과적으로 'My name is Sans' 가 됩니다. 

여기서는 ${text1} 이었기 때문에, text1의 값인 'Sans' 가 들어가게 된 것이죠.

${ } 안에는 식, 변수 등등 다양한 것들을 넣어둘 수 있습니다.

 

int / float - 숫자형

 

const name = "wtf";
const num1 = 30;
const num2 = 3.14;

const divbyzero = 1/0; // ???
console.log(divbyzero)

const stringdiv = name/2;
console.log(stringdiv)

 

int와 float는 숫자형을 담당하는 자료형들입니다.

int는 정수, float는 실수를 담당하죠.

 

여기서 한번 숫자를 0으로 나누어봅시다.

 

당신이 0으로 나눌 때 생기는 일

 

수를 0으로 나누는 것은 애초에 수학적으로 정의되어 있지 않기 때문에, 이런 밈도 있는데요.

그리고 JS에서는 수를 0으로 나눈 결과를 Infinity , 즉 무한대로 출력합니다(...)

왜냐하면 프로그래밍에서 A / B == 'A 에서 B를 뺄수 있는 횟수' 로 인식하기 때문입니다.

고로 1을 0으로 나눈다 = 1에서 0을 몇번 뺄 수 있는가 로 계산하므로, 결과는 무한대가 됩니다.

 

다음으로 넘어가서, 수가 아닌 것을 숫자로 나누어봅시다. 예시에서는 변수 name의 값 "wtf" 을 2로 나누었습니다.

근데 숫자가 아닌것을 숫자로 나눈다고 해서, 수가 나올 리가 만무합니다.

그래서 JS는 이를 NaN (Not a Number) 으로 출력합니다.

 

 

Boolean - 참과 거짓

 

const iscorrect = true;
const asdf = 1;
console.log(asdf == 1);

 

불리언 (흔히들 불, 부울, 부울 대수라고 부릅니다)은 참과 거짓 둘 중 하나의 값을 가지는 변수입니다.

예시에서는 변수 iscorrect가 True, 즉 참의 값을 가지고 있네요. (반대는 False, 거짓입니다.)

3번째 줄에서는 asdf == 1이 console.log 안에 들어있습니다.

이는 저 조건식이 참인지 거짓인지를 묻는 것으로, 2번째 줄에서 asdf가 1로 선언되었으므로 조건식은 참이겠죠?

고로 콘솔창에 true를 출력합니다.

 

Null / Undefined - 지정되지 않은 놈들

 

let user = null;
let unde ;

 

null 과 Undefined는 비슷하지만 서로 다릅니다.

자료형을 알려주는 typeof()함수를 통해서 확인해보면 null은 object, 그러니까 객체로 표시되지만, 

실제로는 원시 타입 ( Primitive Type ), 즉 처음부터 정해져 있는 자료형입니다. 이것은 JS 초기의 버그이나,

이전부터 사용되어 왔던 수많은 사이트에 typeof() 함수를 수정하기에 위험해 유지되고 있다고 하네요.

 

정리하자면 null은 자료형도 값도 null로 아무튼 지정되어있는 것이고,

undefined는 애초에 null 같은 것으로도 지정을 한 적이 없어서 생겨나는 것입니다.

 

 

 

 

 

 

 

오늘은 JS의 기본 문법 중 자료형에 대해 알아보았습니다.

다음은 기본 입출력인 alert, prompt, confirm에 대해 알아보겠습니다!