[JavaScript] JavaScript의 자료형과 JavaScript만의 특성

들어가기 앞서,

1. 자바 스크립트 언어
   ㅇ 매우 유연하고 동적인 제어가 가능한 언어
   ㅇ 주로, 웹 페이지의 요소들의 제어를 위해 HTML 문서에 통합 작성할 수 있는 스크립트 언어

   • 초기에는 웹 브라우저에서 만 동작 가능하였지만,
   • 점차, 데스크톱,서버 등에서도 실행 가능한 환경(호스트 환경)이 나타나고 있음

2. 자바 스크립트 특징
   ㅇ 실행 방식 : 동적 인터프리터 형태의 언어

   • 클라이언트(웹브라우저 등)에 의해서 실시간 번역 실행되며, 컴파일되지 않음
     ㅇ 언어적 특징
   • (다음의 여러 특징들을 함께 지원하는 멀티 패러다임 프로그래밍 언어)

   • 객체 기반의 언어 (Object-Based Language)
     . 자바스크립트는, 자바 언어처럼 클래스 기반의 상속,캡슐화 등 처럼 객체지향 언어에서의
     .. 전통적인 특성을 지원하지 않으므로, 진정한 객체지향 언어는 아니고,
     .. 다만, 객체를 다루기 때문에 객체기반의 언어라고함
     . 따라서, 클래스 기반의 객체지향 언어가 아닌, 프로토타입 기반의 객체지향 언어 임
     .. (프로토타입 : 어떤 객체의 원본/원형이 되는 객체)
     .. 기존에 만들어진 객체의 복제에 의해 새로운 객체를 생성함
     .. 즉, 클래스 정의 방식이 아니고, 객체의 인스턴스를 만들 때 재사용이 일어남
     .. 또한, 객체 생성 후에도 프로퍼티,메소드를 동적으로 추가,삭제도 가능

   • 함수형 프로그래밍 언어 (Functional Programming Language)
     . 함수를 객체 처럼 다루고, 함수에 함수를 인수로 넘기고, 함수 리터럴이 존재하는 등

   • 이벤트 주도형(event-driven) 프로그래밍 언어
     . 사용자가 행동하기를 기다렸다가 반응하는 이벤트 처리 위주의 언어

   • 명령형 프로그래밍(Imperative Programming)은 기본 지원

   • 동적인 프로그래밍 언어
     . 언어 내부에서 상태 관리를 해주지 않고, 개발자에게 전적으로 맡기는 동적인 플랫폼 지향

     ㅇ 변수 : 동적 타입 및 바인딩

   • 명시적인 변수 선언은 var,let 이라는 단순한 예약어 만 쓰면 가능

   • 변수의 타입이 엄격하지 않음 (loosely typed)
     . 다만, 각 변수가 유일한 이름 만 있으면 됨

   • 실행 도중에도 변수에 저장된 데이터 타입이 동적으로 바뀔 수 있음
     . 즉, 동적 바인딩으로 개체 참조(연관,association)가 실시간으로 이루어짐

     ㅇ 네임스페이스 지원 문법이 없음

   • 전역 객체를 선언하여 관련된 모든 속성,메소드를 그 객체의 속성으로 만들어 사용거나,
     . 例) var NameSpace = {};

   • 즉시실행함수(IIFE)를 사용하여 구현 함

     ㅇ HTML 문서 적용 관련

   • 정적인 HTML 문서에 동적으로 변화시킬 수 있는 효과를 줌
     . 웹페이지가 사용자 동작에 반응하는 역동적 효과를 줌

   • 적용방법 : HTML 문법에 자연스럽게 연결시켜 실행되는 방법을 채택
     . HTML의 확장이며, HTML 문서 내에 자바스크립트 코드가 내장

     ㅇ 비동기적 프로그래밍 가능

   • 패러다임 변천 : 콜백함수 → 프라미스 → 제너레이터

     ㅇ 기타

   • 디스크 쓰기 : 금지

   • 코딩 난이도 : 다소 쉬움

3. 자바스크립트 역사

   ㅇ 만든이 : 넷스케이프社의 Brenden Eich
   ㅇ JavaScript를 최초로 웹브라우저에 도입 : 넷스케이프社의 네비게이터

   • 1996년 당시에 사실상의 표준 : Netscape 3

4. 자바스크립트 표준 : ECMAScript

   ㅇ ECMA의 TC-39 위원회에서, ECMA-262라는 규격명으로, 1997년부터 작업이 계속 진행중

   • (ECMAScript : 자바스크립트 언어의 내장 코어 부분을 일컬음)

   ㅇ ECMAScript는 주로 자바 스크립트 언어의 내장 코어 부분 만을 언급

   • ECMAScript 3 : 과거 거의 모든 웹브라우저 엔진이 이를 지원 (1999년)
   • ECMAScript 5 : (5 : 2009, 5.1 : 2011년)
   • ECMAScript 6 : 현재의 웹브라우저에 적용되는 가장 보편적인 버전 (2015년6월)
     . ES6 때 문법이 크게 바뀌어, 이후를 모던 자바스크립트라고 칭함
     . 例) 문자열 템플릿, 화살표 함수, let,const 선언자, 이터레이터/제너레이터 등

5. 자바스크립트 엔진 명칭

   ㅇ 자바스크립트 엔진

   • ECMAScript 규격을 따르며 자바스크립트 언어를 컴파일,실행하는 주체

   ㅇ 주요 웹브라우저의 자바스크립트 엔진 명칭

   • 파이어폭스 : SpiderMonkey
   • 인터넷 익스플로러, 엣지 : Chakra
   • 사파리 : JavaScriptCore
   • 크롬, Node.js : V8

느슨한 타입(loosely typed)의 동적(dynamic) 언어

• ㅇ 명시적인 타입이 없음

  • 자바 언어,C 언어의 int,double 등과는 달리,
    . 변수를 미리 규정하는 정적 타입이 없고,
    . 동적 타입이라고해서 실행 도중(값을 할당할 때) 정해짐

  • 기본적으로, 자동 형변환 됨

    ㅇ 엄격한 타입 구분이 없음 (느슨한 타입)

  • 다만, 각 변수가 유일한 이름 만 있으면 됨

  • 즉, 자바스크립트 변수는 특정 시간에 특정 값을 가리키는 이름 자체일 뿐,
    . 변수의 값과 타입은 실행 중에 얼마든지 바뀔 수 있음
    . 동적 바인딩으로 개체 참조(연관,association)가 실시간으로 이루어짐
    . 例) anyVar.relevantMethod() 일 때,
    .. 변수(anyVar)가 문자열형이면 문자열형 String 객체에 있는 메소드가 실행됨
    .. 변수(anyVar)가 숫자형이면 숫자형 Number 객체에 있는 메소드가 실행됨

  ㅇ 변수에 타입을 규정하는 특별한 구문이 없음

  • var, let 이라는 변수 선언 예약어 만으로도 가능
    . 변수 선언 시 자료형(Data Type)이 미리 알려주지 않음
    . 즉, 변수 자료형 미선언

  ㅇ 변수 타입(Data Type) 검사 등이 엄격하지 않음

  • 변수에 임의 타입의 값을 대입 가능
  • 변수가 임의 타입의 객체를 참조할 수도 있음
  • 사용 전에 반드시 변수 선언할 필요도 없음

JavaScript 형변환

1. 자바스크립트 형 변환 (암묵적 형 변환)
   ㅇ 암묵적 형 변환

   • (수치 → 문자열)
     . + 연산자 : 피 연산자들을 문자열로 형변환
     .. 例) 3 + "0" => 문자열 "30"

   • (문자열 → 수치)
     . -,* 이항 연산자 : 피 연산자들을 수치로 형변환
     .. 例) var test = "3"; test - 0 => 숫자 3
     . + 단항 연산자 : 피 연산자를 수치로 형변환
     .. 例) var test = "3"; +test => 숫자 3

   • (수치,문자열 → 논리형)
     . ! 단항 연산자 : 피 연산자를 Boolean으로 형변환하고, 부정(negate) 연산을 함

     ㅇ 비교 연산에 따른 암묵적인 형변환 결과

   • == 비교 연산자 : 우선, 형변환을 해보고, 그 다음에 비교 과정을 수행함
     . 단, 기본 타입의 경우에는 저장된 값에 대해 형변환 후 비교를 수행하지만,
     참조 타입의 경우에는 저장된 값이 주소이므로, 비교 수행이 별 의미없음

   • === 비교 연산자 : 형변환을 수행하지 않고, 엄격한 비교 과정을 수행함

     ㅇ 논리 연산에 따른 암묵적인 형변환 결과 (즉, 조건문이나, Boolean() 함수의 결과)

   • false로 간주되는 값들
     . 빈 문자열 (''), 0, -0, NaN, null, undefinded => false

   • true로 간주되는 값들
     . 0을 제외한 숫자, 빈 문자열을 제외한 문자열, 모든 객체, 심볼

2. 자바스크립트 형 변환 (명시적 형 변환)

   ㅇ 대부분, 암묵적인 자동 형 변환을 하지만, 때때로 명시적인 형 변환을 하려면,

   • 주로, Boolean(),Number(),String(),Object() 함수를 많이 이용함

   ㅇ 수치를 문자열로 명시적인 형변환 : Number 객체의 메소드들을 이용하는 방법

   • toString()
   • toLocaleString()
   • toFixed()
   • toExponential()
   • toPrecision()
   • 例) var num = 1234.567;
     . num.toString() => "1234.567" (10진법)
     . num.toString(16) => "4d2.9126E978d5" (16진법)
     . num.toFixed(0) => "1234" (소수점 이하 버림)
     . num.toFixed(2) => "1234.57" (소수점 이하 2자리에서 반올림)
     . num.toFixed(4) => "1234.5670" (소수점 이하 4자리)
     . num.toExponential(3) => "1.235e+3" (소수점 이하 3자리 표기 후 지수 표현)
     . num.toPrecision(6) => "1234.57" (유효숫자 6개로 표현하되, 반올림)
     . num.toPrecision(3) => "1.23e+3" (유효숫자 3개로 표현하되, 정수부 작으면 지수 표현)

   ㅇ 문자열을 수치형으로 명시적인 형변환

   • Number() 함수 : 문자열 등 모든 데이터형을 실수(부동소수점)로 형변환
     . 例) Number("3.14") => 3.14, Number(true) => 1, Number(null) => 0,
     Number(undefined) => NaN, Number([1,2,3]) => Nan, Number(NaN) => NaN

   • parseInt() : 문자열을 정수로 형변환
     . 例) parseInt("3.14") => 3

   • parseInt(num,base) : base로 지정된 진법으로 해석하여 10진수 정수 형변환
     . 例) parseInt("101",2) => 이진수로 해석하여 10진수 5

   • parseFloat() : 소수점,지수 표현까지 포함한 문자열을 실수(부동소수점)로 형변환
     . 例) parseFloat("3.14") => 3.14

   • -,* 연산자

==과 === 차이

ㅇ == : (표준 동등 연산자, standard equality operator)
- 아래와 같이, 형변환 및 비교 과정을 함께 수행함
. 타입이 같고, 값도 같으면 => true
. 타입이 같고, 값이 틀리면 => false
. undefined,null은 같은 것으로 봄 (undefined == null) => true
. 문자열,수치가 함께 있으면, 수치로 형변환한 다음에, 비교 함
.. 例) 1 == '1' // true
. 논리값일 때, true는 수치 1, false는 수치 0 으로 형변환한 다음에, 비교 함
. 객체 타입과 원시 타입이 함께 있으면,
객체를 toString(),valueOf() 메소드로 형변환한 다음에, 비교 함

ㅇ === : (완전 일치 연산자, strict equality operator)
- 형변환을 수행하지 않고, 엄격한 비교 과정을 수행함
. 따라서, 위 표준동등연산자에서 true 이라도,
완전일치연산자에서는 대부분 false 로 평가됨
. 例) 1 === '1' // false, 1 === 1 // true

느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법

타입 체크를 하지 않기 때문에 클래스 기반 객체지향 언어에 익숙한 개발자들에게는 혼란을 줄 수 있고, 또한 실행 도중에 변수에 예창치 못한 자료형이 들어와 TypeError가 발생한 경우 런타임시 확인을 해야하여, 에러를 찾기 힘들어진다.
그래서 타입스크립트를 요즘 대체 방법으로 생각하는 추세이다.
그렇지 자바 스크립트를 이용해서 이용한다면, use strict 모드를 사용하며, 예외 처리를 미리 해놓고, IDE뿐만 아니라 관련된 extention을 사용하면 비교적 쉽게 오류를 잡아가며 개발을 진행할 수 있을 것 같다. 그리고 일부 원시적 타입의 변수는 const를 활용하고 필요한 객체 타입은 불변 객체로 만들어서 사용하면 안정성을 높일 수 있다.

undefined와 null의 미세한 차이들을 비교

• ‘null’ 값_
  null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.
  null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.
  let age = null;
  자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.
  하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.
  let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

• ‘undefined’ 값
  undefined 값도 null 값처럼 자신만의 자료형을 형성합니다.
  undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.
  변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.
  let age; alert(age); // 'undefined'가 출력됩니다.
  개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다.
  let age = 100; // 값을 undefined로 바꿉니다. age = undefined; alert(age); // "undefined"
  하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하세요. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둡시다.

ref. http://www.ktword.co.kr/index.php / https://ko.javascript.info/