[Javascript] 기본 문법

본 게시물은 poiemaweb(https://poiemaweb.com/)에 기술된 내용을 기반으로 작성한 게시물입니다.

 

1. 변수

 - 값을 저장하고 그 저장된 값을 참조하기 위해 사용

    - 변수 이름을 통해 값에 의미를 부여, 코드의 가독성을 높일 수 있음

 - 메모리 주소(Memory address)에 접근하기 위해 인간이 이해할 수 있는 언어로 지정한 식별자

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

---

2. 값

 - 프로그램에 의해 조작될 수 있는 대상

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

 

// 숫자 리터럴
10.50
1001

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

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

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

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

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

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

 

 - 리터럴은 연산에 의해 하나의 값이 될 수 있음

// 산술 연산
10.50 + 1001

 

2.1. 데이터 타입

 - 원시 타입 (primitive data type)

    - number

    - string

    - boolean

    - null

    - undefined

    - symbol (ES6)

 - 객체 타입 (Object data type)

    - object

 

 - 동적 타이핑

    - 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정되는 것

---

3. 연산자

- 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산을 수행해 하나의 값을 만듦

// 산술 연산자
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(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

 

 - 피연산자의 타입은 반드시 일치시킬 필요가 없음

    - 암묵적 타입 강제 변환을 통해 연산을 수행하기 때문

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

---

4. 키워드

 - 수행할 동작을 규정한 것

 - var, function, while, if 등

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

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

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

 

---

5. 주석

 - 작성된 코드의 의미를 설명하기 위해 사용

 - 주석은 해석기(parser)가 무시하며, 실행되지 않음

// 한 줄 주석
// 주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다. 코드는 읽기(이해하기) 쉬워야 한다.


/*
  여러 줄 주석
  주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다.
  코드는 읽기(이해하기) 쉬워야 한다.
*/

 

 - 과도한 주석은 가독성을 떨어뜨릴 수 있음

// Bad
// 변수 x는 나이를 나타낸다. x에는 정수 10을 할당한다.
var x = 10;

// Good
var age = 10;

---

6. 문 (statement)

 - 컴퓨터(브라우저)에 의해 수행될 각각의 명령

 - 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론(;)으로 끝남

 - 문은 코드 블록으로 그룹화 가능

    - 그룹화의 목적 : 함께 실행되어야 하는 문을 정의하기 위함

// 함수
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)

- 일반적으로 위에서 아래로 순서대로 실행되는 문의 실행 순서를 조건문, 반복문 사용을 통해 제어하는 것

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);

 - 자바스크립트는 블록 스코프(Block-level scope)를 생성하지 않고 함수 스코프(Function-level scope)만을 가졌으나, ES6에서 추가된 let, const 키워드에 의해 블록 스코프 또한 생성할 수 있게 됨

---

7. 표현식

 - 값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 피연산자와 연산자의 조합 등

 - 표현식은 결국 하나의 값으로 평가되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식 구성 가능

// 표현식
5             // 5
5 * 10        // 50  -> 5 * 10은 50으로 평가됨
5 * 10 > 10   // true
(5 * 10 > 10) && (5 * 10 < 100)  // true

---

8. 문과 표현식의 비교

 - 문 : 자연어에서 마침표로 끝나는 하나의 완전한 문장

 - 표현식 : 문을 구성하는 요소 

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

 - 표현식을 통해 평가한 값을 이용해 실제로 컴퓨터에게 명령을 내리는 무언가 => 문 (statement)

---

9. 함수

 - 어떤 작업 수행을 위해 필요한 문들의 집합을 정의한 코드 블록

 - 이름, 매개변수를 가지며 필요할 때 호출하여 코드 블록에 담긴 문들의 일괄 실행 가능

 - 코드의 재사용 측면에서, 동일한 반복 작업을 위해서 함수를 재사용하는 것이 효율적

 - 일급 객체이므로 값으로 취급 가능

    - **일급 객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

                            변수에 저장, 함수의 파라미터로 전달, 함수의 리턴값으로 사용 가능

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

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

 

---

10. 객체

 - 키(이름)와 값으로 구성된 프로퍼티의 집합

 - 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체

 - 프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 이를 메서드라 부름

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

 - 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 프로토 타입 이라 불리는 객체의 프로퍼티와 메서드를 상속받을 수 있음

    - 타 언어와 구별되는 중요한 개념

---

11. 배열

 - 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용

 - 객체이며 유용한 메서드를 포함

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

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

---

확인하기

1. 변수란?

2. 값이란?

3. 동적 타이핑이란?

4. 자바스크립트에서 제공하는 데이터 타입의 종류?

5. 리터럴이란?

6. 문(statement)과 표현식의 차이

7. 함수란?

8. 객체란?

9. 함수와 메서드의 차이?

10. 배열의 사용 목적?

---

REFERENCES

 - poiemaweb

 - 위키 백과(일급 객체)