ABOUT AUTHOR

OnAd의 개발자 강화수입니다. 지속적인 성장을 추구합니다.

Javascript
29 Mar 2019

ECMAScript6) 자바스크립트의 변수는?

변수와 값

목차 바로가기

변수

1. 자바스크립트의 변수

  • 변수는 컴퓨터의 메모리에 일정한 크기의 영역에 할당됨.
  • 선언자 : var

  • 자바스크립트는 동적 타입을 가지기 때문에 C, JAVA와 달리 var 하나의 변수 선언자만 존재한다.

      // 여러 변수를 한번에 선언 가능
  var num = 1, a = '온애드', b  = '화이팅';

  // 선언만 한 경우 undefined 값이 됨.
  var qwer;
  console.log(qwer);  // -> undefined

2. 변수의 끌어올림 (hoisting)

  • 자바스크립트는 프로그램 중간에서 변수를 선언하더라도 소스코드의 첫머리로 끌어올려짐.

  • 선언과 동시에 대입하는 코드는 끌어올려지지 않음.

      // 선언과 동시에 대입하는 코드는 끌어올려지지 않음.
  console.log(x);  // -> undefined
  var x = 5;
  console.log(x);  // -> 5
  • 혼선을 줄이기 위해 소스코드의 첫머리에서 변수들을 선언하는 방법이 주장되고, 권유 받고 있음.

3. 변수 명명 규칙

  • 변수, 함수, 라벨 이름 등 사용자가 정의한 이름을 식별자 라고 하고, 규칙이 있음(파이썬 변수명명 규정과 동일)
    1. 영어, 숫자, 밑줄, 달러기호( $ )
    2. 첫글자로 숫자는 안됨
    3. 예약어를 이름으로 사용하지 못함 (function, var 등등)
  • 표기법
    1. lowerCamelCase - 최초글자는 소문자, 단어의 첫글자는 대문자
    2. UpperCamelCase - 단어의 첫글자는 무조건 대문자
    3. snake_case - 모두 소문자, 단어의 연결은 _ 기호 사용

데이터 타입

1. 동적 타입핑(Dynamimc typing)

  • 자바스크립트는 기본적으로 동적 타입 언어이다. (파이썬과 비슷)
  • 따라서 var 선언자 하나만으로 모든 변수를 선언할 수 있다.
  • 크게 보았을 때, 자바스크립트가 처리할 수 있는 데이터 타입은 두가지로 나눌 수 있다.
    1. 원시 타입
      • 숫자
      • 논리값
      • 문자열
      • 특수값(undefined, null)
      • 심볼(Symbol): ECMAScript6에서 추가
    2. 객체 타입
      • 원시타입에 속하지 않는 자바스크립트의 값
      • 변수 여러개가 모여 만들어진 복합 데이터 타입

2. 숫자

  • 자바스크립트의 숫자는 int와 float이 따로 구분되지 않음.
  • 숫자는 모두 64bit 부동소수점

  • 부동소수점의 정수부가 0인경우는 0 생략가능

      var flaot_point = 0.14;
  var float_point2 = .14;
  console.log(float_point == float_point2);  // -> true

3. 문자열

  • 작은 따옴표나 큰따옴표로 표현 '문자열', "문자열"
  • 만약 HTML 태그의 속성에 자바스크립트를 넣는 경우,
    HTML 코드에는 "" 사용, 자바스크립트 코드에는 "" 사용하는 것이 권장됨.

4. 논리값

  • true, false 두가지가 존재함

5. 특수한 값

  • null, undefined 두가지.
  • undefined는 정의되지 않은 상태.
    • 값을 아직 할당하지 않은 변수의 값
    • 없는 객체의 프로퍼티에 접근
    • 없는 배열의 요소에 접근
    • 아무것도 반환하지 않는 함수가 반환하는 값
    • 함수 호출 시, 전달받지 못한 인수의 값
  • null 은 아무것도 없음 이라는 의미. 파이썬의 None과 같음.

ECMAScript 6 부터 추가된 타입

1. 심벌 (Symbol)

  • 자기자신을 제외한 어떤 값과도 다른 유일 무이한 값. Symbol()은 호출시 마다 새로운 값을 생성

  • 심벌의 생성

      var sym1 = Symbol();
  var sym2 = Symbol();
  console.log(sym1 == sym2);  // -> false

  var heart = Symbol("하트");  // Symbol에 설명을 덧붙이기

  // symbol의 설명을 확인
  console.log(heart.toString())  // -> Symlbol("하트")

  • Symbol 은 플래그값(-1, 0, 1 등)을 라벨링 하는데에 사용하기 용이함.

      var isonad = 1;
  var isnotonad = -1;

  // 심볼을 사용한다면
  var isonad = Symbol("온애드맞음");
  var isnotonad = Symbol("온애드아님");

2. 템플릿 리터럴 (Template literal)

  • Template literal 은 ` `` ` 로 묶인 문자열이다.
  • 템플릿 리터럴 안에서의 줄바꿈은 \n 이아니라 그냥 enter 키를 치면 됨.
  • 템플릿 리터럴 안에는 플레이스홀더 를 넣을 수 있다.

  • 플레이스 홀더는 템플릿 리터럴 안에서 ${...} 과 같이 사용할 수 있다.

      var now = new Date();
  var text = `today is ${now.getMonth() + 1}월, ${now.getDate()}일`;
  console.log(text);
  // -> today is 3월, 12일
  • 본래 문자열과 변수간의 덧셈을 활용해 문자열을 연결하는 방식을 사용했지만 보간 표현식(플레이스 홀더)을 이용하면 더욱 알아보기 쉽게 작성할 수 있다.
Tags:



CATALOG