[JS] Basic - 1 (Data Type)

V8을 다시 공부할 수 있는 기회가 생겨서 Bottom Up 방식을 선호하는 나에게 JS부터 차근차근 공부해보고자 한다.

 

https://ko.javascript.info/

모던 JavaScript 튜토리얼

이곳에서 공부한 내용을 정리한 글이다.

 

node 연습을 위한 셋업

>> sudo apt update
>> curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
>> source ~/.bashrc 
>> vim ~/.zshrc 
>> source ~/.zshrc  
>> nvm --version
>> nvm install --lts 
>> nvm use --lts 
>> node -v

근데 문서 쭉 살펴보니까 node 환경을 사용할 일은 없어보임

또한 해당 문서는 브라우저 환경을 위한 예제이다

 

 

 

Backgrouond

'script' 태그

<script> 태그를 이용하면 JS 프로그램을 HTML 문서 대부분의 위치에 삽입이 가능하다.

<script>
	alert('asdf');
</script>

 

F12를 눌러 나오는 Devtools에서 alert() 구문을 넣으면 알림창이 출력되는 것과 같다.

 

 

JS 코드의 양이 많은 경우에는 src 속성을 이용해 파일로 나누어 저장할 수 있다.

//Ex) 1
<script src = "/path/to/script.js"></script>

//Ex) 2
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

//Ex) 3
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

절대 경로로써 파일을 나타내거나, URL, 복수의 파일 또한 HTML에 삽입하는 것이 가능하다.

 

단, <script> 태그는 src 속성과 내부 코드를 동시에 갖지 못한다.

<script src='file.js'>
	alert('adsf');
</script>

위와 같은 코드에서 alert()는 실행되지 않는다.

 

 

 

Data Type

Variable

JS에선 let 키워드로 변수를 생성한다.

let msg;
msg = 'hello';

alert(msg);

위의 예제는 msg 변수를 생성한 후, 'hello' 라는 값을 저장하여 alert()로 노출하는 코드이다.

 

let msg = 'asdf';
let message;

message = msg;

alert(msg)
alert(message)

위의 예제처럼 변수 값 복사가 가능하다. C 처럼 일일이 반복문 돌면서 저장하지 않아도 되는게 큰 장점이라고 생각한다.

 

단, 같은 이름의 변수를 중복 선언하면 에러가 난다.

 

그 외의 변수 선언법이나, 작명법 등은 다른 언어와 비슷하다.

 

Const

상수는 const를 사용한다. 상수의 의미는 다 알 것이라고 생각하므로 추가적인 내용은 생략하겠다.

 

const pageLoadTime = /* 웹 페이지를 로드하는데 걸린 시간 */;

해당 문서에서 상수는 위와 같은 정보를 담는데 사용한다고 한다. 해당 상수의 의미는 최초 할당 이후에 변경되지 않으므로 상수라고 한다.

 

 

 

과제

1. admin과 name이라는 변수를 선언하세요.
2. name에 값으로 "John"을 할당해 보세요.
3. name의 값을 admin에 복사해 보세요.
4. admin의 값을 alert 창에 띄워보세요. "John"이 출력되어야 합니다.

let admin;
let name = 'John';

admin = name;

alert(admin)

 

 

Number Type

정수 및 부동소수점 숫자를 나타냄.

일반적인 숫자 외에도 Infinity, -Infinity, NaN 과 같은 특수 숫자 값(Special Numeric Value)가 포함됨.

 

파이썬의 경우 숫자를 0으로 나눌 경우 에러가 발생한다. 반면 JS는 숫자를 0으로 나누었을 때 오류가 리턴되지 않고, Infinity가 리턴된다.

 

BigInt

JS에서 +-2^53-1 의 범위 밖에 있는 정수는 숫자형을 사용해 나타낼 수 없다. 그러나 Crypto와 같은 분야에선 매우 큰 숫자를 다루므로 큰 숫자가 필요할 때가 있다.

 

해당 자료형으로 값을 나타내기 위해서는 숫자 리터럴 끝에 n을 붙이면 된다.

const bigInt = 123412341234123412341234123412341234123412341234123412341234n;

 

String Type

JS에서 문자열은 따옴표로 묶는다.

 

따옴표란 ', ", `와 같은 Quote, Double Quotes, Backtick이 있다. Quote와 Double Quotes는 일반적인 사용법과 같으나, Backtick의 경우 파이썬의 f-string 처럼 변수나 표현식을 문자열 중간에 넣을 수 있다.

 

let name = 'John';

alert(`Name: ${name}`);

alert(`Result: ${1+2}`);

 

Bool

파이썬처럼 true와 false밖에 존재하지 않는다.

차이점은 파이썬처럼 True, False로 쓰는 것이 아닌 소문자로 작성해도 된다.

 

Null

null 값은 어느 자료형에도 속하지 않는 값이다.

null 값은 오로지 null값만 포함하는 별도의 자료형이다.

 

JS의 null은 JS 이외 언어의 null과 성격이 다르다. 다른 언어에서 null은 존재하지 않는 객체에 대한 참조나, 널 포인터를 나타낼 때 사용한다.

 

하지만 JS에서 null은 존재하지 않는 값(nothing), 비어있는 값(empty), 알 수 없는 값(unknown)을 나타내는데 사용한다.

 

let age = null;

위의 예제는 age를 알 수 없거나 그 값이 비어있음을 보여준다.

 

Undefined

undefined 값 역시 null 값처럼 자신만의 자료형을 사용한다.

해당 자료형은 값이 할당되지 않은 상태를 나타낼 때 사용한다.

 

let age;

alert(age);

위 예제처럼 변수를 선언했지만, 값을 할당하지 않았다면, 해당 변수에 undefined가 출력된다.

 

let age = 100;
age = undefined;

alert(age);

위처럼 직접 undefined를 할당할 수 있다.

 

Object & Symbol

Object Type은 특수한 자료형이다. 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 Primitive Type으로도 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(Entity)를 표현할 수 있다.

 

이러한 특징 때문에 JS에서 객체는 더 특별한 취급을 받는다.

 

Symbol Type은 객체의 고유한 식별자(Unique Identifier)를 만들 때 사용된다.

 

Typeof

Typeof는 인자의 자료형을 반환한다.

파이썬의 type(var)과 비슷한 맥락인듯 하다.