[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

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

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

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

 

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

 

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