Coding Story

자바스크립트는 데이터타입(자료형)에 대해 상당히 관대한 언어이다. 

다른 언어가 변수를 선언 할 때 자료형까지 결정 하는 반면, 

자바스크립트는 선언시 변수의 스코프(범위)와 존재만 설정하고, 

할당 할 때 비로소 자료형이 결정된다.

(다른 언어를 했었는지 어떤 개발자가 변수를 선언하고 초기화를 하지 않으면

쓰레기 값이 된다고 하는 것을 보았는데, 자바스크립트에 대해 잘 모르고서 하는 소리인것 같다.)

그래서인지, 자바스크립트를 배우는 대부분의 사람들은, 그리고 가르치는 사람들은

자료형에 대한 고민을 거의 하지 않는 편이다. 

고려하지 않아도

프로그래밍을 하는데 큰 문제가 없다(?)고 생각하는 것이다.

하지만 조금만 깊이있게 들어가면 자바스크립트도, 자료형에 대한 고민을 하지 않고서는

문제가 발생하는 경우가 많다.

그 예가 바로 undefined와 null이다.

많은 사람들이 이 두가지를 구분하지 못해서 어려움을 겪는 경우가 있는데, 

이 둘은 다음과 같은 차이가 있다.

undefined -> 변수를 선언만 하고 값을 할당하지 않음.

즉, 자료형이 결정되지 않은 상태이다.

(선언하지 않은 변수도 콘솔이나 기타 메세지에는 undefined라고 뜨지만,

undefined라는 값을 가지는 것은 아니다.) 

null -> 변수를 선언하고, 'null'이라는 빈 값을 할당한 경우이다.

(이 '빈 값'의 경우 자료형에 따라 여러가지가 있지만,

null은 객체형 데이터-ex: array, object-의 빈 값을 의미한다.

문자열(string)의 경우 '', 숫자(number)의 경우 0이 빈값이고,

이들 빈값 모두는 if문에서 false로 형 변환된다.)

다시말해서, undefined는 자료형이 결정되지 않은 변수이고,

null은 자료형은 객체인데, 비어있는 변수이다.

++추가

-------------

이 글을 본 지인이 왜 그러면 console.log(undefined==null)이 true냐고 반박을 해서

글을 추가합니다. 

비교연산자 ==는 자료형이 다르면 자동 형변환으로 자료형을 강제로 맞춰서 비교하는 비교연산자입니다.

undefined와 null(object)은 자료형이 다르니 자바스크립트 엔진에서 알아서 통일해서 둘다 값이 없는거니까

true를 반환합니다. 이 경우 === 연산자(자료형까지 비교)를 사용하면 원하는 결과를 얻을 수 있습니다.

자바스크립트는 객체 중심 언어이다.

그래서 자바스크립트는 항상 변수를 만들고, 그 변수에 인스턴스(객체형 혹은 자료형 변수)를 생성하여 담아서 이용하는 것으로 부터 시작된다.

자바스크립트의 데이터 타입의 종류는 요약하면 다음과 같다.

-숫자(number)

 ex ) var no = new Number(); (기본 값은 0)

-문자열(string)

 ex ) var str = new String();

-참거짓(boolean)

 ex ) var isTrue = new Boolean();(기본 값은 false)

-객체(object) 

  ex ) var obj = new Object();

-함수(function)

 ex ) var func = new function(){};

-배열(array)

 ex ) var arr = new Array();

-정규식(regexp)

 ex ) var reg = new RegExp();

그런데, 이 객체들을 생성 할 떄 

우리는 생성 연산자 'new'를 이용하여 생성 한 후, 그 다음 라인에

생성한 객체(혹은 자료)에 대한 정보를 추가로 담는 식으로 활용한다.

여기까지가 자바스크립트에서의 변수의 유형과 생성 방법이다.

그런데, 자바스크립트와 같은 객체 중심, 혹은 지향 언어에서는 객체의 리터럴(literal) 표기법을 지원하게 되는데,

이 리터럴이라는 것의 사전적 의미를 보면 '문자 그대로의' 라는 의미이다.

즉, (위에서 예제를 살펴봤던 순서대로) 자바스크립트에서 리터럴 표기법을 살펴보면 다음과 같다.

var no=3;

var str='';

var isTrue=true;

var obj={nation:'korea',age:15};

var func=function(){
}

var arr=[];

var reg=/[a-z]/g;

사실, 우리가 흔히 써오던 변수를 선언하고, 데이터를 담는  일반적인 방식이다.

그런데, 이렇게 쓰면 무언가 정규적이지 않고, 비 공식적인 것 같으며, 심지어

성능을 저하하는 코딩을 하고있다는 느낌이 들기도 한다.

위의 방식처럼 'new' 연산자를 이용하여 먼저 객체를 만들고, 그 값을 수정 해 나가는 것이

정규적이고, 절차를 지키는 방법이며, 성능 향상에 기여하는 것처럼 보인다. 

하지만 우리가 생각 한 것과 다르게 리터럴 표기법은 비 정규적인 (흔히 말하는 야매)도 아니고,

성능 저하를 불러오지도 않으며, 코드는 더 짧으며, 엔진의 해석 속도 면에서도 오히려 더 빠르다.

몇가지 장점이 있는데, 우선 코드가 더 짧으며, (몇 바이트, 몇 라인이라도 줄지 않겠는가?),

자바스크립트 인터프리터의 해석분량도 줄어들며,(데이터를 생성 함과 동시에 담는다. 위의 생성방식으로는 먼저

생성을 한 후, 데이터를 한땀한땀 담아야 한다.) 더 쉽고,  더 빠르다.(실제로 소위 말하는 모던브라우저들의 엔진에서는

자바스크립트의 리터럴 표기법에 대한 최적화가 되어있다고 한다.)

조금은 복잡한 내용이지만 동적 데이터 접근에 대한 호환성도 제공한다.

(이는 new 연산자를 이용하여 인자를 동적으로 제공 할 시 문제가 생기기도 한다는 이야기가 있다.)

어쨌든 결론은 '생성자 사용을 지양하고 리터럴 표기법을 사용하자'라는 것이다.

JavaScript event.keyCode 자바스크립트 이벤트 키코드표

---------------------------------------

키코드표

---------------------------------------

←(백스페이스) = 8

TAB = 9

ENTER = 13

SHIFT = 16

CTRL = 17

ALT = 18

PAUSEBREAK = 19

CAPSLOOK = 20

한/영 = 21

한자 = 25

ESC = 27

스페이스 = 32

PAGEUP = 33

PAGEDN = 34

END = 35

HOME =36

←(중간) = 37

↑(중간) = 38

→(중간) = 39

↓(중간) = 40

INSERT = 45

DELETE = 46

0 = 48

1 = 49

2 = 50

3 = 51

4 = 52

5 = 53

6 = 54

7 = 55

8 = 56

9 = 57

A = 65

B = 66

C = 67

D = 68

E = 69

F = 70

G = 71

H = 72

I = 73

J = 74

K = 75

L = 76

M = 77

N = 78

O = 79

P = 80

Q = 81

R = 82

S = 83

T = 84

U = 85

V = 86

W = 87

X = 88

Y = 89

Z = 90

윈도우(왼쪽) = 91

윈도우(오른쪽) = 92

기능키 = 93

0(오른쪽) = 96

1(오른쪽) = 97

2(오른쪽) = 98

3(오른쪽) = 99

4(오른쪽) = 100

5(오른쪽) = 101

6(오른쪽) = 102

7(오른쪽) = 103

8(오른쪽) = 104

9(오른쪽) = 105

.(오른쪽) = 110

/(오른쪽) = 111

*(오른쪽) = 106

+(오른쪽) = 107

-(오른쪽) = 109

F1 = 112

F2 = 113

F3 = 114

F4 = 115

F5 = 116

F6 = 117

F7 = 118

F8 = 119

F9 = 120

F10 = 121

F11 = 122

F12 = 123

NUMLOCK = 144

SCROLLLOCK = 145

=(중간) = 187

-(중간) = 189

`(왼쪽콤마) = 192

\(중간) = 220

자바스크립트에서 조건문을 쓸 때

일반적으로 if 문 안에 true,또는 false가 올 만한

값을 넣고 사용을 한다.

하지만 자바스크립트가 허용해주는 예외가 있다.

그것은 바로 0, undefined, NaN, null , ''(빈문자열), [](빈 배열) 등 무언가 공백이나 오류를 의미하는 값은 false로 인식,

 값이 있는 상수, 값이 있는 변수 등은 true로 인식한다. 

예컨대 

if (3)

{
}

는 항상 실행되는 문장이다.

이 사실을 어떻게 활용할수 있을까?

첫번째로는 값의 존재 유무를 체크하는 것이다.

예컨대 

if (document.getElementById('test'))

{

}

라 하면, "document 상에 test라는 아이디를 가진 엘리먼트가 존재하면 중괄호내 문장을 실행"이

라는 의미가 되는것이다.

또한가지는, 우리가 흔히 사용하는

return;, 또는 return 0;

이라는 문장. 보통은 이 문장을 기점으로 이벤트를 중지시키려고 사용하지만,

return false; 가 좀더 명시적이고 올바른 표현이다.

return 0, return이 분명 자바스크립트 상에서 return false와 비슷한 효과를 주긴 하지만, 

진정한 프로그래머라면 코드의 가독성을 높이는 명시적인 코딩을 해야하지 않을까?

자바스크립트는 변수 타입에 대한 설정이 상당히 관대한 언어이다.

어떤 변수 타입에 관한 잘못을 저질렀을때 자바스크립트는 오류를 내보내는 것 대신에

숫자는 문자로, 문자는 또 숫자, 기타 등등 으로 상황에 따라 적절(?)하게 변화시켜준다.

필자가 코딩을 하며 경험한 자바스크립트 변수 타입 오토캐스팅에 관한 몇가지 사실들을 공유하고자 한다.

법칙 1) 문자열 + 숫자 ->숫자가 더해진 문자열

예컨대

var x='abc';

var y=3;

alert(x+y);     // 'abc3' 출력

가장 기본적인 사실로, 대부분의 웹개발자가 할고있는 사실이다.

법칙 2) 비교연산자를 사용할 때 숫자vs문자를비교하면 문자열을 자동으로 숫자로 변환하여 비교해준다.

3>'4'를 비교하면 false라는 결과가 출력될 것이다.

법칙 3) 비교연산자를 사용할 때 문자열인 숫자 둘을 비교할 때,

자릿수가 같으면 올바로 연산을 해주나, 자릿수가 다르면 문자열로 인식하여 비교한다.

예컨대 '3000'>'2500'의 결과는 true이나, '3000'>'500'은 false이다.

----> 자바스크립트에서 문자열을 비교할 때는 문자열의 유니코드 값을 비교한다.

'3000'>'500'인 이유는 3보다 5가 유니코드 값이 더 크기때문이다.

법칙 4) 두 식중 하나가 NaN이면 항상 false를 반환한다.

물론 이경우는 숫자와 문자열을 비교했을때 자바스크립트가 믄자열인쪽을 숫자로

변환하다 NaN이 등장했을 경우이다.