[TIL] 자바스크립트 데이터타입, 실행컨텍스트

1.데이터타입

 

1-1.변수와 상수

• 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 특)변하는값

let user = 'John';
let age = 25;
let message = 'Hello';

• 상수는 const로 선언한 변수를 '상수(constant)'라고 부릅니다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생합니다.

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

1-2.바람직한 변수명

• userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하기
• 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하기
• 최대한 서술적이고 간결하게 명명하기 data와 value는 나쁜 이름의 예시. 이런 이름은 아무것도 설명해주지 않음 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용하기

1-3.자료형

자바스크립트에는 여덟 가지 기본 자료형이 있습니다. 

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

• 숫자형 : 정수 및 부동소수점 숫자(floating point number)를 나타냄
• BIgInt : 길이에 상관없이 정수
• 문자형  : js에서문자열(string)을 따옴표로 묶습니다
• 불린형 : true와 false 두 가지 값밖에 없는 자료형입니다.
• Null : ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
• Undefined  : 할당되지 않은 상태’를 나타낼 때 사용합니다
• 객체와심볼 : 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다. 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.
• typeof연산자 : 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용 Math는  내장함수, null은 객체가 아님 언어사오류로 object로 출력, 함수’형은 따로 없음. 함수는 객체형에 속함

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

2.실행컨텍스트

모든 코드는 실행 순서가 있고, 실행 컨텍스트는 그것과 관련된 것 입니다.

 

컨텍스트는 생성단계와 실행단계로 이루어져있다

 

2-1.실행컨텍스트 실행단계

• Lexical Environment 구성 요소가 생성됩니다.
• Variable Environment 구성 요소가 생성됩니다.

2-1-1. Lexical Environment 

변수와 해당변수에 대입된 값이 매핑되는 곳

//code snipet
var a = 20;
var b = 40;

function foo(){
	console.log('bar')
}

//Lexical Environment
lexicalEnvironment = {
	a : 20,
	b : 40,
	foo : <ref. to foo function>
}

2-1-2. exical Environment에서는 세 가지 구성 요소

• Enviroment Records : 함수와 변수선언을 저장하는 곳
• Reference to the outer environment : 외부 환경에 대한 참조는 외부에 있는 Lexical Environment환경으로 접근할 수 있다. 변수를 찾지 못했다면 외부 환경에서 해당 변수를 찾아 볼 수 있다는 의미
• This binding : 전역 실행 컨텍스트(Global Execution Context)에서 this는 전역객체입니다. (window)

 

2-1-3. VariableEnvironment 

실행컨텍스트 두번째 실행단계로서, 식별자 해결을 하기위한 공간입니다.

VariableEnviroment 또한 LexicalEnvironment이고, 위에서 정의했던대로 LexicalEnviroment의 모든 프로퍼티와 요소를 가진ㄴ다.

ES6에서 한가지 차이점이 생기는데, VariableEnvironment는 변수 var만 저장하고 LexicalEnvironment는 함수 선언과 변수(let과 const) 바인딩을 저장

 

2-2.실행단계 Executtion Phasse 

이 페이즈에서는 모든 변수에 대한 값 할당이 완료되고 최종적으로 코드들이 실행됩니다.

let a = 20;
const b = 30;
var c;

function multiply(e, f){
	var g = 20;
	return e * f * g;
}
c = multiply(20, 30);

함수와 let, const 는 Lexical Environment로 var 는 VariableEnvironment로 key/value로 매핑

execution phase가 실행되는 동안 각각의 변수 할당이 수행됩니다.  함수가 호출되는 시점에서 새로운 함수 실행 컨텍스트(Function Execution Context)는 함수코드를 실행합니다.

multiply(20, 30)함수가 호출되는 시점에서 새로운 함수 실행 컨텍스트(Function Execution Context)는 함수코드를 실행합니다.

그리고, 함수 실행 컨텍스트는 생성 단계(Creation phase)와 유사한 형태일 것입니다.

그 다음, 실행 컨텍스트는 함수 내부의 변수들에 할당하는 실행단계를 거칩니다.

그리고 Global Lexical Environment는업데이트 됩니다. 그 후 전역 코드가 완료되고 프로그램은 완료