내일배움캠프 6일차 TIL(2) - JavaScript 기본 문법

Sunny·2023년 12월 29일
0
post-thumbnail

변수와 상수

기억하고 싶은 값을 메모리에 저장했다가 읽어들여서 재사용하는 매커니즘

변수의 5가지 주요 개념

let a; //변수 선언
let a = 1; //변수 할당
console.log(a) //변수 참조
//변수 이름: a , 변수 값: 1

변수를 선언할 수 있는 3가지 방법

  1. var
    중복 선언 가능
var v = 1;
var v = 2; //문법 에러가 발생하지 않음
  1. let
    중복 선언 불가
let l = 1;
let l = 2; //문법 에러 발생
  1. const
    값 변경 불가
//값 변경
const c = 1;
const c = 2; //실행 시 오류 발생

하단의 +.는 개인적인 호기심으로 알아본 내용들이다.

+. var에 관한 추가 설명

여기까지만 읽으면 var을 지양해야 하는 이유에 대해 감이 잘 안 올 수 있는데,
var에 대한 좋은 설명이 담긴 링크를 첨부한다.

https://ko.javascript.info/var

요약하자면
1. 중복 선언이 가능하나 두 번째 선언은 무시한다.
2. 함수/전역 스코프로서 if문 등의 블록을 초월한다.
3. (함수 안에서) 위치 관계없이 함수가 실행 시 선언되나 할당은 해당하지 않는다.

+. const에 대한 추가 설명

변수를 입력하다 보면 생기는 의문이 있다.
var과 let은 이렇게 선언만 해도 문제가 생기지 않는다.

var v;
let l;

하지만 const는 이를 용납하지 않는다.

const c; //문법 에러 발생!

변수에게는 선언, 초기화, 할당의 세 가지 단계가 있다.

선언과 할당은 앞에서 설명했고,
초기화란 변수를 위한 메모리를 할당하고 undefined 값을 넣어 주는 것이다.

위에서 var이 당겨서 선언된다고(hoisting) 이야기했는데, 사실 let도 마찬가지다.
다음과 같은 코드를 상상해 보자.

r; //undefined
var r; //undefined
var r = 1; //1

l; //error
//TDZ
let l; //undefined
let l = 1; //1

둘 다 hoisting을 통해 미리 선언된다.

var은 선언과 동시에 초기화가 진행된다.
따라서 미리 선언되었고, undefined라는 값도 담겨 있다.

let은 선언과 초기화가 분리되어 있다.
따라서 선언은 되었으나 초기화 전이기에 메모리가 할당되어 있지 않아 미리 사용하려고 하면 에러가 발생한다.
초기화 작업은 선언문에서 진행되기 때문에 당겨서 선언된 것처럼 보이지 않는 것이다.
+. 이 때, 선언과 초기화 사이의 구간을 TDZ(Temporal Dead Zone)라고 한다.

const의 경우 선언, 초기화, 할당이 동시에 진행될 것을 요구한다.
따라서 선언 시 값을 할당해야 오류가 발생하지 않는 것이다.

데이터 타입

변수의 데이터 타입은 다음과 같이 확인할 수 있다.

typeof (변수명)

숫자

JavaScript에서 typeof를 사용할 경우 number로 출력된다.

정수형(int)과 실수형(float)에 관해서는
이전의 글 에서 동적 타이핑에 관해 설명하면서 이런 예제를 작성했다.(Python)

a = 1
b = 1.0
print(type(a)) //<class 'int'>
print(type(b)) //<class 'float'>

a의 자료형은 int이고 b의 자료형은 float이다.
float은 부동소수점(Float-Point)에서 따온 이름이다.
따라서 실수형은 소수점을 포함하는 수를 다루는 자료형이라고 할 수 있다.

지수형(Exp)

let num3 = 2.5e5;
console.log(num3); //250000

끝에 'e+숫자'가 붙는데, 앞의 수에 '10^숫자'를 곱해준다는 뜻이다.

NaN(Not a Number)

let num4 = "Hello" / 2;
console.log(num4); //NaN

값은 NaN이지만 변수명에 typeof를 해보면 일단 number로 출력된다.

Infinity(무한대)

let num5 = 1 / 0;
console.log(num5) //Infinity
let num6 = -1 / 0;
console.log(num6) //-Infinity

문자

JavaScript에서 typeof를 사용할 경우 string으로 출력된다.

let str = "Hello, "
let ing = "World!"
let hello = "Hello, World!"

문자 타입 활용법

문자열의 길이

str.length

문자열 결합

str+ing //Hello, World!

문자열 자르기

hello.substr(7,5) //World
hello.slice(7,12) //World

문자열 검색

hello.search("World") //7

문자열 대체

hello.replace("World", "Javascript") //Hello, Javascript!

문자열 분할

hello.split(",") //["Hello", "World!"]

불리안(Boolean)

JavaScript에서 typeof를 사용할 경우 boolean으로 출력된다.

let t = true;
let f = false;

Undefined

JavaScript에서 typeof를 사용할 경우 undefined로 출력된다.

let u;

왜 undefined인지에 대해서는 변수 부분에서 설명했다.

Null

JavaScript에서 typeof를 사용할 경우 object로 출력된다.
오타가 아니다! 이에 대해서는 아래에서 고찰하겠다.

값이 비어있다는 것을 명시하고 싶을 때 사용한다. undefined와는 다르다.

let n = null;
console.log(null===undefined) //false

+. null은 왜 object가 되었나?

이는 자바스크립트의 초기 오류이나 이미 기존코드가 많아 고치지 못했다고 한다.

이유는 typeof의 작동 원리와 관련이 있는데,
간결히 설명하자면 typeof는 로직에 null을 걸러내는 과정이 포함되어 있지 않았고 그 결과 null이 걸리게 된 태그가 object였다는 것이다.

만약 더 자세히 알고 싶다면
https://witch.work/posts/javascript-why-typeof-null-is-object
이 글을 추천하겠다.

객체(Object)

JavaScript에서 typeof를 사용할 경우 object로 출력된다.
key-value가 짝을 이루는 형식으로 이루어져 있다.

let obj = { type: 'object', isobject: true}

배열(Array)

JavaScript에서 typeof를 사용할 경우 object로 출력된다.

let arr = [ 1, 'two', true, undefined, null]

+. 배열이 object로 출력되는 이유
현재의 typeof는
number, string, boolean, undefined, object, function, bigint, symbol
9가지만 출력하고, 따라서 이 외의 것은 모두 object로 출력한다.
array 또한 그 외의 것이기 때문에 object로 출력된다.

0개의 댓글