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

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

    
    
    2. 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

    
    
    3. 전개 연산자(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

  • 깊은 복사
    내부에 객체가 있으면 자동으로 얕은 복사 함
    1. 재귀 함수를 이용

    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

    
    
    2. 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는 느슨한 타입 언어 혹은 동적 타입 언어로, 변수의 자료형을 명시적으로 선언할 필요가 없다.

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

 

1. 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

 

2. 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

 

3. 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