1. 변수와 자료형

1) 변수와 상수

✔ 변수

변경 가능한 값을 저장하기 위한 기억 공간(memory)

사용하기 전 반드시 선언
중복 선언 불가능
키워드 : let

let A = 123; // 변수 선언 및 값 초기화

A = 456; // 값 재할당

let A = 789; // 재선언 -> error : 이미 선언 되어있기 때문

✔ 상수

변경 불가능한 값을 저장하기 위한 기억공간

사용하기 전 반드시 선언
중복 선언 불가능
키워드 : const

const B = 123; // 상수 선언 및 값 초기화

B = 456; // 값 재할당 -> error

const C; // 초기화 없이 상수 선언 -> error
C = 123; // error

✔ 호이스팅(Hosting)🤯

코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업

var의 변수, 함수 선언만 위로 올려지고 할당은 올려지지 않음
let, const 변수 선언과 함수 표현식에선 호이스팅 발생 X

// using var
console.log(name); // undefined
var name = "jiyeong";
console.log(name); // jiyeong

// using let, const
console.log(name2); // jiyeong
let name2 = "jieyong";

2) 자료형

자료형의 종류

자료형 : 목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터의 종륲

6가지의 원시타입, 1가지의 객체 타입 자료형으로 구성
1. 원시타입
  - Boolean
  - null
  - undefined
  - number
  - string
  - symbol : 문자열과 함께 객체 property로 사용, ES6에 추가
2. 객체타입
  - object

✔ typeof

인수의 자료형을 반환하는 연산자

연산자인 typeof x와 함수인 typeof(x)로 문법 지원

console.log(typeof undefined); // undefined
console.log(typeof 123); // number
console.log(typeof 461n); // bigint
console.log(typeof true); // boolean
console.log(typeof "hi"); // sting
console.log(typeof Symbol("hi")); // symbol
console.log(typeof Math); // object
console.log(typeof null); // object
console.log(typeof console.log); // function

✔ 원시 타입 : Boolean

논리적인 값을 표현하는 자료형

참(true), 거짓(false)만 존재
주로 조건문 등에서 동작 판단의 기준으로 사용

✔ 원시 타입 : null & undefined

null
- null : 비어있다는 의미로 표현되는 자료형
- 존재하지 않는(nothing), 비어 있는(empty), 알 수 업슨(unknown)값을 나타내는데 사용
undefined
- 값이 할당 되어있지 않은 상태를 나타날 때 사용되는 자료형
- 변수 선언 후 초기화 하지 않으면 자동 할당 됨

✔ 원시 타입 : number

정수, 부동소수점(floating point) 숫자를 표현하는 자료형

number와 관련된 연산은 대표적으로 사칙연산(+,-,*,/)가 있음
일반적인 숫자 외 Infinity, -Infinity, NaN(Not a Number) 같은 특수 숫자 값 포함
number에서는 2⁵³ - 1보다 큰 값을 사용할 수 없음 -> bigint 자료형 사용

✔ 원시 타입 : string

문자, 문자열을 표현하는 자료형

3가지 종류 따옴표로 표현
1. 큰 따옴표 : ""
2. 작은 따옴표 : ''
3. 역 따옴표(백틱) : (``)

✔ 객체 타입 : object

다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현할 수 있는 자료형

Object() or 중괄호({})를 통해 생성
개체는 key: value 형태로 표현, 접근은 object.key 형태로 표현

2) 객체 복사 문제점

✔ object 복사

값을 복사할 때 대상 전체가 아닌 객체 내 주소 값만 복사되는 문제

가리키는 대상 전체를 복사하는 방법 : 얕은 복사(shallow copy), 깊은 복사(deep copy)

얕은 복사
⚠ 문제점 : 객체 내 또 다른 객체가 있으면 복사되지 않음
1. __for문 이용__

// 얕은 복사 1
let user = {
  name: "park",
  age: 34,
};

let admin = {};

for (let key in user) {
  admin[key] = user[key]; // user에 있는 key값을 admin에 전부 복사해서 넣음
}

admin.name = "lee";

console.log(admin.name); // lee
console.log(user.name); // park

Object.assing() 함수 이용

// 얕은 복사 2
let user = {
  name: "park",
  age: 34,
};

let admin_obj = Object.assign({}, user); // 빈 객체에 user 객체를 넣어라

admin_obj.name = "lee";
user.age = 30;

console.log(admin_obj.name); // lee
console.log(user.name); // park
console.log(admin_obj.age); // 34
console.log(user.age); // 30

전개 연산자(Spread Operator)를 이용(ES6부터 지원)

// 얕은 복사 3    
let user = {
  name: "park",
  age: 34,
};

let admin_spread = { ...user }; // user내의 모든 필드 값을 전개(나열) 시켜라

admin_spread.name = "lee";
user.age = 30;

console.log(admin_spread.name); // lee
console.log(user.name); // park
console.log(admin_spread.age); // 34
console.log(user.age); // 30

깊은 복사
내부에 객체가 있으면 자동으로 얕은 복사 함

재귀 함수를 이용

let user = {
  name: "john",
  age: 23,
  sizes: { height: 180, weight: 72 },
};

function copyObj(obj) {
  let result = {};
  for (let key in obj) {
    if (typeof obj[key] === "object") result[key] = copyObj(obj[key]);
    else result[key] = obj[key];
  }
  return result;
}

let admin = copyObj(user);

admin.sizes.weight++;

console.log(admin.sizes.weight); // 73
console.log(user.sizes.weight); // 72

JSON 객체를 이용
stringify는 객체를 문자열로 변환하는데 이때 원본 객체와의 참조가 끊김

/* stringify : js object -> string,
  parse : string -> js object
  어떤 단계가 있던 간에 새로운 object로 만들어줌
*/
let user = {
  name: "john",
  age: 23,
  sizes: { 
    height: 180, 
    weight: 72,
  },
};

let admin_json = JSON.parse(JSON.stringify(user));

admin_json.sizes.weight++;
--admin_json.sizes.height;

console.log(admin_json.sizes.weight); // 73
console.log(admin_json.sizes.height); // 179
console.log(admin.sizes.weight); // 72
console.log(user.sizes.height); // 180

✔ 형 변환

JavaScript는 느슨한 타입 언어 혹은 동적 타입 언어로, 변수의 자료형을 명시적으로 선언할 필요가 없다.

연산자로 인한 계산이나 변수에 전달되는 값은 자동으로 암묵적 형 변환 수행
강제적 형 변환을 위해 자료형 함수를 이용해 명시적 형 변환 수행

String

console.log(String(123)); // 123
console.log(String(1 / 0)); // Infinity
console.log(String(-1 / 0)); // -Infinity
console.log(String(NaN)); // NaN
console.log(String(true)); // true
console.log(String(false)); //false
console.log(String(undefined)); // undefined
console.log(String(null)); // null

Number

console.log(String("")); // 0
console.log(String("123")); // 123
console.log(String"hello")); // NaN
console.log(String("123hello")); // NaN
console.log(String(true)); // 1
console.log(String(false)); // 0
console.log(String(null)); // 0
console.log(String(undefined)); // NaN

Boolean

console.log(String("")); // false
console.log(String("123")); // true
console.log(String"hello")); // true
console.log(String("0")); // true
console.log(String(0)); // false
console.log(String(123)); // true
console.log(String(NaN)); // false
console.log(String(null)); // false
console.log(String(false)); // false

저작자표시 비영리 변경금지

[JavaScript 개념잡기] 변수와 자료형