02_변수(variable)

Onew·2025년 9월 24일
JavaScriptvariable
0

js

목록 보기
7/24

1. Data Type

1_1) 타입 종류

  • data type은 값의 종류를 말하며 자바 스크립트는 7개의 데이터 타입을 제공한다.

  1. 숫자 타입 (number)

    • 자바 스크립트의 경우 하나의 숫자 타입만 존재하고 모든 수를 실수로 처리한다.
    var integer = 10;
var double = 5.5;
var negative = -10;
    • 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.
      • Infinity : 양의 무한대
      • Infinity : 음의 무한대
      • NaN : 산술 연산 불가

  2. 문자열 타입 (string)

    • 문자열 타입은 텍스트 데이터를 나타낼 때 사용한다.
    var string;
string = 'JavaScript';
string = "JavaScript";
string = `JavaScript`;
    • 작은 따옴표, 큰 따옴표, 백틱(````)으로 텍스트를 감싸 사용한다.
    • 자바 스크립트의 문자열은 원시 타입이며 변경이 불가능한 값이다.
    • 템플릿 리터럴(````)

      • 내장된 표현식을 허용하는 문자열 작성 방식이다.

      • backtick(````)을 이용하며 JavaScript의 변수를 문자열 안에 바로 넣어 사용할 수 있다.

      • 표현식은 $과 중괄호{}로 표기한다.

        const age = 100;
const message = `고양이는 ${age}살입니다`;

console.log(message)

  3. 논리 타입 (boolean)

    var flag = true;
console.log(flag);

flag = false;
console.log(flag);
    • boolean 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.

  4. undefined와 null

    • undefined
      • undefined 타입의 값은 undefined가 유일하다.
      • var 키워드로 선언한 변수는 undefined로 초기화 되므로 변수를 선언한 후 값을 할당하지 않은 변수를 참조 하면 undefined가 반환 된다.
      • 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이므로 개발자가 의도적으로 할당하는 것은 혼란을 줄 수 있으므로 지양한다.
    • null

      • null 타입의 값은 null이 유일하다.

      • 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

      • 이전에 할당 되어 있던 값에 대한 참조를 제거하지 않는 것을 의미한다.

        var nullVal = 'something';
nullVal = null;

console.log(nullVal);

  5. Symbol 타입과 객체 타입

    • Symbol 타입

      • 변경 불가능한 원시 타입의 값이며 어떤 것에도 영향을 주지 않는 이름표 역할을 한다.

      • ES6에서 도입된 데이터 타입이다.

      • 중복되지 않는 유일무이한 값이므로 이름 충돌할 일이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

      • Symbol()을 사용해 심볼 값을 만든다.

        let student = {name : "홍길동"};
let id = Symbol("id");
student[id] = 1;

console.log(Object.keys(student));  // ['name']
console.log(Object.getOwnPropertyNames(student));  // ['name']
console.log(student[id]);  // 1

      • Symbol 타입 키를 사용하면 프로퍼티가 중복으로 사용되거나 덮어 씌워 지는 걸 예방할 수 있다.

    • 객체 타입 (object)

      • number, string, boolean, undefined, null, Symbol 6가지 타입을 제외하면 모두 객체 타입이다.

        var obj = {};
var func = function () {};
var arr = [];

1_2) 동적 타입 언어(dynamically typed language)

  • 정적 타입 언어
    • 변수를 선언할 때 데이터 타입을 사전에 선언 해야 한다.
    • 변수의 타입을 변경할 수 없으며 변수에 선언한 타입에 맞는 값만 할당할 수 있다.
    • 컴파일 시점에 타입 체크를 수행하는데 타입의 일관성을 강제해 런타임 에러를 줄인다.
  • 동적 타입 언어
    • 변수 선언이 아닌 할당에 의해 타입이 결정 되며 재할당에 의해 변수 타입은 언제든지 동적으로 변할 수 있다.
    • 변수의 값이 변경될 수 있기 때문에 값을 확인하기 전에는 타입을 확신할 수 없다.
    • 유연성은 높지만 신뢰성은 떨어진다.
    • 동적타입 언어 보완을 위한 변수 사용 시 유의할 점
      1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다.
      2. 변수의 유효 스코프를 최대한 좁게 만든다.
      3. 전역 변수를 지양한다.
      4. 변수보다 상수를 사용해 값의 변경을 억제한다.
      5. 변수명을 통해 변수의 목적이나 의미를 파악할 수 있도록 한다.

2. 타입 변환(coercion)

2_1) 암묵적 타입 변환(implicit-coercion)

  • 문자열 타입으로 변환

    • 문자열 연결 연산자(+)는 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 변환한다.

      console.log(10 + '20');
  • 숫자 타입으로 변환

    • 산술 연산자의 피연산자는 모두 숫자여야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

    • 비교 연산자로 크기를 비교하기 위해 모두 숫자 타입이어야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

    • + 단항 연산자는 피연산자가 숫자 타입.의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환한다.

      console.log(10 - '5');
console.log(10 > '5');
console.log(+'');
  • 논리 타입으로 변환
    • 불리언 타입이 아닌 값을 Truthy 참 또는 Falsy 값으로 구분한다.
    • Truthy는 true로, Falsy는 false로 암묵적 타입 변환 된다.

2_2) 명시적 타입 변환(explicit coercion)

  • 문자열 타입으로 변환

    • String 생성자 함수를 new 연산자 없이 호출한다.

    • toString() 메서드를 사용한다.

    • 문자열 연결 연산자를 이용한다.

      console.log(String(10));
console.log((10).toString());
console.log(10 + '20');
  • 숫자 타입으로 변환

    • Number 생성자 함수를 new 연산자 없이 호출한다.

    • parseInt, parseFloat 함수를 이용한다.

    • + 단항 산술 연산자를 이용한다.

    • 산술 연산자를 이용한다.

      console.log(Number('10'));
console.log(parseInt('10'));
console.log(parseFloat('10.01'));
console.log(+'');
console.log('10' * 1);
  • 논리 타입으로 변환

    • Boolean 생성자 함수를 new 연산자 없이 호출한다.

    • ! 부정 논리 연산자를 두 번 사용한다.

      console.log(Boolean('JavaScript'));
console.log(!!'JavaScript');

3. Scope

  • 코드에서의 스코프란, 변수에 접근할 수 있는 범위를 의미한다.
  • 바깥쪽 스코프에서 선언한 변수는 안쪽에서 사용이 가능하다.
  • 안쪽 스코프에서 선언한 변수는 바깥쪽에서 사용이 불가능하다.
  • 스코프는 중첩이 가능하다.

  • 전역 스코프 (Global Scope)

    • 코드의 가장 바깥 영역을 의미한다.
    • 코드의 최상위 레벨에 해당하는 스코프로 함수 어디에서든 접근이 가능하다.

  • 지역(블록) 스코프 (Local Scope)

    • 함수(블록) 몸체 내부를 의미한다.
    • 특정 함수(블록)에 해당하는 스코프로 해당 함수 자신과 하위 함수에서만 접근이 가능하다.

  • 전역 변수 (Global variable)

    • 바깥쪽 스코프에서 선언된 변수이며 어디든지 참조가 가능하다.

  • 지역 변수 (Local variable)

    • 안쪽 스코프에서 선언된 변수이며 선언된 스코프 안에서만 참조가 가능하다.

4. JavaScript의 변수 키워드

  • var

    • 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 가진다.
    • 재할당과 재선언이 가능하다.
    • 호이스팅(hoisting) 현상이 발생할 수 있다.
      • 호이스팅 현상이란 변수 선언이 끌어올려지는 현상이다.
      • 어디에 선언을 해도 실행 되기 전에 코드가 최상단으로 끌어 올려지고 실행하게 된다.
      • 이로 인해 가독성이 떨어지고 오류가 생길 여지가 있으므로 사용을 지양한다.

  • let

    • 블록 스코프를 가지는 지역 변수를 선언한다.
    • 재할당이 가능하며 재선언은 불가능하다.

  • const

    • 블록 스코프를 가지는 지역 변수를 선언한다.
    • 재할당과 재선언 모두 불가능하다.

  • 어떤 변수를 사용해야 할까?

    • 보통 const를 기본으로 사용한다.
    • 필요한 경우에만 let으로 전환한다.
      • let을 사용한다는 것은 해당 변수가 의도적으로 변경될 수 있음을 명확하게 나타낸다.
    • 코드의 유연성을 확보하면서도 const의 장점을 활용할 수 있다.

  • 왜 const를 기본으로 사용해야 할까?

    1. 코드의 의도를 명확하게 하기 위해서
      • 해당 변수가 재할당 되지 않을 것임을 명확하게 표현한다.
      • 개발자들에게 변수의 용도와 동작을 더 쉽게 이해할 수 있게 해 준다.
    2. 버그 예방
      • 의도치 않은 변수 값 변경으로 인한 버그를 예방한다.
      • 큰 규모의 프로젝트나 팀 작업에서 중요하다 .
profile
Onew
FE
이전 포스트

1. JavaScript 개요

다음 포스트

03_연산자(operator)

0개의 댓글