[JS] 자바스크립트란? 자바스크립트의 타입

이번 포스팅에선 웹 개발이란 단어를 생각하면 떠오르는 3대장 중 자바스크립트에 대해 포스팅하려고 한다.

소프트웨어 커뮤니티 중 하나인 MDN에선 자바스크립트를 아래와 같이 말하고 있다.

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹 페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 3번째 층이라고 볼 수 있다...(중략)...자바스크립트는 동적으로 컨텐츠를 바꾸고 멀티미디어를 다루고 움직이는 이미지, 많은 다른 일들을 할 수 있는 스크립트 언어다

 

대충 내용 갱신이 필요한 기능을 구현할 때 사용하는 스크립트 언어라고 한다. 아래는 위키백과와 다른 곳에서 설명하는 내용이다.

 

https://en.wikipedia.org/wiki/JavaScript

JavaScript - Wikipedia

자바스크립트는 HTML, CSS와 함께 World Wide Web의 핵심 기술 중 하나인 프로그래밍 언어다. 웹 사이트의 97% 이상이 웹 페이지 동작을 위해 클라이언트 측에서 자바스크립트를 쓰며 종종 타사 라이브러리를 통합한다. 모든 주요 웹 브라우저에는 사용자 장치에서 코드를 실행하기 위한 전용 자바스크립트 엔진이 있다. 자바스크립트는 고수준의 ECMAScript 표준을 준수하는 적시에 컴파일된 언어다. 동적 타이핑, 프로토타입 기반 객체지향 및 일급 기능이 있다. 다중 패러다임으로 이벤트 중심, 함수형, 명령형 프로그래밍 스타일을 지원한다. 여기에는 텍스트, 날짜, 정규 표현식, 표준 자료구조, 문서 객체 모델(DOM)을 쓰기 위한 API가 있다
ECMAScript 표준에는 네트워킹, 스토리지 또는 그래픽 기능 같은 입출력이 포함돼 있지 않다. 실제로 웹 브라우저나 기타 런타임 시스템은 I/O용 자바스크립트 API를 제공한다
자바스크립트 엔진은 원래 웹 브라우저에서만 쓰였지만 현재는 일부 서버 및 다양한 응용 프로그램의 핵심 구성요소다. 이 용도로 가장 많이 쓰이는 런타임 시스템은 Node.js다. 자바와 자바스크립트는 이름, 구문, 각각의 표준 라이브러리가 비슷하지만 두 언어는 서로 다르고 디자인 면에서 크게 다르다

 

자바와 자바스크립트는 분명히 다른 언어다. 이따금 같은 거라고 생각하거나 자바가 자바스크립트의 줄임말이라고 생각하는 사람들이 있는데 절대 아니다.

 

https://www.hackreactor.com/blog/what-is-javascript-used-for

What is JavaScript used for?

자바스크립트는 웹 페이지를 대화형으로 만들 수 있게 하는 클라이언트 쪽과 서버 쪽에서 모두 쓰이는 텍스트 기반 프로그래밍 언어다. HTML, CSS가 웹 페이지에 구조와 스타일을 부여하는 언어인 반면 자바스크립트는 웹 페이지에 사용자를 참여시키는 대화형 요소를 제공한다. 자바스크립트를 통합하면 웹 페이지를 정적 페이지에서 대화형 페이지로 바꿔서 웹 페이지의 사용자 경험을 개선할 수 있다. 요약하면 자바스크립트는 웹 페이지에 동작을 추가한다
자바스크립트는 주로 웹 기반 응용 프로그램, 웹 브라우저에 쓰인다. 그러나 자바스크립트는 소프트웨어, 서버, 임베디드 하드웨어 제어에서도 쓰인다

 

https://www.w3schools.com/whatis/whatis_js.asp

What is JavaScript

자바스크립트는 웹용 프로그래밍 언어다. HTML, CSS를 모두 업데이트할 수 있다. 자바스크립트는 데이터를 계산, 조작, 검증할 수 있다

 

https://www.tutorialspoint.com/javascript/javascript_overview.htm

JavaScript - Overview

자바스크립트는 동적 프로그래밍 언어다. 가볍고 클라이언트 측 스크립트가 사용자와 상호작용하고 동적 페이지를 만들 수 있는 웹 페이지의 일부로 가장 일반적으로 쓰인다. 객체지향 기능을 갖춘 해석된(interpreted) 프로그래밍 언어다
자바스크립트는 처음에 LiveScript로 알려졌지만 넷스케이프가 자바에서 생성되는 흥분 때문에(because of the excitement being generated by java) 이름을 javascript로 바꿨다. 자바스크립트는 1995년 LiveScript란 이름으로 넷스케이프 2.0에 처음 등장했다. ECMA-262 사양이 핵심 자바스크립트 언어의 표준 버전을 정의했다

 

추가로 ECMAScript라는 단어가 자주 나와서 찾아봤다.

 

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

ECMAScript는 Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트 표준화를 위해 만들어졌다. ECMAScript는 웹의 클라이언트 사이드 스크립트로 많이 쓰이며 Node.js를 사용한 서버 응용 프로그램, 서비스에도 점차 많이 쓰이고 있다

 

정리하면 자바스크립트는 이런 언어인 듯하다.

 

• 정적인 웹 페이지를 동적으로 만들 수 있다
• 클라이언트, 서버 모두에서 사용된다

 

자바스크립트의 자료형

 

자바스크립트의 자료형은 크게 원시형(Primitive type), 참조형(Reference type) 2가지로 나뉜다.

아래의 자료형들이 원시형에 속한다.

 

• Number
• String
• Boolean
• null
• undefined
• Symbol

 

참조형에 속하는 것은 객체(Object)인데, 객체의 하위 분류에는 아래와 같은 것들이 속한다.

 

• Array
• Function
• Date
• RegExp(정규식)
• Map, WeakMap
• Set, WeakSet

 

몇 가지는 자바에서도 흔히 볼 수 있던 것이었는데 몇 가지는 생소하다.

자바가 익숙한 내게는 먼저 undefined, Symbol 키워드가 생소하다. Weak 키워드는 안드로이드에서도 사용하긴 해서 본 적이 있지만 저 둘이 무엇인지는 감이 안 온다. 하나씩 확인해본다.

 

undefined vs null

 

undefined는 "한정되지 않은, 확실하지 않은" 이라는 뜻을 가진 단어고 null은 "없는, 가치없는, 존재하지 않는" 이라는 뜻을 가진 단어다. 이것은 자바스크립트에선 어떤 의미로 사용될까?

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined

undefined - JavaScript | MDN

undefined는 전역 객체의 속성이다. 즉 전역 스코프에서의 변수다. undefined의 초기값은 undefined 원시값이다. 최신 브라우저에서 undefined는 ECMAScript 5 명세에 따라 설정 불가, 쓰기 불가 속성이다. 덮어쓰는 건 피하는 게 좋다. 값을 할당하지 않은 변수는 undefined 자료형이다. 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우에 undefined를 반환한다. 함수는 값을 명시적으로 반환하지 않으면 undefined를 반환한다.

 

https://flexiple.com/undefined-vs-null-javascript/#section1

Undefined vs Null - Javascript

undefined는 변수가 선언됐지만 아직 값이 할당되지 않았음을 의미한다. undefined는 그 자체로 타입이다. 할당되지 않은 변수는 자바스크립트에 의해 기본값이 undefined로 초기화된다. 반면 null은 객체다. 값이 없다는 표현으로 변수에 할당할 수 있다. 자바스크립트는 값을 null로 설정하지 않는다

 

https://helloworldjavascript.net/pages/160-null-undefined.html

null과 undefined | JavaScript로 만나는 세상

자바스크립트에는 '없음'을 나타내는 값이 2개 있는데 null과 undefined다. 두 값의 의미는 비슷하지만 각각 사용되는 목적, 장소가 다르다. 자바스크립트는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다. null은 '객체가 없음'을 나타낸다. 실제로 typeof 연산을 해보면 아래의 값을 반환한다

typeof null // 'object'
typeof undefined // 'undefined'

비록 undefined가 '없음'을 나타내는 값이라도 대입한 적 없는 변수 혹은 속성과 명시적으로 '없음'을 나타내는 경우를 구분할 수 있어야 코드 의미가 명확해질 것이다. 프로그래머 입장에서 명시적으로 부재를 나타내고 싶다면 항상 null을 쓰는 게 좋다. 다만 객체를 쓸 때 어떤 속성의 부재를 null을 통해 나타내는 것보다 그 속성을 정의하지 않는 방식이 더 간편해서 널리 사용된다

 

undefined는 이름 그대로 타입이 정해지지 않아서 undefined로 이름 붙었고, null은 null이라는 타입과 값을 할당받아서 그 자체로 '값이 없음'을 나타내는 객체라고 이해했다.

그럼 undefined와 null을 비교해보면 어떤 값이 나올까? 정답은 true가 나오게 된다. 그 이유는 아래 블로그에서 설명하고 있다.

 

https://siyoon210.tistory.com/148

Javascript의 undefined는 정확히 무슨 뜻일까? (null vs undefined)

undefined == null을 비교하면 true가 나온다. 이는 자바스크립트 == 연산자의 자동 형변환 기능 때문이다. 자바스크립트에서 숫자 1과 문자 '1'을 비교할 때 == 연산자를 쓰면 true가 나오지만 타입까지 검사하는 === 연산자를 쓰면 false가 나오게 된다. 이와 유사하게 undefined와 null도 == 연산자와 === 연산자 결과가 다르게 나온다

 

그럼 자바스크립트에서는 null check를 어떻게 수행할까? 위에 링크로 걸어둔 사이트에서는 아래와 같이 말한다.

 

https://helloworldjavascript.net/pages/160-null-undefined.html

null과 undefined | JavaScript로 만나는 세상

null이나 undefined는 어떤 변수에도, 속성에도 들어있을 수 있기 때문에 우리는 코드를 짤 때 값이 있는 경우, 없는 경우(=null 혹은 undefined인 경우)를 모두 고려해 코드를 짜야 할 필요가 있다...(중략)...null check는 간단히 등호를 써서 할 수 있다

function printIfNotNull(input) {
  if (input !== null && input !== undefined) {
    console.log(input);
  }
}

그런데 매번 위처럼 긴 비교를 해야 하는 건 골치아픈 일이다. 위 if문 안의 식을 아래처럼 줄여 쓸 수 있다

// 아래 세 개의 식은 완전히 같은 의미다
input !== null && input !== undefined;
input != null;
input != undefined;

// 아래 세 개의 식은 완전히 같은 의미다
input === null || input === undefined;
input == null;
input == undefined;

자바스크립트에는 2글자 짜리 등호도 있다. 3글자, 2글자 등호의 공식 명칭은 strict equality comparison operator, abstract equality comparison operator다. 대개 ===는 값이 정확히 같을 때 true 값을 반환하고 ==는 그렇지 않을 때가 많다. 그래서 보통 ===를 쓰는 게 권장된다. 다만 null check할 때 만큼은 ==를 쓰는 게 편리하다