데이터 타입

데이터 타입을 단일 데이터를 담을 수 있는 원시(primitive)타입과 복합 데이터를 담을 수 있는 객체(object)타입 두 가지로 나눌 수 있습니다.

원시 타입

원시 타입에는 number, string, boolean, null, undefined, Symbol

객체 타입

객체 타입에는 object(arrray나 다양한 자료구조들), function

string 이스케이프 표현

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

원시 타입 vs 객체 타입

원시 타입은 값 자체가 메모리 셀에 저장이 되지만 객체 타입은 **메모리 주소(참조값)**를 저장합니다.

let a = 1
let b = a

이렇게 할당하게 되면 메모리 상에서 b는 어떤 값을 가지고 있을까요? 바로 1이 할당 됩니다. 이걸 copy by value라고 합니다. 즉 원시 타입은 값 자체가 복사 되어서 할당 되어집니다.

이때 b에 2를 할당하게 되면 어떻게 될까요? 당연하게도 b에 2의 값이 할당되게 됩니다. 하지만 이 동작이 객체에서는 달라지게 됩니다.

let apple = {
	name:'apple',
}
let orange = apple
apple.name = 'orange'

orange라는 변수에 apple이라는 객체를 할당해주었습니다. 이러면 어떻게 되어질까요? apple이 가지고 있는 메모리 주소가 orange에 할당됩니다.

그런데 여기에서 apple이라는 객체의 name 값을 바꿔주면 어떻게 될까요?

apple이 가르키고 있는 name이 바꿔주었으니 orange의 name을 불러와도 변하게 됩니다.

1. Variable

• rw(read/write)

// added in ES5
// use this for Vanilla Javascript.
'use strict';

// let (added in ES6)
let name = `ellie`;
console.log(name); // > ellie
name = `hello`;
console.log(name); // > hello

2. Block scope

// let (added in ES6)
let globalName = `global name`;
{
	let name = `ellie`;
	console.log(name); // > ellie
	name = `hello`;
	console.log(name); // > hello
	console.log(globalName); // > global name : 전역 변수 이므로 어느 위치에서든 사용 가능
}
console.log(name); // > error : name 은 변수 선언을 한 {} 내부에서만 사용 가능
console.log(globalName); // > global name

// var (쓰지마라 !)
// var hoisting (변수를 어디에 선언했느냐에 상관없이 항상 가장 위로 선언을 끌어 올려주는 것)
// hoisting : 끌어 올려주다
console.log(age); // > undefined
age = 4;
console.log(age); // > 4
var age;

// has no block scope (블록 범위가 없음)
{
	var age = 4;
}
console.log(age); // > 4 : 블록 안에 변수를 선언해도 아무대서나 사용이 가능함, 스코프 무시

3. Constant

• r(read only)

// 가능한 한 const를 사용하십시오.
// 변수를 변경해야하는 경우에만 let을 사용하십시오.
const maxNumber = 5;
maxNumber = 111; // > error : Uncaught TypeError: Assignment to constant variable.

<aside> 💡 const 자료형 일 때, 불변 데이터 유형 : primitive, 고정 된 객체 (예: object.freeze()) 변경 가능한 데이터 유형 : 기본적으로 모든 객체는 JS에서 변경 가능합니다.

const 자료형을 선호하는 이유는 다음과 같다.

• security (보안)
• thread safety (스레드 안전성)
• reduce human mistakes (인간의 실수 감소)

</aside>

4. Variable types

// primitive, single item: number, string, boolean, null, undefiend, symbol
// object, box container
// function, first-class function

// number
const count = 17; // integer
const size = 17.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);
// speicla numeric values: infinity, -infinity, NaN
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = `not a number` / 2;
console.log(infinity); // > Infinity
console.log(negativeInfinity); // > -Infinity
console.log(nAn); // > NaN

// string
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`); // `${}` -> template literals (string)

// 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}`);

// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);

// undefined
let x;
// let x = undefined
console.log(`value: ${x}, type: ${typeof x}`);

// symbol
// - create unique identifiers for objects (개체에 대한 고유 식별자 생성)
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // > false : 동일한 string을 작성해도 다른 symbol로 만들어짐
// - string 이 같을떄 동일한 심볼을 만들고 싶으면..
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // > true 
// console.log(`value: ${symbol1}, type: ${typeof symbol1}`); // > error
console.log(`value: ${symbol1.description}, type: ${typeof symbol1.description}`);

// object
// - real-life object, data structure
const ellie = { name: `ellie`, age: 20 };
ellie.age = 21; // 변경됨
// ellie = { name: `gunwoo`, age: 28 }; // > error : Uncaught TypeError: Assignment to constant variable.
console.log(ellie);

<aside> 💡 메모리에 값이 저장되는 방법은 2가지가 있는데, primitive 타입은 값 자체가 저장되고 object 타입은 레퍼런스(주소)가 저장됨.

</aside>

5. Dynamic typing: dynamically typed language

let text = `hello`;
console.log(text.charAt(0)); // > h
console.log(`value: ${text}, type: ${typeof text}`); // > type: string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`); // > type: number
text = `7` + 5;
console.log(`value: ${text}, type: ${typeof text}`); // > type: string
text = `8` / `2`;
console.log(`value: ${text}, type: ${typeof text}`); // > type: number
// console.log(text.charAt(0)); // > error : Uncaught TypeError: text.charAt is not a function

<aside> 💡 JS는 런타임에서 타입이 정해지는데, 이 때 error가 참 많이 발생, 그래서 나온게 TypeScript !!

</aside>

Boolean

// null, undefined
// undefined
// 변수의 값이 있는지 없는지 알 수 없는 상태
let variable
console.log(variable)

// 변수의 상태가 비어있는 상태
variable = null
console.log(variable)

let activeItem // 아직 활성화된 아이템이 있는지 없는지 모르는 상태
activeItem = null // 활성화된 아이템이 없는 상태

console.log(typeof 123);
console.log(typeof null); // object가 나옴
console.log(typeof undefined); // undefined가 나옴

객체

원시 타입의 경우 Data와 Stack에 담기지만 객체 타입의 경우 Heap에 당깁니다.

apple이라는 객체를 할당하게 되면 이 객체는 heap 어딘가에 저장되어져 있고 메모리 셀 하나 안에 저장하기에는 너무 크기 때문에 여러개의 메모리셀에 묶어서 저장합니다.

그리고 apple이라는 변수에는 실제 오브젝트의 메모리주소를 가르키는 메모리셀이 할당됩니다.

apple.name

apple객체에 있는 name에 접근하기 위해서 .을 찍는 순간 apple이 가르키고 있는 메모리 주소를 찾아가서 name의 값을 찾습니다.

변수

📌Chapter Contents

---

변수 Intro

• 변수 : 값을 저장하는 공간, 자료를 저장할 수 있는 이름이 주어진 기억장소
• 선언 : let myname;
• 할당 : myname = 'steve';
• 선언과 할당은 한번에 한다면 : let myname = 'steve';

변수 기초

• 표현식 (expression)에서 변수 활용하기

let redius = 5; pi * radius * radius; let areaOfcircle = pi * radius * radius;

• 다음과 같이 변수를 만들어 이를 이용해 결과물을 다시 다른 변수로 만들 수 있다.

let a = 0
a = 1

a라는 변수를 정의하게 되면 각각의 메모리 셀마다 그에 해당하는 메모리 주소가 있는데(비유를 하자면 온라인 상으로 주문을 하게 되면 주소지를 적어서 보내주는 것과 같다.) 이렇게 할당이 되면 메모리 주소 어딘가에 값이 저장이되고 a는 메모리 주소를 가르키게 됩니다.

재할당을 하게 되면 a가 가르키고 있는 메모리 주소값에 0 대신 1을 할당하게 됩니다.