JavaScript? (1) - JavaScript의 정의

용스·2022년 5월 20일
0

JavaScript

목록 보기
1/5

JavaScript?

C언어에 익숙한 나에게 JavaScript란 매우 신선한 충격이었다.
변수 타입을 정해주지 않아도 되었고, 가끔은 아무 곳에서 작성해도 되는 것처럼 보였으니까..
이번 시간에 한번 전체적인 부분을 정리하고 넘어가려 한다.

1. JavaScript = loosely typed Dynamic language

흔히 다들 JavaScript를 'loosely typed dynamic language'라고 표현한다. ( 실제로 MDN에서도 그렇게 정의하고 있다. )


느슨한 타입의 동적 언어.. 즉, 변수를 사용할 때 특별한 타입을 지정하지 않아도 된다는 의미이다.

let value = 10; // 이렇게 숫자일 수도 있고
value = 'test'; // 이렇게 되면 문자열이 되고
value = true;	// 이렇게 되면 boolean 이 된다.

이렇게 한가지 변수에 할당되는 값에 따라 변수의 타입이 지정된다.

2. JavaScript = 암시적( 묵시적 ) 형변환 + 명시적 형 변환

JavaScript가 느슨한 타입의 동적 언어의 특성 중 하나가 바로 형 변환이다.

2-1. 암시적( 묵시적 ) 형 변환

JavaScript 엔진이 필요에 따라 판단하여 데이터 타입을 자동으로 변환하는 것을 말한다.

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-2. 명시적 형 변환

개발자가 의도를 가지고 데이터 타입을 변환하는 것이다.
여러가지 방법이 있지만, 기본적으로 Number(), String(), Boolean() 등의 함수를 이용하여 어떤 데이터 타입으로 변환할지 정해주는 것이다.

let value = "100";

value = Number( value );
console.log( typeof value );
// 출력 결과 : number

value = String( value );
console.log( typeof value );
// 출력 결과 : string

value = Boolean( value );
console.log( typeof value );
// 출력 결과 : boolean

3. loosely typed Dynamic language.. 이대로 좋을까?

느슨한 타입의 동적 언어.. JavaScript.
과연 이대로 좋은걸까?

장점
변수 타입을 미리 선언하지 않아도 된다.

그렇다면 다른 사람과 협업하여 사과가 10개이면 10을 출력하는 프로그램을 작성한다고 하자.

// 나는 apple를 String로 사용할꺼야
let apple = '10';

// ------------ 10,000 line 뒤 ------------- //

// 팀원A, apple는 당연히 나이니까 Number로 처리해야겠다.
if( apple === 10 ){
  console.log(`사과는 ${apple}입니다.`);
}
else{
  console.log(`사과는 10개가 아닙니다.`);
}
// 출력 결과 : 사과는 10개가 아닙니다.

이렇듯 본인이 작성하지 않으면 타입을 알 수 없기 때문에 협업이나 프로젝트 진행시에 예상치 못한 에러가 발생할 수 있다. ( 또한, 수만 줄의 코드에서 이걸 찾아내기란 매우 힘들다. )

이걸 해결할 수 있는 방법이 없을까??

물론 JavaScript에서는 =====로 비교하여 자료형을 구분할 수도 있다.

2-1. ==? ===?

C언어는 int,float,double 등 사용하기 전에 자료형에 신경을 많이 써야했다.
하지만 JavaScript는 선언해줄 필요가 없으니 얼마나 편할까? 라고 생각했지만 다음과 같은 문제가 있었다.

다음 코드를 비교해보자

let val = '1';
let val2 = 1;

let test = undefined;
let test2 = null;

if( val == val2 ){
  console.log("두개는 같다~~");
}
else{
  console.log("두개는 같지 않다~~");
}
// 출력 결과 : 두개는 같다~~
if( test == test2 ){
  console.log("두개는 같다~~");
}
else{
  console.log("두개는 같지 않다~~");
}
// 출력 결과 : 두개는 같다~~

놀랍게도 true를 반환한다. 이렇듯 자료형이 분명히 다르지만 값을 비교하면 true를 반환한다.

다음 코드를 보자.

let val = '1';
let val2 = 1;

let test = undefined;
let test2 = null;

if( val === val2 ){
  console.log("두개는 같다~~");
}
else{
  console.log("두개는 같지 않다~~");
}
// 출력 결과 : 두개는 같지 않다~~
if( test === test2 ){
  console.log("두개는 같다~~");
}
else{
  console.log("두개는 같지 않다~~");
}
// 출력 결과 : 두개는 같지 않다~~

이번에는 false를 반환한다. 이는 무슨 차이일까?
바로 비교 연산자인 =====의 차이이다.

==는 Equal Operator이고, ===는 Strict Equal Operator이다.

==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.

===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이며 자료형과 값까지 한꺼번에 비교를 한다.

그러기 때문에 === 사용을 권장한다.

하지만 데이터 하나하나 매번 타입을 비교해서 처리할 수는 없다. 그러기 때문에 TypeScript를 사용하면 된다.

2-2. TypeScript?

JavaScript + Type = TypeScript
자료형에 Type을 명시할 수 있기 때문에 가독성을 높일 수 있고 오류를 쉽게 발견할 수 있다.
[참고 링크]

마치며

아직 JavaScript에 대해 많은 이해도가 있지 않아 상당수 오류가 있을 수 있습니다. 포스팅을 참고하시고 틀린 부분이 있으면 언제든지 댓글로 달아주세요.

profile
일단 해보자

0개의 댓글