바닐라 JS로 크롬 앱 만들기 #2 (2)

#2.1 Basic Data Types

 

첫번째 데이터타입 integer (정수)

자바스크립터는 숫자를 알고 있다!

 

두번째 데이터타입 float (소수)

 

세번째 데이터타입 text (문자)

그치만 콘솔에다가 바로 쓰고 싶은 문자를 쓰면 오류가 발생한다!

오류를 내지 않고 문자를 쓰기위해서는 " " (큰따옴표) 혹은 ' '(작은따옴표)를 사용해야한다

 

여기서 "my name is dh"은 text는 맞지만 정식 명칭은 string이다.

string은 처음부터 끝까지 모두 문자로 이루어져있다는 말이다!

 

 

#2.2 Variables

 

console.log()는 콘솔에게 메세지를 보내는 코드이다!

()안에는 숫자나 string을 넣을 수 있다!

 

console.log()를 이용한 계산

자바스크립트는 파일을 위에서 아래로 읽는다!

console.log(5+2)를 가장 먼저 계산해서 7이라는 값이 가장 먼저 나오고

그 다음에는 console.log(5*2)를 계산해서 10이라는 값을 출력,

마지막으로 console.log(5/2)을 계산해서 2.5를 출력했다!

 

만약 3개의 식을 5가 아닌 6로 바꾸거나, 2를 1로 바꾸고 싶다면?

지금은 식이 3개뿐이기에 숫자를 3개만 바꾸면 되지만, 만약 식이 100개라면 100개를 바꾸기에는 너무 귀찮다!

이를 해결하기 위해서는 게을러지는 방법을 배워야한다! 코드를 줄여야한다는 뜻!!

코드를 적게 쓰면 에러도 적고, 시간도 덜 걸린다는 장점이 있다!

 

이때 Variable을 사용할 것이다!

Variable은 값을 저장하거나 유지하는 역할을 한다.

 

Variable을 만드는 방법

Variable을 만들기 위해서는 가장 먼저 const(상수)를 사용한다.

const(상수)는 바뀌지 않는 값으로 계속 유지된다는 뜻이다!

const를 이용해서 a는 5와 같다는 코드를 추가해주었다!

이 코드는 const인 variable을 만든 것이고 variable의 이름은 a이며, a는 5와 같다.

즉. a는 5라는 값을 가지고 있다는 뜻이다!

 

계산식도  5가 아닌 a로 바꾸고 브라우저 콘솔창을 열어보면 결과값은 그대로인 것을 볼 수 있다!

 

const b = 2;라는 코드를 작성해주고, 마찬가지로 2 대신 b를 써줘도 브라우저 콘솔창에서 보면 같은 결과를 얻을 수 있다!

 

Variable으로 문자값을 저장할 수 있지만 꼭 " "나 ' ' 를 사용해야한다!"

"2"와 2는 다르다. "2"는 문자이고, 2는 숫자이다!

 

Variable의 이름은 공백이 들어갈 수 없다! 만약 공백이 들어간다면 에러가 생긴다.

근데 만약 단어에 공백이 필요하다면 일반적으로 다음 다음 단어의 첫 문자를 대문자로 쓴다. 

myname을 myName이라고 쓰거나, verylongvariablename을 veryLongVariableName으로 쓴다는 뜻이다!

파이썬에서 주로 쓰느 방법으로는 공백에 언더바(_)를 넣는것이다. very_long_variable_name 이렇게!

이렇게 쓴다고 JS나 브라우저에서 오류가 생성되지는 않겠지만, JS에서는 보통 다음 단어의 첫 문자를 대문자로 쓴다!

veryLongVariableName	very_long_variable_name
자바스크립트에서 주로 사용	파이썬에서 주로 사용
camelCase (낙타 등 모양)	snake_case (뱀 모양)

 

#2.3 const and let

#2.2강의에서는 Variable(변수)을 만드는 방법을 하나만 소개했지만, 사실 JS에서는 변수을 만드는 방법이 두가지가 있다.

한가지는 const를 사용하는 것이고, 다른 하나는 let을 사용하는 것이다.

const a = 5;을 let a = 5;로 바꾸어도 브라우저를 새로고침 했을 때 콘솔창에 출력되는 결과값은 바뀌지 않는다!

 

그렇다면 let과 const의 차이점은 무엇일까?

const는 constant(상수)라는 뜻으로 값이 바뀔 수 없고, let은 변수의 값을 바꿀 수 있다.

 

변수값을 바꾸는게 필요할 때가 있을 수 있다.

만약 바로 위 코드의 a와 b를 업데이터할 생각이 전혀 없다면 const를 써도 무관하지만

내 이름이 마음에 들지 않아서 새로운 이름으로 업데이트 하고 싶다면 let을 써야한다.

 

이때 특이점이 있다면, 값을 바꿀 때 let myName = "HZ";가 아닌 myName = "HZ";라는 코드를 작성했다.

그 이유는 let은 새로운 것을 생성할 때 사용하기 때문이다.

3번째 줄에 이미 myName이라는 새로운 변수를 생성해줬기 때문에 10번째 줄에서 값을 바꿀 때는 let을 사용하지 않아도 된다.

 

같은 myName이라는 변수를 사용했지만, 8번째 줄은 생성할 때의 값인 DH가 나왔고

12번째 줄은 10번째 줄에서 새로 업데이트한 HZ가 출력값으로 나왔다.

여기서 한번 더 JS는 위에서부터 파일을 읽는다는 것을 알 수 있다!

 

만약 myName이라는 변수를 let이 아니라 const로 생성해준다면?

새로운 값을 대입할 수 없다는오류가 발생하는 것을 확인할 수 있다! const로 변수를 만들었다면, 절대 값을 바꿀 수 없다.

 

 

let과 const을 통해서 아래 코드를 보지 않아도 절대 바뀌지 않을 값 a, b가 있고,

값이 업데이트 될 수 있는 myName이 았다는 것을 알 수 있다.

대부분의 프로그래머는 const를 사용하고, 필요할 때만 let을 사용해서 만든다.

 

과거에는 const와 let이 아닌 var만 있었다. var은 원한다면 어디서든 업데이트를 할 수 있었다.

코드를 var로 바꿔도 브라우저에서 에러가 뜨지 않는 이유는 현재 브라우저에서 var, let, const를 이해하기 때문이다.

var의 문제점은 언어를 통한 보호를 받지 못한다는 점이다.

실수로 a의 값을 업데이트해도 언어는 에러를 통해서 알려주지 않는다. 이 때문에 let과 const를 만든 것이다!

오래된 자바스크립트 책을 보면 var이 많이 나오는데 가능하면 let과 const를 사용하는 것이 좋다!

 

강의 마지막의 결론! 대부분 const, 가끔은 let, var은 절대안됨!