JavaScript 정리

 🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

JavaScript만의 특성

• 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
• 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
• 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
• 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
  : 자바스크립트는 동적 타입 언어이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다.
  : 타입스크립트는 정적 타입 언어이기 떄문에 컴파일 시간이 조금 걸리지만, 안정성이 보장됩니다.
• 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.

---

느슨한 타입(loosely typed)의 동적(dynamic) 언어

느슨한 타입은 타입 없이 변수를 선언하는 것이다.

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다.
자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다.
따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.
-> JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며,
모든 타입의 값으로 할당 (및 재할당) 가능하다.

• 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를
  ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.

 

 

---

==, ===

JavaScript에서 값을 비교하기 위해 == 연산자와 === 연산자를 사용합니다.

 

두 연산자는 값이 일치하면 true를 반환하며, 값이 일치하지 않으면 false를 반환합니다.

 

== 연산자

JavaScript는 타입 변환에 대해 유연하게 동작합니다.

 

== 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교합니다.

 

타입을 비교하지 않으므로 === 연산자에 비해 느슨하다고 할 수 있습니다.

 

=== 연산자

== 연산자는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교하였습니다.

 

하지만, === 연산자는 타입을 변환하지 않으므로 == 연산자에 비해 비교하는 방식이 엄격합니다.

 

즉, === 연산자는 타입이 다르면, false를 반환합니다.

 

=== 연산자의 특징

• NaN 값은 자기 자신을 포함하여 어떠한 값과도 일치하지 않습니다. 즉, === 연산자에 NaN 값이 존재하는 경우 항상 false입니다.
• 정확한 문자열을 비교하기 위해서는 localeCompare 메서드를 사용하는 것이 좋습니다. 문자열은 눈으로 보았을 때, 동일하더라도 인코딩 방식이 다르게 되어있을 수 있기 때문입니다.

출처: https://developer-talk.tistory.com/184 [평범한 직장인의 공부 정리:티스토리]

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

 

type을 잘못 작성한 에러 찾는데 어려움이 있음
: 자바스크립트라는 언어는 해석하고 사용하기 위해서는 노드나 브라우저가 필요하다는 고유한 특수성 때문에, 인터프리터 언어로 여겨지기도 합니다. 실제로 사소한 오타 에러도 브라우저나 노드에 띄워서야 확인 가능함
: 직접 브라우저에 펼쳐보고 직접 렌더링이 된 후에 콘솔로 오류를 확인해야 함

동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워진다.

이러한 불편함을 해소하기 위해 타입스크립트나 Folw등을 사용할 수 있다.

[출처] JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?|작성자 은둥이

undefined와 null의 미세한 차이들을 비교해보세요.

undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다.
따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

typeof null // 'object'
typeof undefined // 'undefined'
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

#undefined

undefined는 원시값(Primitive Type)으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다.

cf) undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다.

아래의 경우에 변수가 undefined를 반환한다.

• 값을 할당하지 않은 변수
• 메서드와 선언에서 변수가 할당받지 않은 경우
• 함수가 값을 return 하지 않았을 때

#null

null은 원시값(Primitive Type) 중 하나로, 어떤 값이 의도적으로 비어있음을 표현한다. undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.

cf) null은 undefined처럼 전역 객체의 속성 중 하나가 아니라 리터럴 값이다

출처: https://2ssue.github.io/common_questions_for_Web_Developer/docs/Javascript/13_undefined&null.html#undefined

---

🐤 JavaScript 객체와 불변성이란 ?

javascript의 원시 타입(primitive data type)은 변경 불가능한 값(immutable value)이다.

• Boolean
• null
• undefined
• Number
• String
• Symbol (New in ECMAScript 6)

원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다. 즉, 객체는 새로운 값을 다시 만들 필요없이 직접 변경이 가능하다는 것이다.

예를 들어 살펴보자. C 언어와는 다르게 Javascript의 문자열은 변경 불가능한 값(immutable value) 이다. 이런 값을 “primitive values” 라 한다. (변경이 불가능하다는 뜻은 메모리 영역에서의 변경이 불가능하다는 뜻이다. 재할당은 가능하다)

아래의 코드를 살펴보자.

var str = 'Hello';
str = 'world';

첫번째 구문이 실행되면 메모리에 문자열 ‘Hello’가 생성되고 식별자 str은 메모리에 생성된 문자열 ‘Hello’의 메모리 주소를 가리킨다. 그리고 두번째 구문이 실행되면 이전에 생성된 문자열 ‘Hello’을 수정하는 것이 아니라 새로운 문자열 ‘world’를 메모리에 생성하고 식별자 str은 이것을 가리킨다. 이때 문자열 ‘Hello’와 ‘world’는 모두 메모리에 존재하고 있다. 변수 str은 문자열 ‘Hello’를 가리키고 있다가 문자열 ‘world’를 가리키도록 변경되었을 뿐이다.

 

다른 예를 알아보자.

var user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var myName = user.name; // 변수 myName은 string 타입이다.

user.name = 'Kim';
console.log(myName); // Lee

myName = user.name;  // 재할당
console.log(myName); // Kim

user.name의 값을 변경했지만 변수 myName의 값은 변경되지 않았다. 이는 변수 myName에 user.name을 할당했을 때 user.name의 참조를 할당하는 것이 아니라 immutable한 값 ‘Lee’가 메모리에 새로 생성되고 myName은 이것을 참조하기 때문이다. 따라서 user.name의 값이 변경된다 하더라도 변수 myName이 참조하고 있는 ‘Lee’는 변함이 없다.

var user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var user2 = user1; // 변수 user2는 객체 타입이다.

user2.name = 'Kim';

console.log(user1.name); // Kim
console.log(user2.name); // Kim

위의 경우 객체 user2의 name 프로퍼티에 새로운 값을 할당하면 객체는 변경 불가능한 값이 아니므로 객체 user2는 변경된다. 그런데 변경하지도 않은 객체 user1도 동시에 변경된다. 이는 user1과 user2가 같은 어드레스를 참조하고 있기 때문이다.

 

불변 객체를 만드는 방법

• 불변( immutability )이란 뭘까? 단어에서 유추해볼 수 있다시피 '변하지 않는 뜻'이라고 생각하면 된다.
• 그럼 '불변 객체'란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
• 자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데 const와 Object.freeze()를 사용하는 껏이다.

​

​

[ const ]

자바스크립트 키워드 중 하나인 const이다.

ES6 문법부터 let 과 const를 지원한다.

​

const키워드는 변수를 상수로 선언할 수 있다.

일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

그렇다면 상수로 선언한 객체는 불변 객체일까?

const test = {}; test.name = "apple" console.log(test); // {"apple"}

 

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는, 즉 test변수가 상수가 되기 때문에 const 키워드로 선언된 test 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

​

재할당이 불가능 한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 test변수는 재할당이 불가능 한 것이고

객체의 속상이 변경가능 한 이유는 실제 객체가 변경은 되지만 ({} -> name: "apple") 객체와 변수 (test)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경 가능한 것이다.

​

때문에 비록 재할당은 불가능하지만 객체의 속성을 변경함으로 인해 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 하기는 힘들다.

따라서 Object.freeze()라는 JS내장 메소드도 살펴보도록 하겠다.

​

​

[Object.freeze()]

자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드이다. 공식 문서에서는 "객체를 동결하기 위한 메소드"라도 적혀 있다.

​

그렇다면 이 메소드를 사용하면 불변 객체를 만들 수 있을까? 먼저 이 메소드의 사용법부터 알아보면,

let test = { name : 'kim' } Object.freeze(test);

 

사용법은 간단하다. test변수에 key value를 가진 객체를 바인딩 후 Object.freeze(test)를 사용해 바인딩된 변수를 동결 객체로 만들었다.때문에 test객체는 객체의 속성을 변경하는 시도는 불가능 하다.

​

 

test.name = 'Jung'; console.log(test) //{name: 'kim'}

위와 같이 객체의 속성을 변경하는 시도는 무시된다.

그러나 Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하다.

​

test = { age : 15 }; console.log(test); // {age: 15}

위와 같이 객체의 재할당은 가능하다.

때문에 Object.freeze()도 불변 객체라고 할 수 는 없을 것 같다.

그럼 결국 불변 객체는 어떻게 만들 수 있냐면

​

const와 Object.freeze()를 조합하여 만들 수 있다.

(const의 재할당불가 + Object.freeze()의 객체 속성 변경 불가)

​

그렇다면 아래 코드와 같이 사용하면 된다.

 

const test = { 'name' : 'jung' }; Object.freeze(test);

먼저 const 키워드로 바인딩 된 변수를 상수화 시킨 다음, Object.freeze()로 해당 변수를 동결 객체를 만들면 객체의 재할당과 객체의 속성 둘 다 변경 불가능한 불변 객체가 된다.

기본형 데이터와 참조형 데이터

자바스크립트가 데이터를 처리하는 과정이

Primitive Type (기본형 타입) / Reference Type (참조형 타입) ​​이 있다.

​

​

[ Primitive Type ]

기본형은 값을 그대로 할당한다.

• Number (숫자)
• String (문자)
• Boolean(불리언)
• null
• undefined
• Symbol(ES6에 추가, 객체 속성을 만드는 데이터 타입)

​

[ Reference Type ]

값이 저장 된 주소값을 할당

• Object (객체)
• Array (배열)
• Function (함수)
• Date (날짜)
• RegExp(정규표현식) 등

​

+ ES6에서 Map, WeakMap, Set, WeakSet 등 추가됨.

객체의 하위 분류에 속한다.

​

​

[ 기본형 VS 참조형 ]

• 기본형은 불변성을 뛴다.
• 기본형은 값이 담긴 주솟값을 바호 복제
• 참조형은 값이 담신 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제

​

[ 데이터 타입이 왜 필요할까? ]

• 값을 지정할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

JavaScript 형변환

자바스크립트는 타입이 매우 유연한 언어로 (Dynamic typing: dynamically type language - Runtime에서 type이 정해짐)
필요에 따라 ① 암시적 변환 또는 ② 명시적변환 (개발자의 의도에 따라) 진행한다.

 

1. 암시적 변환

• 산술연산자를 통해 암시적 변환이 가능하다.
  : 더하기(+) 연산자는 숫자보다 문자열이 우선시 되기때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다. (문자 > 숫자)

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100

2. 명시적 변환

타입을 변경하는 기본적인 방법은 Object(), Number(), String(), Boolean() 와 같은 함수를 이용한다.

1) A Type → Number Type : 다른 자료형을 숫자타입으로

• Number()는 정수형과 실수형의 숫자로 변환한다.

Number(“12345”); //12345
Number(“2”*2); //4

• parseInt()는 정수형의 숫자로 변환한다.

parseInt(“27”) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(“ 2”); //2
parseInt(“ 2ㅎ”); //2
parseInt(“ ㅎ2”); //NaN

• parseFloat()는 부동 소수점의 숫자로 변환한다.
  parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

parseFloat(“!123”); //NaN
parseFloat(“123.123456”); //123.123456
parseInt(“123.123456”); //123
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN

2) A Type → String Type : 다른 자료형을 문자 타입으로

• String()

String(123); //”123"
String(123.456); //”123.456"

• toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.

var trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"

• toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 0으로 길이를 맞춘 문자열을 반환한다.

var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"

3) A Type → Boolean Type : 다른 자료형을 불린 타입으로

Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

출처: https://velog.io/@happyvirusoojin/JavaScript-%ED%8A%B9%EC%84%B1-%EC%9E%90%EB%A3%8C%ED%98%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
출처:https://bestalign.github.io/dev/understanding-loose-typing-in-javascript/

얕은 복사와 깊은 복사

[ 얕은 복사 (Shallow copy)]

우리가 흔히 알고 있듯이, 객체가 담겨 있는 변수를 다른 변수에 할당하면 calll by reference(데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다.

 

const personq1 = {name:'inyong'}; 

const person2 = person1; 

person1.name = 'jung';

// result 
person2.name // 'jung'

person1 === person2; // true - 같은 데이터 주소를 바라보고 있는 두 변수

 

데이터가 그대로 하나 더 생성된 것이 아닌 해당 데이터의 메모리 주소를 전달하게 돼서, 결국 한 데이터를 공유하게 되는 것이다.

​

[ 깊은 복사 (Depth copy) ]

한 데이터의 공유가 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때가 있다.

​

이럴 때 우리는 '깊은 복사'라는 개념을 사용한다.

​

const person1 = { name : "inyong"}; 

const person2 = Object.assign({}, person1); 

person1.name = "jung"; 

//result 
person2.name // 'inyong' - 전혀 다른 메모리 주소의 데이터이므로, person2의 값은 변하지 않음.

person1 === person2 // false - 형태만 같고, 각자 다른 메모리 주소에 저장되어 있는 데이터다.​

[출처] JavaScript 객체와 불변성이란 ?|작성자 은둥이

---

 

🐤 호이스팅과 TDZ는 무엇일까 ?

호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음.

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의.

 

출처:https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

호이스팅의 대상

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.  
let/const 변수 선언과 함수 표현식 에서는 호이스팅이 발생하지 않음.

 foo();
  foo2();

  function foo() { // 함수선언문
          console.log("hello");
  }
  var foo2 = function() { // 함수표현식
          console.log("hello2");
  }

함수 선언문과 함수 표현식에서 호이스팅

함수 선언문에서의 호이스팅

함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석 할 때 맨위로 끌어 올려진다.

/* 정상 출력 */
function printName(firstname) { // 함수선언문 
    var result = inner(); // "선언 및 할당"
    console.log(typeof inner); // > "function"
    console.log("name is " + result); // > "name is inner value"

    function inner() { // 함수선언문 
        return "inner value";
    }
}

printName(); // 함수 호출 

함수 표현식에서의 호이스팅

함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있음.

• 함수 표현식에서는 선언과 할당의 분리가 생긴다.

/* 오류 */
 function printName(firstname) { // 함수선언문
     console.log(inner); // > "undefined": 선언은 되어 있지만 값이 할당되어있지 않은 경우
     var result = inner(); // ERROR!!
     console.log("name is " + result);

     var inner = function() { // 함수표현식 
         return "inner value";
     }
 }
printName(); // > TypeError: inner is not a function

호이스팅은 함수 선언문과 함수 표현식에서 서로 다르게 동작하기 때문에 주의해야 한다. 변수에 할당된 함수 표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다.

Q. printName에서 “inner is not defined” 이라고 오류가 나오지 않고, “inner is not a function”이라는 TypeError가 나오는 이유?

A. printName이 실행되는 순간 (Hoisting에 의해) inner는 ‘undefined’으로 지정되기 때문
inner가 undefined라는 것은 즉, 아직은 함수로 인식이 되지 않고 있다는 것을 의미

함수 표현식의 선언이 호출보다 아래에 있는 경우

/* 오류 */
 function printName(firstname) { // 함수선언문
     console.log(inner); // ERROR!!
     let result = inner();  
     console.log("name is " + result);

     let inner = function() { // 함수표현식 
         return "inner value";
     }
 }

printName(); // > ReferenceError: inner is not defined

console.log(inner);에서 inner에 대한 선언이 되어있지 않기 때문에 inner is not defined 오류가 발생

호이스팅 사용시 주의할 점

코드의 가독성과 유지 보수를 위해 호이스팅이 일어나지 않도록 해야함.

• 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.
  var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해해야 할까?
• ES6를 어디서는 쓸 수 있으려면 아직 시간이 더 필요하다. 그렇기 때문에 ES5로 트랜스 커파일을 해야한다.
  위의 이유로 아직은 var가 어떻게 동작하는지 이해하고 있어야 한다.

---

스코프

• 스코프(scope)는 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다.
• 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다.
• 한 가지 주의해야 할 점은, 자바스크립트에서 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만들며, 이러한 특성을 블록 레벨 스코프라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 한다.

var a = 1

if (true) {
  var a = 5
}

console.log(a) // output: 5

함수가 아닌 곳에서 var 키워드를 이용해 a를 선언했기 때문에 전역 변수로 취급한다. 기존에 있던 a 변수가 중복 선언되면서, 최하단의 console에서도 출력 값이 5로 바뀐 것을 확인할 수 있다.

해당 예제는 코드가 짧아서 어디에서 문제가 일어난지 바로 알 수 있었지만, 실무에서는 그렇지 않다. 전역 변수로 인해 재할당이 발생하거나, 전역 스코프를 공유하기 때문에 어딘가에 동일한 이름이 있다면 예상치 못한 결과를 가져올 수 있는 위험이 있다. 따라서 오로지 함수 코드 블록만을 지역 스코프로 인정하는 var 대신, 블록 레벨 스코프를 지원하는 const와 let을 사용하는 것을 권장한다.

스코프 체인

자바스크립트에서 전역 변수는 전역 객체의 프로퍼티이다. (ECMAScript 명세에 정의되어 있음)

지역 변수는 그런 규정이 없지만, 변수를 각 함수 호출과 연관된 객체(call object)의 프로퍼티로 생각할 수 있다.

지역 변수를 어떤 객체의 프로퍼티로 생각한다면, 자바스크립트의 모든 코드는 스코프 체인을 갖고 있다. 스코프 체인은 해당 코드의 유효 범위(in scope) 안에 있는 변수를 정의하는 객체의 체인, 리스트다.

 

자바스크립트가 변수 값을 얻으려고 할 때(variable resolution, 변수 해석) 스코프 체인에서 변수를 찾는다. 스코프 체인은 위에서 말했다시피 객체의 리스트이므로, 첫 번째 객체에서 해당 변수를 찾고, 없으면 그 다음 객체에서 해당 변수를 찾고, 여기도 없으면 그 다음 객체에서 찾는 식이다. 리스트의 끝까지 탐색했는데도 그 변수가 없다면 reference error가 발생하는 것이다.

 

최상위 자바스크립트 코드(어떠한 함수에도 속하지 않는 코드)의 스코프 체인에는 하나의 객체만 있고, 그것이 전역 객체이다. 중첩되지 않은 함수의 스코프 체인은 2개의 객체로 이루어진다. 하나는 함수의 매개변수와 지역 변수를 정의하는 객체고, 다른 하나는 전역 객체다.

 

함수가 정의될 때, 함수는 스코프 체인을 저장한다.

함수가 호출될 때, 함수는 지역 변수를 보관하는 새로운 객체를 만들고 그 객체를 기존에 만들어둔 스코프 체인에 추가한다.

---

변수 은닉화

(function () {
  var a = 'a';
})();

console.log(a); // a is not defined

 

함수 외부에서 a를 출력해보면, 아직 정의되지 않았다(a is not defined)는 에러메세지를 확인할 수 있다. 이러한 방식과 같이 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 한다.

이러한 은닉화과정을 클로저를 통해 자세히 알아보도록 하자.

 클로저를 통한 은닉화

자바스크립트에서 일반적인 객체지향 프로그래밍 방식으로 prototype를 사용하는데 객체 안에서 사용할 속성을 생성할 때 this 키워드를 사용하게 된다.

하지만 이러한 Prototype을 통한 객체를 만들 때의 주요한 문제가 하나 있습니다. 바로 Private variables에 대한 접근 권한 문제이다.

아래 코드를 예시로 보도록 하자.

function Hello(name) {
  this._name = name;
}

Hello.prototype.say = function() {
  console.log('Hello, ' + this._name);
}

let a = new Hello('영서');
let b = new Hello('아름');

a.say() //Hello, 영서
b.say() //Hello, 아름

a._name = 'anonymous'
a.say() // Hello, anonymous

현재 Hello() 함수를 통해 생성된 객체들은 모두 _name이라는 변수를 가지게 된다. 변수명 앞에 underscore(_)를 포함했기 때문에 일반적인 JavaScript 네이밍 컨벤션을 생각해 봤을때 이 변수는 Private variable으로 쓰고싶다는 의도를 알 수 있다.

하지만 실제로는 여전히 외부에서도 쉽게 접근가능한 것을 확인할 수 있다.

이 경우 클로저를 사용하여 외부에서 직접적으로 변수에 접근할 수 있도록 캡슐화(은닉화)할 수 있다.

function hello(name) {
  let _name = name;
  return function () {
    console.log('Hello, ' + _name);
  };
}

let a = new hello('영서');
let b = new hello('아름');

a() //Hello, 영서
b() //Hello, 아름

이렇게 a와 b라는 클로저를 생성함으로써 함수 내부적으로 접근이 가능하도록 만들 수 있다.

이번에는 조금 더 간단한 예제를 살펴보도록 하겠다.

function a(){
  let temp = 'a' 
  
  return temp;
} 

// console.log(temp)  error: temp is not defined
const result = a()
console.log(result); //a

현재 위 함수 내부적으로 선언된 temp에는 직접적으로 접근을 할 수 없다. 함수 a를 실행시켜 그 값을 result라는 변수에 담아 클로저를 생성함으로써 temp의 값에 접근이 가능하다.

이렇게 함수 안에 값을 숨기고 싶은 경우 클로저를 활용해볼 수 있다.

---

 Temporal Dead Zone(TDZ)

Temporal Dead Zone(TDZ)이란?

선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간이다.
const 변수 선언 부터 시작해보자. 변수를 선언하고, 초기화 하면 변수에 접근 할 수 있다. 

const white = '#FFFFFF';

white; // => '#FFFFFF'

이번에는 선언 전에 white 변수에 접근

white; // throws `ReferenceError`
const white = '#FFFFFF';

white; // => '#FFFFFF'

const white ='#FFFFFF' 구문 전 줄 까지, white 변수는 TDZ에 있다.
TDZ에 있는 white 변수에 접근하게 되면, ReferenceError: Cannot access 'white' before initialization 자바스크립트 에러가 발생

TDZ의 영향을 받는 구문

 

현재 스코프 안에서 TDZ 동작

TDZ는 선언문이 존재하는 스코프 범위 안에서 변수에 영향을 준다.

---

let, const, var, function 원리

[ var ]

es6 이전애는 변수를 선언할 때 var를 이용하여 변수를 선언하였다.

​

var의 경우엔 function 단위의 scope를 가진다. 이는 함수안에서만 선언 될 경우에 scope를 가지는 것을 의미한다.

if나 for문안에서 var를 선언할 경우 해당 변수는 scope를 if나 for가 아닌 상위의 함수(없으면 전역)를 scope로 가지게 된다.

function func() { 
var a = 1; // func scope 
}
console.log(a) // error

for(var i =0; i<10;i++) {
var b = 2; // 전역 scope 
}
console.log(b) // 2

 

b가 scope가 전역으로 설정이 되면서 다음과 같이 이상한 코드가 발생하게 된다.

​

function scope와 호이스팅 개념이 만나 다음과 같은 원리로 동작된다고 생각하면 된다.(실제로 이렇게 동작하진 않는다.

var b;
function func() {
	var a; a = 1; 
} 
console.log(a) // error 
for(var i =0; i<10;i++) {
	b = 2;
}
console.log(b) // 2

​

[ let, const ]

let과 const는 es6 이후에 선언 되었다.

위에 처럼 이상한 코드가 실제로 코드를 작성하는 입장에서는 헷갈릴 만한 요소가 많아 block scope로 설정되었다.

block scope는 중괄호 단위로 스코프가 설정되는 것으로 이해하면 된다.

그로인해 for문과 if문안에서 선언할 경우에는 if문과 for문 안에서만 사용가능한 변수로 설정이 된다.

​

const b = 1; for(var i =0; i<10; i++) { coonsole.log(b) // error const b = 2; }

const b = 1;
for(var i =0; i<10; i++) {
	coonsole.log(b) // error
	const b = 2; 
}

[ let, const는 호이스팅이 일어나지 않나요? ]

이렇게 보면, const, let 에선 호이스팅이 일어나지 않는 것처럼 보인다.

하지만 호이스팅이란 개념은 결국 실행컨텍스트로 인해 발생하는 것임으로 const, let, var 모두 호이스팅이 발생한다.

그러면 왜 호이스팅이 일어나지 않는 것 처럼 보이는 걸까?

이는 const와 let의 값 할당 시점이 var와 다르기 때문이다.

​

일반적으로 변수는 다음과 같이 실행된다.

변수 선언 > 변수 초기화 > 변수 값 할당

​

var 의 경우는 변수의 선언과 초기화가 동시에 일어난다.

이말인 즉 변수가 초기화가 되는데 할당이 되기 이전의 상태로 undefiend상태로 존재하게 된다.

​

그러나 let과 const는 변수의 선언과 초기화가 동시에 일어나지 않는다.

변수의 선언만 인정되어 실행 컨택스트에는 담기게 되나 (호이스팅이 일어난다.) 초기화가 되지 않았기 때문에 초기화 되기 이전에 console 로 실행시키게 되면 error가 발생하게 된다.

​

[ 결론 ]

var

• function scope
• 호이스팅이 일어난다
• 변수의 선언과 초기화가 동시에 진행

​

let, const

• pblock scope
• 호이스팅이 일어난다
• 변수의 선언만 일어난다. 변수의 선언과 초기화가 동시에 일어나지 않는다.
  

---

실행 컨텍스트와 콜 스택

 

[ 함수 실행에 대한 이해 ]

• 자바스크립트는 하나의 스레드로 단 1개의 동시성만 다루는 언어
  • 한번에 1개의 작업만 다룰 수 있다.
  • JS의 Heap Queue Stack => 크롬의 V8 내부에 구현되어 있다.

​

1. 콜스택 CallStack

• 함수의 호출을 기록하는 자료구조
• 우리가 프로그램 안에서 위치한 곳
• 함수 실행 시 스택에 push 된다.
• 함수로부터 반환 받을 때, 스택에서 pop된다.

​

2. 힙 Heap

• 오브젝트(객체)들은 힙 내부에 할당
• 거의 구조화되지 않은 영역(unsteuctured)의 메모리
• 변수와 객체들의 모든 메모리 할당이 여기서 일어남

​

3. 큐 Queue

• 자바스크립트 런타임은 메시지 큐를 갖고 있다.
• 메세지 큐
  • 실행될 콜백함수나 실행될 메세지들에 대한 리스트
• 스택이 충분한 공간(capacity)를 갖고 있을 때, 메세지는 큐 밖으로 나오고 메세지가 가지고 있던 함수 목록들이 실행된다. -> 초기 스택 프레임
• 스택이 다시 빌 때 메세지 수행도 끝난다.
• 이벤트들에 대한 콜백 함수가 제공되었다면 메세지들은 외부 비동기 이벤트들에 대한 응답으로 큐에 쌓인다.
• 외부 비동기 이벤트들이란 마우스 클릭, HTTP요청 등을 말합니다. 하지만 만일 한 사용자가 버튼을 눌렀는데 아무런 콜백함수도 등록되어 있지 않다면 어떠한 메시지도 큐에 들어가지 않을 것입니다.
• 메시지들은 웹 브라우저에서 언제든 이벤트가 발생했을 때 추가 된다.

​

​

[ 실행 컨텍스트 ]

• 실행 컨텍스트는 scope, hoistiong, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.
• ESMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형성화하고 구분하는 추상적인 개념이라고 정의한다.좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다.
• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드
• 일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드이다.

eval 함수 :

eval()은 전역 객체의 함수 속성입니다.

eval()의 인자는 문자열입니다. 인자가 표현식을 나타낸다면 eval()은 표현식을 평가합니다. 인자가 하나 이상의 JavaScript 명령문을 나타낸다면 모두 실행합니다. 연산식을 계산하기 위해 eval()을 호출하지 마세요. 자바스크립트는 연산식을 알아서 계산합니다.

​

​

자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다. 실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다.

• 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효범위(Scope)
• this

이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다.

• 컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다. 스택은 LIFO(Last In First Out, 후입 선출)의 구조를 가지는 나열 구조이다.
• 전역 코드(Global code)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다.
• 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다.
• 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.

 

느낀점

- 나름  js를 써봤다고 생각했는데 동작원리나 세부적인 오류 과정을 생각해본적이 없었다.

- js를 쓰면서 어떠한 부분에서 오류가 생기는지 조금은 더 빠르게 파악할 수 있게 됐다.

 

[출처] 호이스팅과 TDZ는 무엇일까 ?|작성자 은둥이

출처: https://velog.io/@mmzgpgp/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C