javaScript/jsDeepDive 26

전역변수사용을 억제해야하는 이유?

# 변수의 목숨이 붙어있는 시간 딥다이브에선 이걸 변수의 생명주기라고 하는데.. 그냥 이 변수를 참조할수 있는 시간을 말한다. //존나 //오래 //걸리는 //코드1 var value = '멍청이'; //존나 //오래 //걸리는 //코드2 이런식으로 전역스코프에 변수 value를 선언하였다 이걸 그림으로 그려보면 자바스크립트는 선언부분을 다 끌어올린다. 그래서 모든 식별자에는 메모리주소가 연결되고 그곳에있는 값으로 참조할 수 있다. 그림을 좀 복잡하게 그렸는데 걍 전역에서 선언한 변수는 코드가 끝날때까지 참조할 수 있다는거다.. 사실 그림이 정확하지 않는데 순서대로라면 선언부분 var value부분만 먼저 실행되고 오래걸리는코드1동안 undefined로 참조되고, 그다음 value = '멍청이'재할당문이..

스코프에 관해서

# 스코프란 무엇일까? {} //블록레벨 스코프? function fuc(){} //함수레벨 스코프? 스코프를 대충 중괄호다 라고 생각하는 사람들도 있을거다. 스코프에 대해서 어떤것인지 정확히 생각해보자. # 스코프란 식별자가 유효한 범위다. // --우주어딘가(전역) { // --집밖 var dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 얜왜 테두리 검은색이냐 // --우주어딘가(전역) { // --집밖 let dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 요렇게 var이나 let으로 선언한 dog이라는 변수에 값으로 무찌가 바인딩 되어있다. 그리고 블록문을 중첩해서 써놨다. 대충 이름붙여서 우주/집밖/..

선언문에서 let var const를 빼고 선언한다면?

# 일반적인 선언문 let value = "바보"; console.log(value); 일반적인 선언문은 이렇게 생겼다. 그런데 자바스크립트는 ㅈ같이도 아래와 같은 코드도 동작한다. # let var const없이 선언한 변수 value = "바보"; console.log(value); 잘불러온다..ㅡㅡ 이걸 use strict와 같이쓰면 에러뿜어준다. 될수있으면 선언문을 쓸때 let const를 써서 변수선언을 하자. 파이썬에서 온 사람들은 이거 짜증날거다 ㅠ 근데 이건 변수선언이 아니다! # 이러한 경우에서 호이스팅은? console.log(value); value = "바보"; 없는 value를 참조하려했다고 에러뿜어준다. 이 코드가 변수선언으로 동작할때는 호이스팅이 된다고 볼수 없다.(아래에 더씀..

함수 호이스팅

# 호이스팅이란? https://jacobowl.tistory.com/136 변수 호이스팅, 그리고 초기화 initialize, Temporal Dead Zone 초기화는 변수선언시에 최초로 undefined가 할당이 되는것을 말한다. 먼저 그림으로 살펴보면, let value = 'hello world'; 라는 코드가 실행되면 먼저 식별자 value가 가르키는 메모리주소1이 생성되고 이 jacobowl.tistory.com 이전에 변수의 호이스팅에 대해서 포스팅을 했었다. 코드는 위에서 아래로 순차적으로 실행되지만 변수를 선언하기전에 참조가 가능한걸 변수호이스팅이라고 한다. 함수도 이렇게 정의(함수는 선언이 아니라 정의라고함)하기 이전에 호출이 가능한걸 함수 호이스팅이라고 한다. # 함수 선언문에서의 ..

함수의 진짜 이름

# 기명함수와 익명함수console.log(function fuc() { return "뿩!"; }, ": 기명함수/ 이름이 있는 함수래~"); console.log(function () { return "뿩!"; }, ': 익명함수/ 이름이 없는 함수래~');둘다 함수리터럴로 평가되서 함수객체를 참조한다. 기명함수와 익명함수를 함수리터럴로 참조해서 콘솔로찍어보면 저렇게 참조한다. 브라우저에서 console.dir로 보면 명확히 알 수 있다.브라우저상에서 console.dir로 프로퍼티들을 살펴보면 name을 키로 갖는 프로퍼티에 기명함수는 'fuc'라는 스트링이 값으로 나와있고, 익명함수는 그냥 빈 스트링 ""이 나와있다. # 함수이름console.dir(function fuc() { return "뿩..

함수 리터럴에 대해서

# 먼저 리터럴에 대해서 다시 살펴보자. https://jacobowl.tistory.com/137 값(value), 리터럴(literal), 표현식(expression), 문(statement)# 리터럴(literal) 리터럴은 사람이 알아보는 기호로 적은 표기법을 말한다. 이전 '메모리에 저장되는 기본구조' 포스팅에서 컴퓨터는 데이터를 2진법으로 저장한다고 했었다. 메모리에 저장되는 jacobowl.tistory.com 위 포스팅에서 리터럴에 대해서 설명을 했었다. 리터럴이란 우리가 직접 vs코드에 치는 사람이 알아볼수 있는 코드이고, 이 리터럴이 자바스크립트엔진에의해 평가되어 메모리에 값으로 저장된다. 리터럴은 표현식에 포함된다. # 함수는 객체다 https://jacobowl.tistory.com..

primitive타입, object타입 mutable(변경가능함)

원시타입은 흔히 우리가 변수에 할당하는 스트링 넘버 등이 있고, 객체타입은 말그대로 객체타입이다. 어레이, 객체, 함수등이 있다. 원시타입과 객체타입은 근본적으로 메모리접근,참조방법에서 다르다. # 원시타입의 메모리 활용방법 원시타입인 값은 그냥 뭐 스트링 숫자 이런거다.. 뭐 이전 포스팅에서 오지게 설명했던 부분이다. 변수(식별자)는 메모리주소랑 연결되어있고 이 메모리주소는 실제 데이터가 들어있는 공간에 접근하여 데이터를 가져온다. # 원시타입은 immutable(변경불가능한)값이다!! let value = 'muzzi'; value = 'dori'; 예시로 이 코드에서 메모리공간이 활용되는 것을 보자. 참고로 우리집 개들 이름이 무찌랑 도리다.. 앞으로 자주보게될거다.. 맨처음 value를 선언할때 ..

자바스크립트가 숫자데이터를 저장하는 방식 // 64비트 부동소수점

# deepdive에는 없는 내용이다 공부를 하다가 메모리에는 데이터가 2진법의 수로 저장이 된다고 하는데, 숫자데이터는 8바이트, 즉 64비트(1바이트=8비트)로 저장이 된다고 하였다. 그럼 2의 64승가지의 데이터가 저장이 될 수 있다는 말인데, 이렇게 많은 데이터를 표현할수 있는 공간은 어떻게 숫자를 표현할까? 라는 생각에 포스팅을 쓰게되었다. # 자바스크립트 deep dive에서 표현한 방식딥다이브에선 숫자가 이렇게 저장이 된다고 하였는데 물론 집필자쌤도 이건 그냥 예시라고 하였다. 그리고 64비트 부동소수점 방식으로 저장이 된다고 하였는데 사실 저 그림만봐도 맨아래 1바이트 공간빼고 나머지는 걍 다 0으로 채워져있어서 가성비 한남충인 나로써는 저 공간들이 너무 아까웠고 이해를 못하고 넘어가는게 ..

논리 곱, 논리 합 연산자의 작동방식

# 논리합 연산자 (||) OR연산자console.log( true || false )OR연산자는 뭐 다들 학창시절 수학시간에 안졸았다면 뭔지 다 알것이다. 여러 조건에서 참이 하나라도 있으면 전체적으로 참이 되는것이다. 정리하면 console.log(true || true); // true console.log(true || false); //true console.log(false || true); // true console.log(false || false); //false뭐이렇다, 이런것까지 설명하는건 귀찮지만 걍 써본다. 위의 코드에선 단순히 boolean값을 논리곱으로 써놨다. 그럼 여러 자료형으로 써본다면 콘솔값은 어떻게 변할까?console.log(0 || 1); //1 console.l..

전위연산자 & 후위연산자 (+엘리스 토끼굴에 빠진 var)

사실 이건 중요한건 아닌데 모던 js 읽을때 헷갈렸던 부분이다. # 후위연산자 let num = 1; console.log(num++, " #A"); // 1 #A console.log(num, " #B"); // 2 #B 일단 num에 1을 할당하고 여기에 후위연산자를 붙여서 콘솔로 찍어보면 A부분에 1로 뜬다. 응? 난 분명 1을 증가시켰는데? 그래서 B에서 다시 num을 참조하려고 하면 증가된 2를 볼 수 있다. # 전위연산자 let num = 1; console.log(++num, " #A"); // 2 #A console.log(num, " #B"); // 2 #B 이곳에선 결과가 다르게 뜬다. # 두 차이는 무엇일까? - 후위 연산자는 원래 num의 값을 가지고 있어서 참조시에는 원래 num의..