JavaScript - Syntax Basics

var str = 'Hello World'

• str이라는 이름의 변수를 선언하고 문자열 리터럴 'Hello World'를 값으로 할당함

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

1. 변수

• 변수 (Variable)
  • 값(value)을 저장하고 그 저장된 값을 참조하기 위해 사용
  • 변수 이름을 통해 값의 의미를 명확히 할 수 있음
  • 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)
  • 변수 선언할 때, var 키워드 사용
  • 변수에 값을 할당할 때, 할당 연산자 = 사용

var x; //변수의 선언
x = 6; //정수값을 할당

2. 값

• 값 (Value)
  • 프로그램에 의해 조작될 수 있는 대상
  • 다양한 방법으로 생성 가능
  • 가장 간단한 방법 : 리터럴 표기법 (literal notation)

// 숫자 리터럴
10.50
1001

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

// boolean 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

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

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

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

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

• JavaScript의 모든 값은 데이터 타입을 가짐

• JavaScript는 7가지 데이터 타입을 제공함

  • 원시 타입 (primitive data type) : number, string, boolean, null, undefined, symbol(New in ECMAScript 6)

  • 객체 타입 (Object data type) : object

• JavaScript는 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정됨 (동적 파이팅)

// Number
var num1 = 1001;
var num2 = 10.50;

// String
var str1 = 'Hello';
var str2 = "World";

// Boolean
var bool = true;

// null
var foo = null;

// undefined
var bar;

// Object
var obj = {name: 'Lee', gender: 'female' };

// Array
var arr = [1, 2, 3];

// function
var foo = function() {};

• 숫자, 문자열, boolean 같은 원시 타입 리터럴은 다양한 연산자의 피연산자가 되어 하나의 값으로 평가될 수 있음

// 산술 연산
10.50 + 1000

3. 연산자

• 연산자 (Operator) : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만듬
• 피연산자 (Operand) : 연산의 대상

// 산술 연산자
var area = 5 * 4; // 20

// 문자열 연결 연산자
var str = 'My name is' + 'Lee'; // My name is Lee

// 할당 연산자
var color = 'red'; // "red"

// 비교 연산자
var foo = 3 > 5; // false

// 논리 연산자
var bar = (5 > 3) && (2 < 4); // true

// 타입 연산자
var type = typeof 'hi'; // "string"

// 인스턴스 생성 연산자
var today = new Date();

• 피연산자의 타입은 반드시 일치할 필요는 없음
• 파연산자의 타입이 다를 경우, JavaScript는 암묵적 타입 강제 변환을 통해 연산을 수행함

var foo = 1 + '10'; // '110'
var bar = 1 * '10'; // 10

4. 키워드

• 키워드 (Keyword) : 수행할 동작을 규정한 것
  - 예) var : 새로운 변수를 생성할 것을 지시

// 변수의 선언
var x = 5 + 6;

// 함수의 선언
function foo (arg) {
  // 함수의 종료 및 값의 반환
  return ++arg;
}

// 반복문
var i = 0;
while (1) {
  if (i > 5) {
    // 반복문 탈출
    break
  }
  console.log(i);
  i++;
}

5. 주석

• 주석 (Comment) : 작성된 코드의 의미를 설명하기 위해 사용

  • 한 줄 주석 : // 다음에 작성
  • 여러 줄 주석 : /**/ 사이에 작성

// 주석은 작성된 코드의 의미를 설명하기 위해 사용, 읽기 쉬워야함

/*주석은 작성된 코드의 의미를 설명하기 위해 사용
주석은 읽기 쉬워야함*/

• 과도한 주석은 가독성을 해칠 수 있으므로, 주석 없이도 읽을 수 있는 코드가 좋음

// BAD
// 변수 x는 나이를 나타냄. x에 정수 10을 할당
var x = 10

// GOOD
var age = 10

6. 문

• 프로그램 (script) : 컴퓨터에 의해 단계별로 수행될 명령들의 집합
• 문 (Statement)
  • 각각의 명령
  • 리터럴, 연산자, 표현식, 키워드 등으로 구성
  • 세미콜론(;)으로 끝나야함

var x = 5;
var y = 6;
var z = x + y;

console.log(z);

• 문은 코드 블록(code block, {...})으로 그룹화할 수 있음
  • 그룹화: 함께 실행되어져야하는 문을 정의하기 위해 사용

// 함수
function myFunction(x, y) {
  return x + y;
}

// if 문
if (x > 0) {
  // do something
}

// for 문
for (var i = 0; i < 10; i++) {
  // do something
}

• 문들은 일반적으로 위에서 아래로 순서대로 실행됨
• 흐름 제어 (control flow) : 조건문(if, switch)이나 반복문(while, for)의 사용 또는 함수의 호출로 문의 실행 순서를 제어할 수 있음

var time = 10;
var greeting;

if (time < 10) {
  greeting = 'Good morning';
} else if (time < 20) {
  greeting = 'Good day';
} else {
  greeting = 'Good evening';
}

console.log(greeting);

• JavaScript에서는 블록 유효범위(Blook-level scope)를 생성하지 않고, 함수 단위의 유효범위(Function-level scpe)만 생성됨

7. 표현식

• 표현식 (Expression)
  • 값(리터럴), 변수, 객체의 property, 배열의 요소, 함수 호출, 메소드 호출, 연산자와 피연산자의 조합 모두 표현식임
  • 하나의 값으로 평가됨
  • 다른 표현식의 일부가 되어 더 복잡한 표현식을 구성할 수 있음

// 표현식
5 // 5
5 * 10 // 50
5 * 10 > 10 // true
(5 * 10 > 10) && (5 * 10 < 100) // true

8. 문과 표현식의 비교

• 표현식

  • 문을 구성하는 요소
  • 그 자체로 하나의 문이 될 수 있음
  • 평가되어 값을 만듬
  • 그 이상의 행위 X

• 문

  • var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성
  • if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어
  • 표현식으로 평가된 값을 통해 실제로 컴퓨터에게 명령함

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

9. 함수

• 함수
  • 어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드 블록
  • 이름과 매개변수를 가짐
  • 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행 가능
  • 한 번 뿐만 아니라 여러번 호출 가능
  • 동일한 작업을 반복 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적

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

10. 객체

• JavaScript - 객체 기반의 스크립트 언어
• 객체 (Object)
  • 원시 타입 (primitives)를 제외한 나머지 값들 (함수, 배열, 정규표현식 등)
  • 키와 값로 구성된 property의 집합
  • property 값으로 Javascript에서 사용할 수 있는 모든 값을 사용 가능
  • 함수를 property 값으로 사용할 경우, 메소드라고 부름
  • 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합
  • 데이터와 동작을 하나의 단위로 구조화할 수 있어서 유용함
  • '프로토타입'이라 불리는 객체의 property와 메소드를 상속받을 수 있음

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

console.log(typeof person); //object
console.log(person); // {name: 'Lee', gender: 'female', sayHello: [function: sayHello]}
person.sayHello();  // Hi, my name is Lee

11. 배열

• 배열 (Array)
  • 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용
  • 객체임
  • 내장 메소드를 포함함

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

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