검색결과 리스트
JavaScript 이야기에 해당되는 글 6건
- 2013.01.13 null과 undefined의 차이 3
- 2013.01.05 자바스크립트로 이미지 새로고침 하기
- 2012.12.17 자바스크립트 객체 생성과 리터럴 표기법
- 2012.12.14 자바스크립트 키코드
- 2012.11.17 자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것.
- 2012.11.17 자바스크립트에서 변수 타입에 관한 몇가지 알짜상식
글
자바스크립트는 데이터타입(자료형)에 대해 상당히 관대한 언어이다.
다른 언어가 변수를 선언 할 때 자료형까지 결정 하는 반면,
자바스크립트는 선언시 변수의 스코프(범위)와 존재만 설정하고,
할당 할 때 비로소 자료형이 결정된다.
(다른 언어를 했었는지 어떤 개발자가 변수를 선언하고 초기화를 하지 않으면
쓰레기 값이 된다고 하는 것을 보았는데, 자바스크립트에 대해 잘 모르고서 하는 소리인것 같다.)
그래서인지, 자바스크립트를 배우는 대부분의 사람들은, 그리고 가르치는 사람들은
자료형에 대한 고민을 거의 하지 않는 편이다.
고려하지 않아도
프로그래밍을 하는데 큰 문제가 없다(?)고 생각하는 것이다.
하지만 조금만 깊이있게 들어가면 자바스크립트도, 자료형에 대한 고민을 하지 않고서는
문제가 발생하는 경우가 많다.
그 예가 바로 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를 반환합니다. 이 경우 === 연산자(자료형까지 비교)를 사용하면 원하는 결과를 얻을 수 있습니다.
'JavaScript 이야기' 카테고리의 다른 글
자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
---|---|
자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
자바스크립트 키코드 (0) | 2012.12.14 |
자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
'JavaScript 이야기' 카테고리의 다른 글
null과 undefined의 차이 (3) | 2013.01.13 |
---|---|
자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
자바스크립트 키코드 (0) | 2012.12.14 |
자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
자바스크립트는 객체 중심 언어이다.
그래서 자바스크립트는 항상 변수를 만들고, 그 변수에 인스턴스(객체형 혹은 자료형 변수)를 생성하여 담아서 이용하는 것으로 부터 시작된다.
자바스크립트의 데이터 타입의 종류는 요약하면 다음과 같다.
-숫자(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 이야기' 카테고리의 다른 글
null과 undefined의 차이 (3) | 2013.01.13 |
---|---|
자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
자바스크립트 키코드 (0) | 2012.12.14 |
자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
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
'JavaScript 이야기' 카테고리의 다른 글
null과 undefined의 차이 (3) | 2013.01.13 |
---|---|
자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
자바스크립트에서 조건문을 쓸 때
일반적으로 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와 비슷한 효과를 주긴 하지만,
진정한 프로그래머라면 코드의 가독성을 높이는 명시적인 코딩을 해야하지 않을까?
'JavaScript 이야기' 카테고리의 다른 글
null과 undefined의 차이 (3) | 2013.01.13 |
---|---|
자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
자바스크립트 키코드 (0) | 2012.12.14 |
자바스크립트에서 변수 타입에 관한 몇가지 알짜상식 (0) | 2012.11.17 |
설정
트랙백
댓글
글
자바스크립트는 변수 타입에 대한 설정이 상당히 관대한 언어이다.
어떤 변수 타입에 관한 잘못을 저질렀을때 자바스크립트는 오류를 내보내는 것 대신에
숫자는 문자로, 문자는 또 숫자, 기타 등등 으로 상황에 따라 적절(?)하게 변화시켜준다.
필자가 코딩을 하며 경험한 자바스크립트 변수 타입 오토캐스팅에 관한 몇가지 사실들을 공유하고자 한다.
법칙 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이 등장했을 경우이다.
'JavaScript 이야기' 카테고리의 다른 글
null과 undefined의 차이 (3) | 2013.01.13 |
---|---|
자바스크립트로 이미지 새로고침 하기 (0) | 2013.01.05 |
자바스크립트 객체 생성과 리터럴 표기법 (0) | 2012.12.17 |
자바스크립트 키코드 (0) | 2012.12.14 |
자바스크립트에서 false를 의미하는 것, 그리고 true를 의미하는것. (0) | 2012.11.17 |
RECENT COMMENT