JavaScript 특성, 자료형 알아보기

자유의여신·2022년 5월 16일

웹개발 요약

목록 보기

4/5

JavaScript란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.

HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.

자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.

JavaScript 특징

자바스크립트는 객체 기반의 스크립트 언어입니다.

자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
: 자바스크립트는 동적 타입 언어이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다.
: 타입스크립트는 정적 타입 언어이기 떄문에 컴파일 시간이 조금 걸리지만, 안정성이 보장됩니다.

자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.

※ C언어와 같은 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용합니다.
하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미합니다.
자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줍니다.

느슨한 타입(loosely typed)의 동적(dynamic) 언어

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.
자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다.
따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있습니다.
-> JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며,
모든 타입의 값으로 할당 (및 재할당) 가능합니다.

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를
‘동적 타입(dynamically typed)’ 언어라고 부릅니다.

let msg = "Spring";
msg = 7777;

JavaScript의 8가지 자료형

숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.

bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.

문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
: String 타입은 텍스트 데이터를 나타낼 때 사용합니다.
String은 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지합니다. 첫 번째 요소는 인덱스 0에, 그 다음 요소는 인덱스 1, 그 다음은 2, ...입니다. String의 길이는 그 안의 요소 수와 같습니다.

불린형 – true, false를 나타낼 때 사용합니다.

null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.

undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.

객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.

심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.

※ typeof 연산자는 피연산자의 자료형을 알려줍니다.
typeof x 또는 typeof(x) 형태로 사용 : 피연산자의 자료형을 문자열 형태로 반환합니다.
null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.

null과 undefined의 미세한 차이

1) ‘null’ 값

‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
※ 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.

let age = null;

2) ‘undefined’ 값

값이 할당되지 않은 상태’를 나타낼 때 사용합니다.
변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

let age;

alert(age); // 'undefined'가 출력됩니다.

==, === 둘의 차이는?

==
: Equality operator
: It checks tow operands are equal or not
: 변수 값을 기반으로 유형을 수정함 (서로 다른 유형의 두 변수의 [값]을 비교)

===
: Strict equality operator.
: It checks two operands are identical or not
: 변수 유형을 고려 ([값 & 자료형] 이 동일한 경우)

▶ 그렇다면 코드를 어떻게 적용하는게 좋을까?

변수를 비교하는 경우 항상 '===' 연산자를 사용할 것을 권장한다.
: 가능하면 직접 자료형을 변환하여 '==='을 활용하며 코드 가독성을 높이도록 하자.

JavaScript 형변환

자바스크립트는 타입이 매우 유연한 언어로 (Dynamic typing: dynamically type language - Runtime에서 type이 정해짐)
필요에 따라 ① 암시적 변환 또는 ② 명시적변환 (개발자의 의도에 따라) 진행한다.

1. 암시적 변환

산술연산자를 통해 암시적 변환이 가능하다.
: 더하기(+) 연산자는 숫자보다 문자열이 우선시 되기때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다. (문자 > 숫자)

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100

2. 명시적 변환

타입을 변경하는 기본적인 방법은 Object(), Number(), String(), Boolean() 와 같은 함수를 이용한다.

1) A Type → Number Type : 다른 자료형을 숫자타입으로

Number()는 정수형과 실수형의 숫자로 변환한다.

Number(“12345”); //12345
Number(“2”*2); //4

parseInt()는 정수형의 숫자로 변환한다.

parseInt(“27”) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(“ 2”); //2
parseInt(“ 2ㅎ”); //2
parseInt(“ ㅎ2”); //NaN

parseFloat()는 부동 소수점의 숫자로 변환한다.
parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

parseFloat(“!123”); //NaN
parseFloat(“123.123456”); //123.123456
parseInt(“123.123456”); //123
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN

2) A Type → String Type : 다른 자료형을 문자 타입으로

String()

String(123); //”123"
String(123.456); //”123.456"

toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.

var trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"

toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 0으로 길이를 맞춘 문자열을 반환한다.

var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"

3) A Type → Boolean Type : 다른 자료형을 불린 타입으로

Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지

type을 잘못 작성한 에러 찾는데 어려움이 있음
: 자바스크립트라는 언어는 해석하고 사용하기 위해서는 노드나 브라우저가 필요하다는 고유한 특수성 때문에, 인터프리터 언어로 여겨지기도 합니다. 실제로 사소한 오타 에러도 브라우저나 노드에 띄워서야 확인 가능함
: 직접 브라우저에 펼쳐보고 직접 렌더링이 된 후에 콘솔로 오류를 확인해야 함

해결방안 : typescript 사용

자바스크립트에서 정적 타입 체크와 강력한 문법을 추가한 컴파일 언어이기 때문에 컴파일 단계에서 보다 더 많은 것을 감지해 줍니다. 텍스트 편집기 + 자동완성 기능 제공으로만 사용하던 IDE가(ex) vscode가) 감지가능
: 오타 감지와 문법 체크는 물론이며, 타입 체크가 올바로 이루어지지 않거나, 무조건 null이나 undefined로 떨어지는 객체를 감지 등