드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (3편)

3. 데이터타입, data types, let vs var, hoisting

변수 : 변경될 수 있는 값

let name = "JungAh";
console.log(name);
name = 'hello';
console.log(name);

여기서 name은 저장소를 가리키는 포인터의 역할, name이라는 이름의 저장소에 저장된 값은 변경될 수 있다.

 

Block Scope vs Global Scope

{} bracket 안에 정의된 변수는 이 안에서만 사용될 수 있다.

어느 곳에서나 접근이 가능한 변수의 영역을 global scope라고 한다.

 

let vs var

var를 사용하면 안되는 이유

1) var hoisting (변수를 선언한 내용을 맨 위로 끌어올려주는 역할을 하는 것)

2) block scope를 가지고 있지 않음

// var
{
    age = 7;
    var age;
}
console.log(age);

bracket안에 선언한 변수는 원래대로라면 그 안에서만 사용이 가능한데, var는 block scope를 가지고 있지 않아서

global scope 처럼 사용하게 되는 것이다.

 

constants (상수)

값을 선언한 이후에는 할당된 값을 변경할 수 없음

mutable data type : 값이 변경될 수 있는 타입을 말함

constants는 immutable data type이라고 할 수 있음

장점

1) 보안성이 높음(security) 2) thread safety 3) reduce human mistake

 

Variable Data Type

1) number

C나 Java는 숫자에 관련된 데이터 타입이 여러가지가 있어서 좀 더 세세하게 메모리 관리를 할 수 있다.

하지만, 자바스크립트에서는 숫자와 관련된 데이터 타입은 number만 존재함

심지어 number라고 데이터타입을 선언하지 않고 바로 사용함

 

infinity, negative infinity, NaN (Not a Number)

 

bigInt

자바스크립트는 숫자를 사용할 수 있는 범위가 (-2**53) ~ 2**53까지인데

최근에는 숫자 맨 뒤에 n을 붙이면 그 이상의 숫자도 사용가능할 수 있게 변경되었다.

그 숫자의 데이터 타입은 bigInt로 출력된다.

 

2) string

// string
const char = 'c';
const brendan = 'brendan';
const greeting = 'hello' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`); // template literals (string)
const helloBob = `hi ${brendan}!`;
console.log(`value: ${helloBob}, type: ${typeof brendan}`);

template literals :  ` (백틱) 을 이용해서 string과 변수 혹은 함수를 한꺼번에 사용해서 입력할 수 있다.

 

3) boolean

// boolean
// false : 0, null, undefined, NaN, ''
// true : any other value
const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);

4) null과 undefined

// primitive type
// null 과 undefined
let nothing = null; // 비어 있는 값이라고 지정한 경우
let x; // 변수는 선언했지만, 값을 할당하지 않았을 때는 undefined라고 출력됨

5) Symbol

Map 이나 자료구조에서 고유한 식별자나 우선순위를 주고 싶을 때 사용함

// symbol
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false 출력

동일한 string 값으로 symbol 값을 만들더라도 고유하게 식별자 값이 만들어지기 때문에 false라고 출력됨

 

동일한 string 값으로 symbol을 만들고 싶다면, Symbol.for(string값) 를 사용해서 만들 수 있다.

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true 출력

Symbol값을 출력할 때는 .description을 사용해서 출력해야 한다.

console.log(gSymbol1.description);

 

Dynamic typing

자바스크립트는 dynamically-typed language라고 불림, 그 반대인 C나 Java는 static-typed language라고 함

자바스크립트는 변수를 선언할 때 어떤 타입인지 작성하지 않고, 런타임(프로그래밍이 동작할 때)일 때 할당된 값에 따라서 타입이 선언되기 때문에 Dynamic 하다고 할 수 있다.

-> 이렇게 런타임일 때 타입이 정해지는 부분 때문에 개발자들이 개발을 할 때 어려움을 겪에 되어서,

기존의 자바스크립트에 타입이 더 얹어서 개발된 언어가 'TypeScript'이다.

let text = 'hello';
console.log(text.charAt(0)); // h, index값으로 string의 한 글자를 불러올 수 있음
console.log(`value: ${text}, type: ${typeof text}`); // type = string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`); // type = number
text = '7' + 5;
// 자바스크립트에서 string + number를 하게 되면 string끼리 더하는 것으로 간주해서
console.log(`value: ${text}, type: ${typeof text}`); // value : 75, type: string 출력
text = '8' / '2';
// 피연산자가 string으로 들어가더라고 수학연산이 진행됨
console.log(`value: ${text}, type: ${typeof text}`); // value : 4, type : number
console.log(text.charAt(0)); // 최종적으로 text에 할당된 값은 number이기 때문에 에러가 발생함

Object

// object
const ellie = { name: 'ellie', age: 20 };
ellie.age = 21;

object가 const로 지정되어 있어서 변경이 불가능 하지만,

object 안에 있는 변수들은 변경이 가능함. 위의 예시처럼 '객체.변수이름' 의 형식으로 할당된 값을 변경할 수 있다.

 

 

자바스크립트 기본 문법과 원리를 정리하기에 좋은 강의라고 생각한다.

더군다나 유튜브에서 무료로 들을 수 있으니.. 진정한 재능기부가 아닌가 싶다.

 

출처

https://www.youtube.com/watch?v=OCCpGh4ujb8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC