[Javascript] 2. 변수 및 개체

✔︎ 동적 변수 타입

첫번째 포스트에서 자바스크립트는 동적 타입 언어의 특징을 가진다고 하였습니다.

즉, 변수의 타입을 동적으로 지정할 수 있는 언어입니다.

 

✔︎ 변수 선언자

var 선언자의 특징은 재선언, 재할당 모두 가능하단 겁니다.

반대로 ES6에서 추가된 let, const 선언자는 재선언이 불가능하며, const의 경우에는 재할당도 불가능한 상수 값을 저장합니다.

스코프 및 전역개체 프로퍼티는 나중에 다루도록 하겠습니다. 우선 참고바랍니다.

	var	let	const
재선언	⭕️	❌	❌
재할당	⭕️	⭕️	❌
스코프	함수	블록	블록
전역개체 프로퍼티	Window	-	-

 

✔︎ 호이스팅

전역이나 새로운 유효범위에 접근 시, 해당 유효범위 내 선언된 변수 및 함수식들이 유효범위 중간에 선언되었다 하더라도

첫머리에 선언된 것 처럼 사용가능 한 것을 말합니다.

개념이 좀 어려우실 수도 있는데 뒤에서 나올 실행 컨텍스트를 이해하시면 자연스럽게 이해되실겁니다 

 

[ 대상 ]

모든 변수 및 함수 선언문 🙆‍♂️

할당문 🙅‍♂️

 

[ var로 선언한 경우 ]

var로 선언시 변수 라이프 사이클인 " 선언 => 초기화 => 할당 " 중 " 선언 => 초기화 "를 동시에 진행합니다.

이때 초기화 단계에선 undefined로 초기화됩니다.

따라서 위와 같은 특징으로 호이스팅을 통해 유효범위 상단에서 호출하더라도 에러가 발생하지 않습니다.

 

[ let/const로 선언한 경우 ]

let은 선언과 초기화가 분리되어 진행됩니다. 따라서 호이스팅을 통해 상단에서 호출하면 초기화가 되지 않은 변수를 참조한 것으로

TDZ (temperal dead zone)에 빠지게 됩니다. (에러발생 - Reference Error)

const의 경우는 let과 동일한 결과를 나타냅니다. 하지만 var의 라이프사이클과 유사하게 처리된다고 하던데 관련내용을 공부를 좀 더,,,

 

✔︎ 변수 선언 생략

만일 변수를 선언하지 않고 첨조하려 한다면 당연히 위에서 본 것처럼 Reference Error가 발생할 것 입니다.

하지만 선언하지 않은 변수에 값을 대입한다면 오류가 발생하지 않습니다.

이러한 경우 자바스크립트 엔진에서 그 변수를 자동으로 전역변수로 선언하기 때문입니다.

 

✔︎ 데이터 타입

원시형 (Premitive) : number, string, boolean, undefined, null, symbol

참조형 (Object) : 배열, 함수 등

 

✔︎ 개체

자바스크립스에서 원시 타입을 제외한 모든 값이 개체입니다.

개체 리터럴 및 생성자를 통해 생성할 수 있습니다.

또한 자바스크립트의 개체는 실행 중 프로퍼티를 자유롭게 변경할 수 있습니다.

마지막으로 개체는 Reference 타입으로 저장됩니다.

 

[ 개체 리터럴로 생성 ]

var person = { gender : " 🙍‍♂️ ", age : " 27 "  };

person.gender // 결과 : 🙍‍♂️

person["gender"]  // 결과 : 🙍‍♂️

person.job  // 결과 : undefined   =>  선언되지 않은 변수를 읽으려고 한다면 Reference Error 발생 

 

person.job = "programmer";

console.log(person); // 결과 : Object { gender : " 🙍‍♂️ ", age : " 27 ", job : "programmer" };

 

delete person.job;

console.log(person); // 결과 : Object { gender : " 🙍‍♂️ ", age : " 27 " };

 

[ 생성자로 생성 ]

자바스크립트는 클래스가 아닌 생성자라는 함수와 new 연산자를 통해 개체를 생성합니다.

생성자는 개체를 생성하고 초기화 하는 역할을 수행

 

function Person( gender, age ) {

    this.gender = gender;

    this.age = age;

}

 

let person = new Person(" 🙍‍♂️  ", " 27 "); => 생성자

console.log(person)  // 결과 : Object { gender : " 🙍‍♂️ ", age : " 27 " };

 

 

✔︎ 자바스크립트 개체의 분류 

 

[ 네이티브 개체 ]

ECMAScript 사양에 정의된 개체

내장 생성자 (Object, String, Number, Boolean, Array, Function 등) + JSON, Math 등의 개체

 

[ 호스트 개체 ]

자바스크립트 실행 환경에서 정의된 개체

브라우저 개체 (Window, Navigator, History 등) + Dom에 정의된 개체 등

 

[ 사용자 정의 개체 ]