[JavaScript] JavaScript 기본, 자료형

코드 구조

문(statement) 

• syntax structure, command 의미
• 코드엔 원하는 만큼 문을 작성 가능 
• 가독성을 높이기 위해 서로 다른 줄에 작성

세미클론(semicolon)

• 서로 다른 문은 세미클론으로 구분하지만 생략 가능
• 줄 바꿈이 있으면 암시적 세미클론으로 해석 : 세미클론 자동 삽입 됨
• 세미클론 자동 삽입이 작동하지 않는 상황 도 있음 : 대괄호 앞에서는 줄바꿈을 세미클론으로 해석하지 않음

alert('에러 발생!') //세미클론을 붙이지 않으면 다음 문장 에러발생
[1,3].forEach(alert)

주석(comment)

• //
  • 한 줄짜리 주석
  • 이 주석을 만나면 그 줄은 다 주석처리
  • 단축키 Ctrl + / (Mac : Cmd + /)
• /* */ 
  • 여러 줄 주석
  • /*를 만나면 */ 만나기 전까지 주석처리
  • 중첩 주석은 지원 안함
  • 단축키 Ctrl + Shift + / (Mac : cmd + Option + /)

 

엄격 모드

기존의 기능을 변경하지 않으면서 새로운 기능이 추가되면서 발전해온 자바스크립트

창시자들의 했던 실수, 불완전한 결정이 영원히 박제 됨

ECMAScript5(ES5) 2009년 등장하면서 새로운 기능 추가되고 기존 기능 중 일부 변경 => 하휘 호환성 문제 발생

호환성 문제 해결하기 위해 기본 모드에선 활성화 안됨

use strict 라는 지시자 사용 할 경우만 엄격 모드(strict mode) 활성화 됨

use strict

• 스크립트 최상단에 "use strict"가 있으면 "모던한"방식으로 동작
• 함수 본문 맨 앞에 올 경우 해당 함수만 엄격 모드로 실행 됨
• 엄격 모드가 적용되면 취소 할 수 없음
• 브라우저 콘솔에서 사용 할 경우 'use strict'; 기입 후 줄바꾸고 테스트하려는 코드 입력

'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
//  ...테스트하려는 코드 입력
<Enter를 눌러 실행>


(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

• 코드를 클래스와 모듈을 사용해 구성하면 'use strict'를 생략 가능

 

자바스크립트 자료형

동적 타입 언어로 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든 바꿀 수 있음

숫자형(Number type)

• 정수(10진수, 8진수, 16진수) 및 부동소수점 숫자(실수)
  • 25, -456, 052, 0x54, 123.00, -1.23e3​ 등
• 사칙연산 비롯해 다양한 연산 가능
• 특수 숫자 값 포함 : Infinity(무한대)

문자열(String)

따옴표로 묶인 일련의 문자

"큰 따옴표는 큰 따옴표로 끝낸다" '작은 따옴표는 작은 따옴표로 끝낸다'

 

JS의 문자열 관련 내장객체들('javascript string' 검색)

.length : 글 자수를 알려주는 내장객체

.toUpperCase() : 소문자로 쓴 알파벳을 대문자로 바꿔주는 내장객체

.indexOf('찾고싶은 문자') : 찾고싶은 문자열이 몇 번째 글자에서 시작하는지 알려주는 내장객체

.trim() : 첫 글자 시작전에 공백과 마지막 글자 이후에 공백을 자동으로 삭제 해주는 내장객체

 

숫자와 문자열의 연산 차이

1 + 1 = 2

"1" + "1" = "11"

 

논리형 : 불리언(boolean)

참(true), 거짓(false)을 값으로 가지고 두개를 합쳐서 불리언이라고 부른다.

비교연산자를 통해서 결과 값으로 참과 거짓을 갖는다.

 

비교연산자 사용법

좌항 === 우항 : 좌항과 우항이 같으면 true, 틀리면 false.

(=== : 엄격한 동등 연산자로 값과 데이터타입도 같아야 한다. / == : 동등연산자로 데이터타입이 다르더라도 값이 같아야 한다.)

좌항 < 우항 : 우항이 좌항보다 크면 true, 크지않으면 false. 

(웹브라우저에 <,>(꺽쇠)를 직접 쓰고 싶으면  &lt;와 &gt;로 표시해줘야한다)

    <h3>1 === 1</h3>
    <script>
      document.write(1===1);        // 결과 값 true
    </script>                     

    <h3>1&lt;1<h3>                                    
    <script>                    
      document.write(1<1);            // 결과 값 false  
    </script>    
    
    <h3>1 === '1'</h3>
    <script>
      document.write(1==='1');        // 결과 값 false
    </script>                     

    <h3>1 == '1'</h3>                                 
    <script>                    
      document.write(1=='1');            // 결과 값 true  
    </script>