ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트의 변수, 자료형, 연산자 - Do It 자바스크립트 기본편
    프론트엔드 2019. 12. 25. 07:00

    자바스크립트가 데이터를 어떻게 저장하고 관리하는지, 처리하는지 알아보자.

     

    변수

    변수(Variable) : 변하는 값을 저장할 때 사용

    상수(Constant) : 변하지 않는 값

    변수 선언 규칙

    1. 변수의 의미를 잘 나타낼 수 있는 이름으로 짓는다(무의미한 이름x)

    2. 낙타 표기법(Cammel Case)

    3. 첫 글자는 문자나 밑줄(_), 달러($)로 시작해야 한다. (그 후에는 문자, 밑줄, 달러, 숫자 사용가능)

    ◆ [ES6] : 변수를 선언할 때 var 예약어 외에 let(블록 안에서만 사용), const(상수) 예약어도 사용 가능.

     

    자료형(데이터 타입)

    자바스크립트는 변수를 선언할 때 데이터타입을 지정하지 않고 값을 할당할 때 그 값에 따라 데이터 타입이 결정됨.

    느슨한 자료형 체크(Weak Data Type Check)

    C언어, 자바 등 강한 자료형 체크(Strong Data Type Chek) 언어는 변수를 선언할 때 데이터 타입을 미리 지정해야함.

    이렇게 데이터 타입을 프로그래머가 제한하면 프로그램의 오류를 미리 방지할 수 있다.

    따라서 자바스크립트와 같은 Weak Data Type Check 언어를 사용할 때는 오류가 발생하지 않도록 변수에 의도한 값이 정확하게 들어갔는지 꼭 확인해야 한다.

    *타입스크립트(Typescript) : 자바스크립트에 Strong Type을 추가한 언어로, 자바스크립트가 웹 문서에 동적인 효과를 추가하기 위해 등장한 '가벼운 언어'에서 큰 규모의 웹 사이트나 애플리케이션도 만들 수 있는 언어가 되면서 Strong Type Check의 필요성이 커져서 등장한 언어이다.

     

    1) 데이터 타입의 종류

    기본형 : 하나의 변수에 하나의 값 저장

    number : 35

    string : 'a', "abc", "35"

    boolean : true, false 두 가지 값만 가짐

    undefined : 데이터 타입을 지정하지 않았을 때

    null : 값이 유효하지 않을 때

     

    복합형 : 하나의 변수에 여러 개의 값 저장

    array(배열), object(객체)

     

    2) 데이터 타입 확인 - typeof 연산자

    console.log(typeof 1990);
    > "number"

     

    데이터타입

    1) 정수(number)

    표현 방식에 따라 10진수, 8진수, 16진수로 나누기도 함.

    8진수 : 0~7로 표현. 10진수와 구별하기 위해 숫자0을 맨 앞에 붙임. ex) 012(10), 013(11), 02000(512)

    16진수 : 0~9와 A~F(a~f)로 표현. 10진수와 구별하기 위해 0x(0X)를 맨 앞에 붙임.

     

    2) 실수(number)

    실수를 계산할 때는 정밀도에 주의해야 함. ex) 0.1 + 0.2 = 0.30000…4

    2진수로 변환해 계산하는 과정에서 0.1과 0.2가 자릿수가 많은 소수로 변환되고, 그 상태에서 연산을 하기 때문

     

    3) 문자(string)

    : 작은 따옴표(')나 큰 따옴표(")로 묶은 데이터.

    큰 따옴표(작은 따옴표)의 중복 X

    "<span class="num">" X

    "<span class='num'>" O

     

    4) 논리형(Boolean)

    true / false 두 가지 값만 가지는 데이터 타입.

     

    5) undefined와 null

    자바스크립트는 변수를 선언할 때 데이터타입을 지정하지 않고 값을 할당할 때 그 값에 따라 데이터 타입이 결정된다.

    undefined : '처음부터 변수에 값이 할당되지 않았다'(값이 할당된 적이 없다)는 뜻. (변수가 undefined라는 데이터타입을 가진다는 의미가 아님.)

    null : '처음에 할당된 값이 더는 유효하지 않다'는 뜻. 보통 변수를 초기화할 때 많이 사용.

     

    6) 배열(array)

    배열의 선언

    var addValue = [];

    var seasons = ["봄", "여름", "가을", "겨울"];

    배열의 인덱스

    seasons[0]

    배열의 길이

    seasons.length

     

    7) 객체(object)

    var book = {
    	title : "Do It! 자바스크립트", 
        writer : "고경희", 
        price : 18,000
    }

     

    연산자

    1) 기초 산술 연산자

    +, -, *, / 사칙 연산자 

    % 나머지 연산자

    ++, — 증감 연산자

    ※증감 연산자는 사칙 연산자, 나머지 연산자(피연산자의 개수 최소 두 개 이상)와 달리 피연산자의 개수가 하나이며,

    다른 연산자와 함께 사용할 수 있는 연산자이다.

     

    2) 할당 연산자(Assignment Operator, =)

    y += x;
    y = y + x;
    //두 식은 같은 의미이다.

     

    3) 더하기 연산자(숫자를 더할 때) / 연결 연산자(문자열을 연결할 때)

    문자열과 숫자의 연산 :

    자바스크립트에서는 서로 다른 데이터 타입의 피연산자를 연산하면

    자동으로 데이터타입을 변환하여 피연산자들의 데이터 타입을 통일하고,

    결괏값의 데이터 타입을 지정해 준다.

    ◆ [ES6] : '템플릿 문자열' 도입.

    `원래 가격은 ${originPrice}원 입니다.`;

    ` : 백 쿼트, 백 틱, 그레이브 등으로 부름.

     

    4) 비교 연산자

    == 연산자와 === 연산자의 차이

    == 연산자 : 자동으로 데이터타입 변환해 비교. 데이터 타입이 달라도 값이 같으면 (ex- 10과 '10') true

    === 연산자 : 데이터타입의 변환 허용X. 값과 데이터 타입이 모두 일치해야 true

    *문자와 문자의 크기를 비교할 경우, 각 문자의 아스키 값으로 비교한 결과값을 얻게 된다.

     

    5) 논리 연산자

    true, false를 피연산자로 하는 연산자.

    && (AND 연산자), || (OR 연산자), ! (NOT 연산자)

     

    6) 연산자의 연산 순서

    단항 연산자(!, ++, --) → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자

    *단항 연산자 중 ++, -- 의 경우 피연산자 앞에 오면 다른 연산자보다 먼저 연산하고, 피연산자 뒤에 오면 다른 연산을 끝낸 후 연산한다. 

    a++ 전체 수식의 처리가 끝난 후 적용

    ++a 전체 수식을 처리하기 전에 적용


    ※ 출처 : Do It 자바스크립트 기본편, 3장 변수와 자료형 그리고 연산자

     

    댓글

Designed by Tistory.