Java Script-기본 문법

1. 변수

 변수는 '데이터를 저장하는 장소'를 의미한다. 즉, 위치(주소)를 기억하는 저장소이다. 위치란 메모리 상의 주소(address)를 의미한다. 변수란 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)이다.

	var a = 2;

2. 값

 값은 프로그램에 의해 조작될 수 있는 대상을 말한다. 값은 다양한 방법으로 생성할 수 있다. 가장 간단한 방법은 리터럴 표기법(literal notation)을 사용하는 것이다. 숫자, 문자열, 불리언과 같은 원시 타입의 리터럴은 다양한 연산자의 피연산자가 되어 하나의 값으로 평가될 수 있다. 이렇게 리터럴은 연산에 의해 하나의 값이 될 수 있다.

용어	의미
데이터 타입(Data Type)	프로그래밍 언어에서 사용할 수 있는 값의 종류
변수(Variable)	값이 저장된 메모리 공간의 주소를 가리키는 식별자(identifier)
리터럴(literal)	소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

  // 숫자 리터럴
  10.50
  1001

  // 문자열 리터럴
  'Hello'
  "World"

  // 불리언 리터럴
  true
  false

  // null 리터럴
  null

  // undefined 리터럴
  undefined

  // 객체 리터럴
  { name: 'Lee', gender: 'male' }

  // 배열 리터럴
  [ 1, 2, 3 ]

  // 정규표현식 리터럴
  /ab+c/

  // 함수 리터럴
  function() {}

3. 연산자

 '3+5', '3<5' 등과 같이 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자이다. 연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다. 연산자의 종류에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자 등이 있다.

    // 산술 연산자
    var area = 5 * 4; 
    document.write(area); // 20
    document.write('<br>');
                       
    // 문자열 연결 연산자
    var str = 'My name is ' + 'Lee'; 
    document.write(str);  // "My name is Lee"
    document.write('<br>');
                 
    // 할당 연산자
    var color = 'red';
    document.write(color);  // "red"
    document.write('<br>');
        
    // 비교 연산자
    var foo = 3 > 5; 
    document.write(foo);  // false
    document.write('<br>');
        
    // 논리 연산자
    var bar = (5 > 3) && (2 < 4);  
    document.write(bar);  // true
    document.write('<br>');
        
    // 타입 연산자
    var type = typeof 'Hi';
    document.write(type);   // "string"
    document.write('<br>');
        
    // 인스턴스 생성 연산자
    var today = new Date(); 
    document.write(today); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

출력 이미지

4. 키워드

 키워드(keyword)는 수행할 동작을 규정한 것이다. 예를 들어 var 키워드는 새로운 변수를 생성할 것을 지시한다.

5. 문

 프로그램(스크립트)은 컴퓨터(Client-side Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 단계별로 수행될 명령들의 집합이다. 문은 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론( ; )으로 끝나야 한다. 문들은 일반적으로 위에서 아래로 순서대로 실행된다. 이러한 실행 순서는 조건문(if, switch)이나 반복문(while, for)의 사용으로 제어할 수 있다 이를 흐름제어(Control Flow)라 한다. 또는 함수 호출로 변경될 수 있다.

 

6. 표현식

 표현식(Expression)은 하나의 값으로 평가(Evaluation)된다. 값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다. 표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있다. 

 

7. 문과 표현식의 비교

 자연어에서 문(Statement)이 마침표로 끝나는 하나의 완전한 문장(Sentence)이라고 한다면 표현식은 문을 구성하는 요소이다. 표현식은 그자체로 하나의 문이 될 수도 있다. 표현식과 문은 매우 유사하여 구별이 어려울 수 있다. 표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다. 문은 var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다. 표현식을 통해 평가한 값을 통해 실제로 컴퓨터에게 명령을 하여 무언가를 하는 것은 문이다.

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.
// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

8. 함수

 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 쉽다. 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

  // 함수의 정의(함수 선언문)
  function square(number) {
    return number * number;
  }

  // 함수의 호출
  square(2); // 4
  document.write(square(2));

출력 이미지

9. 객체

 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

 변수는 데이터 값을 하나 밖에 저장하지 못하지만, 객체는 데이터 값을 필요한 대로 만들어 사용할 수 있다. 객체의 데이터는 '이름: 값'의 쌍으로 이루어 있으며 이것을 속성(Properties)이라고 한다.

  var person = {
    name: 'Lee',
    gender: 'male',
    sayHello: function () {
      console.log('Hi! My name is ' + this.name);
    }
  };

  console.log(typeof person); // object
  console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }

  person.sayHello(); // Hi! My name is Lee

출력 이미지

10. 배열

 배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.

  var arr = [1, 2, 3, 4, 5];

  console.log(arr[1]); // 2

출력 이미지