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


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

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

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

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

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


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

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


고려하지 않아도

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


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

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


그 예가 바로 undefinednull이다.


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

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



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를 반환합니다. 이 경우 === 연산자(자료형까지 비교)를 사용하면 원하는 결과를 얻을 수 있습니다.



여러 경우가 있겠지만,


익스플로러에서만 그 이미지가 렌더링 되지 않는다면..


이미지 형식이 CMYK로 저장되었는지  의심해보아야 한다.


간략하게 말하면 CMYK란 이미지의 색상 형식이 인쇄용으로 되어 있는 것인데,


익스플로러의 경우 CMYK이미지를 구동시켜 주지 못해서 이미지가 깨져버린다.

오늘 IE 관련 이미지 표시가 안되는 문제를 해결하다가,

imagesLoaded 플러그인이 IE에서 제대로 작동하지 않는다는 사실을 발견하였다.

(미쿡에서는 그닥 크게 신경 쓰지 않는 듯하다. 실제로 http://masonry.desandro.com/demos/images.html

에 가보면 현재도 IE에서 계속해서 문제가 발생한다.)

국내에서는 IE를 무시 할 수 없기에, 임시 방편으로 이미지를 새로고침해서 보정해주는 편법을 사용 하였는데,

(jQuery로 이미지 태그의 경로를 $('img').removeAttr('src').attr('src','test.jpg'); 이런 식으로 해주면 
이미지 새로고침이 이루어진다. )

그런데, 위 문제에선 중요한건 아니지만 크롬에서는 새로고침이 되지 않는 문제가 있었다.

검색해서 찾아보니, 크롬은 이미지가 새 주소가 아니면 이미지를 새로 불러오지 않는 특징이 있었다.
src를 제거하고, 다시넣든, 새로넣든 바뀌지 않는다.

이런 경우에는 이미지에 매개변수를 주어 다른 이미지인 것처럼 해 주면 된다.

$('img').removeAttr('src').attr('src','test.jpg'+'?number='+Math.random()*1000) ;

다음과 같이 하면 크롬에서도 새로고침이 잘 되는 것을 확인 할 수 있다.