수라의 티스토리

var와 let과 호이스팅

수라 — Thu, 25 Aug 2022 09:39:07 +0900

잡설 : 한동안 실무를 놨더니 기본개념부터 가물가물하다. 나 스스로를 위해 기초부터 다시 되짚어보고자 한다..

var는 es6 이전 변수를 정의할때 사용하는 구문

자비로운 javascript 덕분에 var는 오류가 날것 같은 상황에서도 에러를 내뱉지 않음

예를 들어.. 첫번째 케이스를 보자.

console.log(a);
var a = 0;
console.log(a);

// 결과
undefined
0

해당 코드는 일반인이 봤을땐 코드 순서대로 실행할것 같다고 판단하겠지?? java나 C++에서도 그렇게 판단할것 같다.

근데 javascript는 최초 브라우져 엔진이 코드에 접근했을때 변수나 함수 선언된 놈들을 끄집어내 메모리에 저장한다.

최상단 전역으로 올리는 행위 즉 호이스팅 한다고 표현한다.

그렇다보니 console을 실행하기 전에 변수 a를 선언한걸 먼저 호이스팅 하기 때문에 undefined가 출력된다.

이루 a를 0으로 할당하고 두번째 console을 실행할때 0의 값이 출력되는것

또는 이런 경우도 있다... 두번째 케이스.

for (var i=0; i < 5; i++) {
    console.log(i)
}
console.log(i)

// 결과
0
1
2
3
4
5

저기서 변수 i는 지역변수다. 전역에서 접근되면 안되는..

근데 보는바와 같이 접근이 가능해서 5가 출력된다.

var로 선언된 지역변수는 function에서만 보장된다는 블라블라....

이걸 보완하고자 나온게 let

첫번째 케이스를 let으로 바꿔보자

console.log(a);
let a = 0;
console.log(a);

// 결과
Uncaught ReferenceError: a is not defined at <anonymous>

에러가 난다. a는 아직 정의되지 않았다고..

var와 마찬가지로로 호이스팅은 한다. 대신 접근할 수 없는 TDZ라는 곳에 임시저장된 뒤 선언할때 접근 가능한 저장소로 옮겨진다고 한다.

for (let j=0; j < 5; j++) {
    console.log(j)
}
console.log(j)

// 결과
0
1
2
3
4
Uncaught ReferenceError: j is not defined at <anonymous>

위와 마찬가지 에러가 난다.

이걸 통해 var와 let의 차이.. 그리고 호이스팅이 뭔지 개념에 대해 이해해보자.

브라우저 핵 종결자

수라 — Thu, 6 Oct 2016 17:45:22 +0900

[출처]http://naiyumie.inour.net/archives/2471

Internet Explorer -인터넷 익스플로러

Selector Hacks

/* IE 6 and below */
* html .selector {}
.suckyie6.selector {} /* .suckyie6 can be any unused class */

/* IE 7 and below */
.selector, {}

/* IE 7 */
*:first-child+html .selector {}
.selector, x:-IE7 {}
*+html .selector {}

/* Everything but IE 6 */
html > body .selector {}

/* Everything but IE 6/7 */
html > /**/ body .selector {}
head ~ /* */ body .selector {}

/* Everything but IE 6/7/8 */
:root *> .selector {}
body:last-child .selector {}
body:nth-of-type(1) .selector {}
body:first-of-type .selector {}
Property ⁄ Value Hacks

/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }

/* IE 6/7 – any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* … */

/* IE 6/7 – acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */

/* IE 8/9 */
.selector { color: blue\0/; }
/* must go at the END of all rules */

/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; }

/* Everything but IE 6 */
.selector { color/**/: blue; }

Media Query Hacks

/* IE 6/7 */
@media screen\9 {}

/* IE 6/7/8 */
@media \0screen\,screen\9 {}

/* IE 8 */
@media \0screen {}

/* IE 8/9/10 & Opera */
@media screen\0 {}

/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {}

/* IE 9/10 */
@media screen and (min-width:0\0) {}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {}

JavaScript Hacks

/* IE <= 8 */
var isIE = ‘\v’==’v’;

/* IE 6 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 6]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 7 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 7]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;
navigator.appVersion.indexOf(“MSIE 7.”)!=-1

/* IE 8 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 8]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 9 */
(checkIE = document.createElement(“b”)).innerHTML = “<!–[if IE 9]> var isIE = checkIE.getElementsByTagName(“i”).length == 1;

/* IE 10 */
var isIE = eval(“/*@cc_on!@*/false”) && document.documentMode === 10;

/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

Firefox -파이어폭스

Selector Hacks

/* Firefox 1.5 */
body:empty .selector {}

/* Firefox 2+ */
.selector, x:-moz-any-link {}

/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {}

/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {}

Media Query Hacks

/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {}

/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {}

/* Firefox 4+ */
@media screen and (min–moz-device-pixel-ratio:0) {}

JavaScript Hacks

/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 – 13 */
var isFF = !!window.globalStorage;

/* Firefox 2/3 */
var isFF = /a/[-1]==’a’;

/* Firefox 3 */
var isFF = (function x(){})[-5]==’x’;
Miscellaneous

/* Firefox 3+ */
@-moz-document url-prefix() {}

Chrome -크롬

Selector Hacks
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {}

Media Query Hacks
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

JavaScript Hacks
/* Chrome */
var isChrome = !!window.chrome;

Safari -사파리

Selector Hacks

/* Safari 2/3 */
html[xmlns*=””] body:last-child .selector {}
html[xmlns*=””]:root .selector {}

/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=””] .selector {}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {}

Media Query Hacks
/* Safari 3+, Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {}

JavaScript Hacks
/* Safari */
var isSafari = /a/.__proto__==’//’;

Opera -오페라

Selector Hacks

/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=””] .selector {}

/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {}

Media Query Hacks

/* Opera 7 */
@media all and (min-width: 0px){}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}

/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {}

/* Opera, IE 8/9/10 */
@media screen {}

JavaScript Hacks
/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);

/* Opera 12- */
var isOpera = !!window.opera;

마우스 휠 이벤트 체크

수라 — Wed, 5 Oct 2016 10:31:08 +0900

출처: http://recoveryman.tistory.com/120

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll', function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
 

Colored by Color Scripter

OS & 버젼 체크

수라 — Fri, 24 Apr 2015 15:34:31 +0900

/* OS & 버젼 체크 */

[coc]10홀 클랜전 맵

수라 — Thu, 16 Apr 2015 17:06:13 +0900