🔥아이티 부수기🔥

변수란?

값의 위치(주소)를 기억하는 저장소이다. 여기서 값의 위치란 값이 위치하고 있는 메모리 상의 주소를 의미한다.

즉, 변수랑 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자이다.

자바스크립트에서 변수

자바스크립트는 동적타입언어이기 때문에 변수의 타입 지정 없이 값이 할당 되는 과정에서 자동으로 변수의 타입이 결정된다.(Type Inference) 따라서 변수에 여러가지 타입의 값을 자유롭게 할당 할 수 있다.

데이터 타입

데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말한다.

자바스크립트에서 데이터 타입은 원시타입과 객체 타입으로 나누어 진다.

원시타입( primitive data type)

- boolean

- null

- undefined

- number

- string

- symbol(ES6)

객체 타입(object / reference type)

- object

원시 타입(Primitive Data Type)

원시 타입은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달)이다.

number

Java의 경우 정수와 실수를 구분하여 int, long, double 등과 같이 다양한 숫자 타입이 존재하지만자바스크립트에서는 number 하나의 숫자 타입만 존재한다.+) Infinity : 양의 무한대, -Infinity : 음의 무한대, NaN : 산술 연산 불가 (not-a-number)

string

문자열 타입은 텍스트 데이터를 나타내는데 사용한다. 문자열은 배열처럼 인덱스를 통해 접근할 수 있는데 이와 같은 특성을 갖는 데이터를 유사배열이라 한다.그렇다고해서 배열처럼 변경할 수 있는 것은 아니다.  재할당은 가능하다.

boolean

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.비어있는 문자열과 null, undefined, 숫자 0은 false로 간주된다.

undefined

undefined 타입의 값은 undefined가 유일하다. 선언 이후 값을 할당하지 않은 변수는 undefined값을 가진다. 이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때 까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화하기 때문이다.

이렇기 때문에 개발자가 의도적으로 값을 할당하지 않을 때는 헷갈리지 않게 null을 할당한다.

null

null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별하므로 null은 Null, NULL과 다르다.null은 의도적으로 변수에 값이 없다는것을 명시 할 때 사용한다. 이는 변수가 기억하는 메모리 어드레스의 참조 정보를 제거하는 것을 의미하며 자바스크립트 엔진은 누구도 참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.

타입을 나타내는 문자열을 반환하는 typeof 연산자로 null값을 연산해보면 null이 아닌 object가 나온다 그러므로 null타입을 확인할 때는 typeof말고 === 연산자를 사용해야한다

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

symbol

심볼(symbol)은 ES6에서 새로 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용된다.

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

객체타입(Object type, Reference type)

객체는 데이터와 그 데이터에 관련한 동작(절차,방법,기능)을 모두 포함할 수 있는 개념적 존재이다.

객체는 원시타입을 제외한 나머지 값들이 모두 객체이고 객체는 pass-by-reference(참조에 의한 전달) 방식으로 전달된다.

변수

변수는 var,let,const 키워드를 통해 선언하고 할당연산자를 통해 값을 할당한다. 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다.

동적 타이핑(Dynamic Typing)

자바스크립트는 동적 타입(dynamic/ weak type)언어이다. 이것은 변수의 타입 지정 없이 값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입이 결정 될 것이라는 뜻이다. 따라서 같은 변수에 여러 타입의 값을 할당할 수 있다.

이를 동적 타이핑(Dynamic Typing)이라한다.

참고

poiemaweb.com/js-data-type-variable

💡 Destructuring Assignment (구조 분해 할당)

구조 분해 할당이란 말 의미 그대로 객체, 배열의 구조를 분해하여 분해한 값을 변수에 할당한다고 생각하면 된다.

(구조 분해 할당 구문은 배열의 값이나 객체의 속성을 별개의 변수로 추출할 수 있게하는 자바스크립트 식)

💡 배열 구조 분해 할당 

let arr = ["dong","hwi"];

// 배열 구조 분해 
let [firstName, surname] = arr;

console.log(firstName);
console.log(surname);

// 배열으로 접근하지 않고 변수로 사용 할 수 있게 됐다.

split(' ') 함수를 활용 할 수도 있다.

let [firstname, surname] = "kim dong".split(' ');

* 구조 분해 할당을 한다고 해서 기존의 arr는 바뀌지 않는다.

1. 쉼표를 사용하여 요소를 무시할 수 있다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

2. 할당 연산자 좌측엔 뭐든지 올 수 있다.

할당 연산자 좌측엔 할당 할 수 있는 것이라면 어떤 것이든지 올수 있다.(객체 프로퍼티도 가능)

let user = {};
[user.name, user.surname] = "kim hwi".split(' ');

console.log(user.name);

3. entries()로 반복할수 있다.

let user = {
	name : 'john',
	age:30
};

for(let[key, value] of Object.entries(user)){
	console.log(`${key} : ${value}`);
}

4.'...'로 나머지 요소 배열로가져오기

let [name1, name2, ...rest] = ['a','b','c','d','e'];

console.log(name1);
console.log(name2);

console.log(rest[0]);	// c
console.log(rest[1]);	// d

rest말고 다른 변수명도 사용 가능하다. 하지만 변수명 앞에 . 세개를 꼭 지켜줘야한다.

💡 객체 구조 분해 할당

let options = {
	title: "menus",
    width:100,
    height:200
};

let {title, width, height} = options;

console.log(title);
console.log(width);
console.log(height);

참고

ko.javascript.info/destructuring-assignment

자바스크립트에서 여러가지 객체 초기화 방법들이 있는데 ES6에서 객체를 초기화 할 때 객체의 속성과 값의 이름이 동일 할 경우 좀 더 간편하게 객체를 초기화 할 수 있는 방법이 나왔다.

Shorthand Properties

예제를 보면 더 빠르게 이해할 수 있다.

var animation ='모아나';
var movies = ['삼진그룹 영어토익반','정직한 후보'];

// 자바스크립트
var favorite ={
    animation : animation,
    movies : movies
};
// ES6
var favorite ={
    animation,
    movies
};

이렇게 프로퍼티의 key의 이름과 value의 이름이 같다면 축약해서 사용 할 수 있다. 

💡 변수의 생성 단계

1. 선언단계(Declaration phase)

     변수 객체에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

2. 초기화 단계 (Initialization phase)

    변수 객체에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.

3. 할당 단계( Assignment phase)

    undefined로 초기화된 변수에 실제 값을 할당한다.

💡 var의 문제점

1. 함수 레벨 스코프(Function-level scope)

   - 전역 변수 남발

   - for문 초기화식에서 사용한 변수를 외부에서 참조할 수 있다.

2. var 키워드 생략 허용

    - 의도하지 않은 변수의 전역화

3. 중복 선언 허용

   - 의도하지 않은 변수값 변경

4. 변수 호이스팅

   - 변수를 선언하기 전에 참조가 가능하다

💡 호이스팅(Hoisting)이란?

- 호이스팅은 var , let , const, function 등 모든 선언을 유효범위(scope)에 따라 가장 위로 끌어올리는 것이다.

- 호이스팅으로 초기화 된 값은 제외하고 선언만 끌어 올린다.

- 선언과 할당의 분리라고 생각하면 쉽다.

- 유효범위에는 '함수레벨 스코프'와 '블럭레벨 스코프'로 구성되어 있다.

- var는 함수레벨 스코프이고 let,const는 블럭 레벨 스코프이다. 

- var는 초기 값이 없다면 선언와 동시에 undefined로 초기화 되기 때문에 선언 전에도 사용이 가능하다.

💡 var , let , const 비교

💙 const 와 let  값 변경 여부에서 헷갈릴수 있는 부분이 있어서 첨언해보자면 (나도 헷갈렸다.)

      여기서 변경은 값의 변경이 아니라 '메모리 주소'의 변경이다.

       let 은 메모리 주소 변경이 가능 하고 const 는 메모리 주소 변경이 불가능하다.

let Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

//	Arr 배열안에서 값이 추가되지만 메모리 주소는 바뀌지 않는다.
//	그래서 const를 사용해도 된다.

const Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

💡 예시 

console.log(num);		// undefined
var num;

참고

poiemaweb.com/es6-block-scope