자바스크립트 소개와 기본 규칙

Posted on | In |

자바스크립트 소개

  • javascript는 인터프리터 언어이기 때문에 컴파일이 필요없다.
  • javaScript는 멀티-패러다임 언어로 명령형 (imperative), 함수형 (functional), 프로토타입 기반 (prototype-based) 객체지향형 언어다.
  • 구글의 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경(Runtime Environment)인 Node.js의 등장으로 JavaScript는 웹 브라우저를 벗어나 서버 사이드 어플리케이션 개발에서도 사용되는 Full stack 개발 언어가 되었다.
  • javascript는 크로스 플랫폼을 위한 모바일 웹/앱 개발 분야에서도 가장 중요한 언어로 주목받고 있다. 웹은 물론 모바일 하이브리드 앱(PhoneGap, Sencha Touch, Ionic), 서버 사이드(NodeJS), Desktop(Electron, AppJS), 로봇 제어(Cylon.js, NodeBots) 언어로서 세계에서 가장 인기있는 언어이다.

프로토타입 기반

클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 프로토타입 기반 프로그래밍은 클래스가 없고 객체를 원형으로 하여 복제의 과정을 통해 객체의 동작 방식을 다시 사용할 수 있다.
자바스크립트는 클래스와 상속 개념은 없지만 비슷한 프로토타입 개념이 존재 한다.

크로스 플랫폼

멀티 플랫폼이라고도 하며, 프로그램들을 하드웨어와 OS 상관없이 둘 이상의 플랫폼에서 실행할 수 있는 것을 말한다.
예전에 플랫폼은 특정 컴퓨터 시스템에 특정 프로그램만 실행이 가능했지만, 요즘은 특정 하드웨어나 OS에 상관없이 프로그램을 사용 가능하도록 발전하였다. 이러한 프로그램이나 소프트웨어를 지칭하여 크로스 플랫폼이라고 한다.

자바스크립트 역사

  • 1995년 Javascript는 Brendan Eich가 초기 브라우저인 넷스케이프에 탑재하기 위해서 웹페이지에 포함되는 스크립트 언어로서 개발했다.
  • 인터넷 익스플로러도 JScript라고 이름 붙인 자바스크립트를 지원하기 시작했다. 두 언어가 분화되는 것을 막기 위해 넷스케이프는 자바스크립트 표준화를 Ecma라는 국제 표준 단체로 넘겼다.
  • javaScript는 상표명이기 때문에 상표 분쟁을 막기 위해 Ecma에 등록된 자바스크립트의 이름은 EcmaScript가 되었다.
  • 2015년 6월에 ECMAScript의 6번째 명세인 ECMAScript 2015(이하 ES6)가 발표됐고, let/const keyword, module system, Arrow Function, class 등이 추가되었다.
  • 7번째 명세인 ECMAScript 2016(이하 ES7)이 2016년 6월에 발표되었다.

브라우저 지원

  • 모던 브라우저의 ES6 지원은 97%로 거의 100%에 육박하지만 IE 지원을 고려한다면 babel과 같은 Transpiler를 사용하여야 한다.

자바스크립트 용어와 기본규칙

1. 구문(statement)

  • 값, 연산자, 표현식, 키워드, 주석으로 구성되는 한줄의 명령.
  • 세미콜론(;)으로 끝나는 영역.

2. 코드블록(code block)

  • 구문(statement)을 코드블록으로 그룹화할 수 있다.
1
2
3
function myFunction(x, y) {
  return x + y; // 구문
}

3. 할당연산자(assign, =)

Ex) var x = 6;

  • 메모리(x)에 값(6)을 저장한다는 의미.
1
2
var time = 10; // 변수 선언과 할당
var greeting; // 변수 선언

4. 흐름제어(Control Flow)

  • 조건문, 반복문
  • 조건이 참이면 해당 구문을 실행하고, 거짓이면 실행하지 않는다.
    1
    2
    3
    4
    5
    6
    7
    if (time < 10) {
      greeting = 'Good morning';
    } else if (time < 20) {
      greeting = 'Good day';
    } else {
      greeting = 'Good evening';
    }

5. 변수(variable)

  • var 라고 쓴다.
  • 자바스크립트에서는 정해진 변수 타입이 없다.
  • 즉, var로 문자열, 문자, 숫자, 객체 모든 타입을 선언할 수 있다.
  • 값을 할당, 참조하기 위해 사용된다.
  • Typescript는 javascript에서 데이터 타입이 없는 것과 다르게 데이터 타입은 선언할 수 있다.

자바스크립트 기본 규칙

  • 문자열은 홀 따옴표를 사용한다.(‘hello’)
  • 자바스크립트는 아래 7가지 데이터 타입을 제공한다.(기본자료형6개 + 객체)
  • 기본자료형(primitive data type) : Boolean, null, undefined, Number, String, Symbol(ES6에서 추가)
  • 객체형 : Objcet

[참고] null과 undefined의 차이

null

  • null이라는 값을 가진다.
  • null은 객체 타입(자바스크립트 설계상 오류)으로 문자열일 경우 ‘’, 숫자의 경우 ‘0’과 같다.

undefined

  • 변수가 정의되었지만 값이 할당되지 않은 상태
  • ex) var foo;

[참고] javascript 삽입 방식과 위치

간단한 스크립트일 경우 또는 해당 문서에만 적용되는 경우 HTML문서안에 스크립트 소스를 배치한다. 그러나 반복 사용되는 코드일 경우 파일별로 저장해두고 필요에 따라 링크해서 사용한다.

자바스크립트 링크태그 삽입 위치

<head>에 삽입되는 경우

  • defer 속성은 HTML 구문 분석이 완전히 완료되면 스크립트 파일을 실행하도록 브라우저에 지시한다.
  • IE8이하는 지원하지 않으므로 두번째 경우를 사용하도록 한다. 
1
2
3
4
5
<head>
  ...생략...
  <title>메인 페이지</title>
  <script defer src="main.js"></script>
</head>

</body>앞에 삽입되는 경우

  • 문서의 DOM 로드가 완료된 시점에 javascript 로드가 실행된다.
1
2
3
4
<body>
  ...생략...
  <script src="main.js"></script>
</body>