[JS] javaScript 소개 / 기본

June 14, 2022

01. 자바스크립트란?

자바스크립트는 웹페이지에 생동갑을 불어넣기 위해 만들어진 프로그래밍 언어이다.
자바스크립트로 작성한 프로그램을 스크립트라고 부르며, 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

02. 장점

HTML/CSS와 완전히 통합할 수 있다
브라우저 환경에서 가장 널리 사용되는 언어이다
자바스크립트로 변환(transpile)할 수 있는 다양한 프로그래밍 언어들이 존재한다
- ex) CoffeeScript, TypeScript, Flow, Dart
그 외 서버나 모바일 앱 등을 만드는 것 또한 가능하다

03. 메뉴얼 / 명세서

04. 자료형

자바스크립트에는 여덟 가지 기본 자료형이 있다.

Number, BigInt, String, Boolean, Null, Undefined, Object

숫자형

숫자형(number type)에는 정수, 부동소수점 숫자, Infinity, -Infinity, NaN가 포함된다.

    alert('문자형' / 2); // NaN

자바스크립트는 말이 안 되는 수학 연산을 하더라도 스크립트는 치명적인 에러를 내뿜으며 죽지 않는다. NaN을 반환하며 연산이 종료될 뿐이다.

BigInt

BigInt형은 숫자형의 범위를 넘어서는 값인 9007199254740991보다 큰 값 혹은 -9007199254740991보다 작은 값을 다룰 때 필요하다.

    // 끝에 'n'이 붙으면 BigInt형 자료입니다.
    const bigInt = 1234567890123456789012345678901234567890n;

문자형

자바스크립트에선 문자열(string)을 따옴표로 묶는다.

    let str = "Hello";
    let str2 = 'Single quotes are ok too';
    let phrase = `can embed another ${str}`;

변수나 표현식을 역 따옴표로 감싼 후 ${…} 안에 넣으면 아래와 같이 원하는 변수를 문자열 중간에 손쉽게 넣을 수 있다.

    let name = "Stella";
    // 변수를 문자열 중간에 삽입
    alert( `Hello, ${name}!` ); // Hello, Stella!

Boolean

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이다.

null

존재하지 않는 값(nothing), 비어있는 값(empty), 알 수 없는 값(unknown)을 나타내는 데 사용한다.

undefined

값이 할당되지 않은 상태이다. 변수를 선언하고, 값을 할당하지 않았을 때 undefined가 자동으로 할당된다.

    let name;
    console.log(name); // 'undefined'

Object (객체)

데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있는 특수한 자료형이다.

    let user = {
        name: "Stella", // key: "name", value: "Stella"
        age: 27         // key: "age", value: 27
    };

typeof 연산자

typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나, 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

    typeof undefined // "undefined"
    typeof 0 // "number"
    typeof 10n // "bigint"
    typeof true // "boolean"
    typeof "foo" // "string"
    typeof null // "object"

null의 결과값이 object인 것을 유의하도록 하자. (언어 자체의 오류)

05. 엄격 모드

엄격 모드는 ‘use strict’로 활성화한다. 엄격 모드가 적용되면 스크립트는 모던한 방식으로 동작한다.

    <script>
        'use strict';
        ...
    </script>

‘use strict’는 반드시 스크립트 최상단에 위치해야 한다.
엄격 모드는 취소가 불가능하다.
코드에 클래스와 모듈이 있다면 엄격 모드가 자동으로 적용된다.

Twitter Facebook LinkedIn

Stella Kim