2024. 7. 18. 00:32ㆍ프로그래밍/JavaScript
개요
Javascript라는 언어를 각 잡고 시간내서 공부하지 않고 실무 생활을 하며 MDN을 비롯한 각종 레퍼런스를 통해서 어렴풋이만 학습하고 있던 도중 시간을 내서 '모던 자바스크립트 Deep Dive' 를 구매해 공부하던 중 새롭게 알게 된 사실에 대해서 정리한다.
Javascript의 변수 선언과 초기화 방법
C나 Java와 같은 프로그래밍 언어의 경우에는 변수 선언을 타입과 변수명의 선언으로 보고 초기화는 해당 변수에 값을 할당하는 것이다.
그러나 Javascript서는 변수를 선언과 초기화하는 과정이 다른 프로그래밍 언어와 다르기 때문에 이 개념이 조금 모호하다.
특히 ES6에 let과 const 키워드가 도입됐기 때문에 레거시 코드는 모두 var키워드를 사용하고 있다.
Javascript에서 var로 선언한 변수는 암묵적으로 undefined로 초기화 된다.
설령 선언과 초기화를 한 줄에 하더라도 말이다.
var result; # undefined가 할당
result = 80 # result 변수에 80이 할당
var example=100 # example 변수에 undefined가 할당됐다가 100이 다시 할당됨
이는 var 키워드의 호이스팅 개념과도 관련이 있다.
그러나 여기서 착각하면 안되는 것이 위에서 선언한 변수들은 같은 메모리 주소를 가르키고 있지 않다.
즉 undefined가 할당된 시점의 변수가 가르키는 메모리 주소와 primitive value가 할당된 이후에 변수가 가르키는 메모리 주소는 다르다는 뜻이다. 일반적으로는 같은 메모리 주소를 가르키고 값만 바뀌는데 Javascript는 그렇게 동작하지 않는다.
결국 위 예시에서의 var example=100 과 같이 초기화하는 것도 엄밀히 말하자면 '재할당'이라는 것이다.
Javascript에서는 왜 변수를 undefined로 암묵적 초기화를 하는 것일까?
위에서 설명했듯 Javascript는 새로운 값을 할당할 때마다 메모리 주소가 바뀌게 된다. 그렇기 때문에 곳곳에 쓰레기 값을 가진 메모리 주소가 널려있을 것이다. 이를 위해 처음 변수를 선언할 때 해당 변수가 가르키는 메모리 주소에는 쓰레기 값이 있을 확률이 매우 높기 때문에 undefined로 바로 초기화 해주는 것이다.
? 그렇다면 쓰레기 값이 할당된 메모리 주소는 계속 누적돼 메모리 누수를 일으키지 않는가?
실제로 변수를 선언할 때마다 메모리는 undefined로 가득차고 값으로 초기화하게 된다면 메모리에는 쓰레기 값으로 남아있는 것이 맞다. 그러나 Java에 garbage collector가 존재하듯이 Javascript, 정확히 말하면 ECMAScript 엔진에서도 같은 동작을 수행하기 때문에 메모리 누수를 걱정할 필요는 없다.
Javascript에서 숫자값을 가지는 변수에는 몇 바이트가 할당되는가?
실수를 사용할 일이 많지 않아 어렴풋이 궁금했으나 찾아보지는 않았던 내용이었다.
결론부터 말하자면 Javascript에서는 정수, 실수 모두 같은 숫자 타입으로 취급하며 Java 기준으로 실수형을 나타내는 double타입과 같은 8바이트 크기의 메모리 주소가 할당된다.
Javascript에서는 number 타입으로 배정밀도 64비트 부동소수점 형식을 사용하고 있다. 배정밀도는 64비트를 뜻하고 단정밀도는 34비트를 뜻한다. 또한 소수점을 나타내는 방식에는 고정소수점, 부동소수점 등이 있으나 크게 중요하지는 않은 내용이라 생략한다.
코드의 끝에 세미콜론을 붙여야 하는가?
처음 Javascript를 사용할 때 세미콜론을 붙여도, 안붙여도 정상적으로 동작했으나 일반적으로는 붙이는 것을 권장했기 때문에 그렇게 사용하고 있었다. 그러나 내부적으로는 ASI(Automatic Semicolon Insertion)라고 해서 세미콜론을 자동으로 삽입하는 기능이 탑재돼있다. 그렇기 때문에 정상적으로 동작했던 것이다. 안붙여도 상관은 없으나 ASI가 예상대로 동작하지 않는 경우 개발자의 예측과 달리 에러가 발생하기 때문에 붙이는 것이 권장되는 듯 하다.
'프로그래밍 > JavaScript' 카테고리의 다른 글
[ Javascript ] 변수 및 객체가 복사 및 할당되는 원리 & 얕은 복사와 깊은 복사 (2) | 2024.07.25 |
---|---|
[ Javascript ] 암묵적 캐스팅과 산술 연산자 +의 문자열 형변환 (0) | 2024.07.19 |
Javascript try-catch 동작 원리, return과 error의 차이점 (0) | 2023.11.20 |
[Javascript] Spread 연산자 (Spread Operator), 구조분해할당(Destructuring Assignment) (1) | 2023.10.29 |
[Javascript] async와 await, Promise 객체 등등의 개념 정리 (0) | 2023.10.29 |