JS_변수형

1. 변수

데이터를 저장하고 나중에 재사용하기 위해 이름을 붙인 저장공간

• var : 예전 방식 → 사용하지 않기 !
• let : 블록 스코프 / 재할당 O → 일반적으로 사용
• const : 블록 스코프 / 재할당 X  → 주로 상수 선언시 사용

각각의 키워드는 변수의 스코프(유효 범위)와 재할당 가능 여부에 따라 다르게 동작한다.

단, 자바스크립트는 동적 타입 언어기이에 변수에 저장된 값의 자료형은 언제든 바뀔 수 있음.

 

1.1 변수 선언

// let으로 age라는 저장소를 만듦
// age에undefinded (값이 저장되지 않음)이라는 값이 들어감.
let age

 

1.2 값 저장

// 우측에 있는 값을 왼쪽에 대입했다!
// age라는 방이 만들어짐
// ' age 방이 20이 저장된 방을 가리키면서 참조한다.' 로 이해하는 것이 유용
age = 20

 

1.3 선언과 대입을 한줄로!

 

// 선언과 동시에 값 넣기
// 숫자와 문자 구분하기
// PI : 상수  -> 값 변경 불가
let name ="apple"
const PI = 3.14

 

1.4 저장한 값을 사용

// const age ;  // 값을 대입해야함.
const age = 20;
// age = 20; 할당 및 재할당 못함. 
// 왜? const함수는 재할당이 불가능하기 때문에 한줄로 써야한다!
console.log(age);

 

 

2. 자료형 (Data Type)

A라는 변수를 만들 때, A가 값을 가리킬 대상이 누군지 알려준다. 

즉, 자료형은 데이터의 성격을 정의하는 기준

 

2.1 기본형(Primitive Type)

기본형은 값 자체를 저장(주로 데이터 한개씩)하며, 변경 불가능한(immutable) 특성을 가지며, 스택(Stack) 메모리에 저장한다.

기본형은 스택에 "값 자체"가 저장한다.

 

cf. 자바는 크게 RAM이 두가지로 나뉜다.

 

Case 1.

let name; // 변수 선언, 값 : undefined

console.log(name);

name = "김사과"; // 값 대입(할당)

console.log(name);

Case 2.

let obj1 = { name: "apple" };

console.log(obj1.name);

Stack	Heap
Case 1. ( name )      →      ('김사과') Case 2. (obj1)     →    Heap 의 name 공간을 가리킴	→  Case 2.   (name("apple"))

 

2.1.1 Numeber - 숫자

• 정수, 실수 , 음수 양수 모두 포함

2.1.2 string - 문자열

• 텍스트 데이터를 표현
• 큰 따옴표, 작은 따옴표, 백틱으로 감싼다.
• 문자1 + 문자2 = 문자1문자2

cf. 외부 데이터를 사용할 때, 모든 숫자가 문자형으로 들어오기 때문에

캐스팅 (문자 → 숫자로 변환) 이라는 과정을 거쳐야 한다.

 

2.1.3. boolean - 참 또는 거짓

• true 또는 false 두 가지 값만 가질 수 있음
• 조건문에서 주로 사용

2.1.4 Undefined - 값이 정의 되지 않음

• 변수를 선언했지만 값을 주지 않았을 때 자동으로 undefined가 된다.

2.1.5 Null - 아무 값도 없음

• 의도적으로 " 값이 없다 "는 것을 나타낸다.

2.1.6 Symbol - 고유한 식별자

• 유일한 값이 필요한 경우 사용
• 일반적으로 자주 쓰이지 않음

2.1.7 Bigint - 아주 큰 정수

• 일반 number로 표현할 수 없는 큰 정수 (Bigint > 10^6)
• 숫자 뒤에 n을 붙인다.

 

3. 참조형 (Reference Type)

참조형은 값이 아닌 주소(참조)를 저장한다.

이 주소는 힙 메모리에 저장되며, 값은 변경 가능하다.

obj 는 스택에 저장되고 힙에 저장되어있는 키 + 키안의 값(value)를 가리킴

 

// 참조형 : stack의 obj2가 Heap의 obj1와 같은 주소를 가리킴

let obj1 = { name: "apple" };

console.log(obj1.name);

let obj2 = obj1;

obj2.name = "banana";

console.log(obj2.name); // banana

console.log(obj1.name); //원래 변수의 값도 바뀐다.

 

 

2.1 object – 여러 값을 하나로 묶는 자료형

• {key : 'value'} -str
• {key : 123 } - num

2.2 array – 순서가 있는 값들의 집합

• [ 1, 2, 3 , 'apple', 123]
• 값은 어떤 타입이든 섞여도됨

2.3 function – 실행 가능한 코드 블록

• 함수명 : function ( ) {   return "Hi"  }
• 함수도 객체이지만, 호출할 수 있다는 점에서 특별한 역할

2.4 date, regexp, map, set, class 등

• Ex) let now : new Date( )
• 자바스크립트에는 기본 객체 외에도 다양한 내장 객체가 존재한다.

/*

    기본형( Primitive Type)

*/

// 내부적으로 각자 다른 값을 가짐

let num = 20;

let str = "Hello, JS!";

let isReady = true;

let nothing = null;

let notDefined;

let bigNumber = 123456789012334567n;

let unique = Symbol("id");

console.log("기본형 타입 출력");

console.log("num", num);

console.log("str", str);

console.log("isReady", isReady);

console.log("nothing", nothing);

console.log("notDefined", notDefined);

console.log("bigNumber", bigNumber);

console.log("unique", unique);

// 기본형 : 값을 복사해서 같은 값의 공간을 새로 생성함

// 참조형 : stack의 obj2가 Heap의 obj1와 같은 주소를 가리킴

let obj1 = { name: "apple" };

console.log(obj1.name);

let obj2 = obj1;

obj2.name = "banana";

console.log(obj2.name); // banana

console.log(obj1.name); //원래 변수의 값도 바뀐다.

/*

    참조형(Reference Type)

*/

//object - 여러 값을 하나로 묶는 자료형

let person = { name: "apple", age: 20 };

// array - 순서가 있는 값들의 집합

let numbers = [1, 2, 3, 4, 5];

// function - 실행 가능한 코드 블록

let greet = function () {

  return "안녕하세요";

};

// date, regexp, map, set, class etc... -> 내장 함수

let now = new Date();

console.log("참조형 타입 출력");

console.log("person :", person);

console.log("numbers :", numbers);

console.log("greet() :", greet());

console.log("now :", now);

// ```(벡틱)

let num1 = 10;

let num2 = 5;

// 10*5 = 50

console.log(num1, "*", num2, "=", num1 * num2);

console.log(`${num1}*${num2}=${num1 * num2}`);

 

4. 스택과 힙 (Stack & Heap)

3.1 스택의 특징

• Last-In , First-Out (LIFO)
• 작고 단순한 값들 저장(데이터 하나, 여러개X)
• 함수 호출 시 실행 정보(변수, 매개변수 등)가 저장됨

3.2 힙의 특징

• 크고 복잡한 데이터 저장(주로 객체, 배열, 함수)
• 구조는 자유롭지만 속도 느림
•  Stack - 값의 주소(참조값)  /  Heap - 값  
• 가비지 컬렉터가 불필요해진 데이터를 자동 정리할 수 있음

Stack	Heap
함수 , 매개변수  → 함수 호출 시 실행정보	객체, 배열, 함수

 

 

# 가비지 컬렉션(Garbage Collection) ?

사용하지 않는 메모리 정리!!!

Heap에서 Heap의 객체가 더이상 Stack에서 참조받지 않는 것들(=화살표가 끊킨 객체들)을 알아서 정리해준다.

 

5. 타입 변환 (Type Conversion)

자바스크립트는 타언어와 비교할 때, 비교적 언어의 문법이 유연한 편이다.  자바스크립트는 동적 타입 언어라서, 상황에 따라 문자열이 숫자로 , 숫자가 불리언으로 자동 변환될 수 있다. 이처럼 

- 자동으로 타입 바꾸는 것 : 암시적(자동) 타입 변환

- 수동으로 타입 바꾸는 것 : 명시적(수동) 타입 변환