JavaScript 기본 문법 요약노트

JavaScript 문법을 하나하나 설명하기 보다는 빠르게 읽고 주요 문법이 어떤 형태로 사용되는지 파악하는 것을 목적으로 작성하였습니다.

콘솔창에 출력하기

숫자, 문자 등 임의의 값을 출력할때는 console.log()를 사용합니다.

에디터를 열어 아래와 같이 작성한 후 hello.js라는 이름으로 저장합니다.

console.log('hello');

코드 실행하기

입력한 코드를 실행할 때는 터미널에서 node {파일명} 명령어를 사용합니다. 

node hello.js

이 명령어를 사용하기 위해선 Node.js를  설치해야 합니다. 설치 방법은 이 글에선 생략합니다.

실행 환경을 구성하는게 잘 안된다면 웹 브라우저를 통해 실행 결과를 확인할 수 있습니다. 크롬에서 마우스 우클릭 - 검사 - Console을 차례대로 눌러서 뜨는 창에 직접 입력해도 됩니다.

주석 만들기

주석은 실행되지 않는 문장으로, 작성한 코드에 대한 설명을 남기기 위해 사용합니다.

주석은 문장 앞에 // 기호를 붙여서 만듭니다.

// console.log('hello');

여러 줄의 문장을 하나의 주석으로 만들 때는 /* */ 기호를 사용합니다.

/*
console.log('hello');
console.log('hello2');
*/

자료형(Data type)

JavaScript의 대표적인 자료형은 number, string, boolean 입니다.

• number : 정수, 실수 등의 숫자 데이터

• string : 따옴표(") 또는 작은 따옴표(')로 둘러싸인 문자 데이터

• boolean : 참(true) 또는 거짓(false)을 표현하는 데이터

  // number  
  40  
  3.14
  
  // string  
  '코알라일락'  
  "3333"
  
  // boolean  
  true  
  false

숫자형 데이터는 +, -, /, *, % 기호로 사칙연산이 가능합니다. +기호의 경우 string 데이터에도 사용할 수 있습니다.

3 + 4 // 7
3 / 4 // 0.75
'hello' + 'hello' // 'hellohello'

변수

변수는 데이터를 저장할 수 있는 메모리 공간을 의미합니다. 변수는 var 키워드를 사용해서 선언합니다.

변수에 값을 할당할 때는 = 기호를 사용합니다.

var age; // 변수 선언
age = 20; // 값을 할당한다

var name = '김철수'; // 선언과 할당을 한 번에
console.log(name); // '김철수'가 출력된다

배열

배열을 사용하면 하나의 변수에 여러개의 값을 저장할 수 있습니다. 연관있는 데이터를 하나로 묶어서 관리할 때 주로 사용합니다.

배열을 선언할 때는 [ ]기호를 사용합니다. 각각의 데이터는 , 기호로 구분합니다.

// 일반 변수를 사용할 때
name1 = '갑';
name2 = '을';
name3 = '병';

// 배열을 사용할 때
names = ['갑', '을', '병'];

선언된 배열 속 요소에 접근할 때는 []기호 안에 인덱스를 넣습니다. 인덱스는 0부터 시작합니다.

numbers = [1, 34, 45, 92];

numbers[0] // 1
numbers[2] // 45

제어문

프로그램의 동작 방식은 항상 똑같지 않습니다. 사용자와의 상호작용에 따라 프로그램의 움직임은 달라집니다. 예를들어, 로그인을 하는 간단한 동작조차도 어떤 입력이 있었느냐에 따라 여러개의 분기점이 생겨납니다.

이렇듯 제어문은 프로그램의 실행 흐름을 제어하기 위해 사용됩니다. 제어문에는 크게 두가지 종류가 있습니다.

• 조건문
• 반복문

조건문

조건식을 만드는데 쓰는 비교 연산자는 아래와 같습니다.

• a == b : a와 b가 서로 같은 값이면 true, 다르면 false를 반환.
• a != b : a와 b가 서로 다른 값이면 true, 같으면 false를 반환.
• a > b : a가 b보다 크면 true, 작으면 false를 반환
• a < b : a가 b보다 작으면 true, 크면 false를 반환
• a >= b : a가 b보다 크거나 같으면 true, 작으면 false를 반환
• a <= b : a가 b보다 작거나 같으면 true, 크면 false를 반환

2개 이상의 조건식을 엮을때 쓰는 논리 연산자는 아래와 같습니다.

• (조건 1) && (조건 2) : AND, 조건이 모두 참일 때만 true 반환
• (조건 1) || (조건 2) : OR, 하나 이상 참인 조건이 있으면 true 반환

특정한 조건을 만족할 때만 정해진 작업을 수행합니다. 조건문은 if 키워드를 사용합니다.

if (조건) {
    // 실행문
}

괄호 안에 작성된 조건이 참이되면 { } 블럭 내부의 문장들이 실행됩니다.

조건이 거짓이 되었을 경우의 처리도 함께 작성하려면 else 키워드를 사용합니다.

if (조건) {
    // 조건이 참일 때의 실행문
} else {
    // 조건이 거짓일 때의 실행문
}

3개 이상의 조건에 대한 처리를 구현하고 싶다면 else if 키워드를 사용합니다.

이때 if는 무조건 가장 첫번째, else는 가장 마지막 순서로 등장해야 합니다. else는 필요가 없다면 생략이 가능합니다. 중간에 들어가는 else if 블럭에는 개수의 제한이 없습니다.

if (조건) {
    // 실행문
} else if (조건2) {
    // 실행문
} else if (조건3) {
    // 실행문
} else {
    // 실행문
}

반복문

콘솔창에 1부터 100까지의 숫자를 차례대로 출력해야한다고 가정합니다. 위에서 배운 내용만을 활용한다면 console.log()를 100번이나 사용해야합니다. 이렇게 동일한 작업으로 노가다를 해야할 때 사용하는 것이 반복문입니다. 반복문은 for과 while이라는 키워드를 사용합니다.

먼저, for문의 기본 형태는 다음과 같습니다.

for (초기문; 조건문; 증감문) {
    // 반복할 내용
}

1부터 100까지 출력하는 코드를 반복문으로 구현한다면 아래와 같습니다.

for (var i = 1; i <= 100; i++) {
    console.log(i);
}

while문의 기본 형태는 아래와 같습니다. 괄호 안의 조건이 거짓이 될 때까지 반복이 지속됩니다.

while (조건) {
    // 반복할 내용
}

for문으로 작성한 예시와 같은 동작을 하는 코드를 while문으로 바꾸어 보겠습니다.

var num = 1;
while (num < 100) {
    console.log(num);
    num = num + 1;
}

num이 100이 된 순간 조건이 거짓이 되면서 while문이 종료됩니다. 하지만 while문의 실행문이 아무리 돌아도 조건이 거짓이 되는 순간이 오지 않으면 while문은 영원히 멈추지 않습니다. 이런 상황을 무한루프라고 부릅니다. while문을 사용할때는 무한루프가 발생하지 않도록 주의해야 합니다.

만약 반복문을 실행문 내부에서 강제로 멈추고 싶다면 어떻게 해야할까요? 그럴때는 break라는 키워드를 사용합니다.

var num = 0;
while (true) {
    num = num + 1;
    console.log(num);

    if (num > 5) 
        break;
}

이 코드에서 조건은 항상 true이므로 이는 무한루프를 일으킬 수 있습니다. 하지만 실행문 내부에 num이 5보다 커지는 순간 강제로 반복문을 빠져나가도록 break를 사용했기 때문에 이 프로그램은 0부터 5까지의 숫자를 차례대로 출력한 후 종료될 것입니다.

for문과 while문은 같은 기능을 가지고 있습니다. for문은 정확한 반복 횟수를 알고 있을 때, while문은 반복이 종료되는 조건을 알고 있을 때 상황에 맞춰 사용합니다.

함수

함수는 코드 덩어리(블록)에 이름을 붙여둔 것입니다.

• 블록은 실행문이 중괄호({ })로 묶여있는 부분을 의미합니다.

특정한 동작을 수행하는 블록에 이름을 붙여 한번 함수로 정의해두면, 함수의 이름을 호출하는 것 만으로 해당 기능을 반복해서 사용할 수 있습니다.

함수 사용하려면 먼저 정의를 해야합니다. 함수 정의를 하는 방법은 다음과 같습니다.

function 함수이름(매개변수1, 매개변수2, ...) {
    // 실행문
    return 결과값;
}

함수의 이름은 함수를 부를 때 사용하는 식별자입니다. 매개변수(parameter)는 함수의 실행문에서 사용할 입력 값입니다. return은 함수 호출 후 돌려줄 결과 값입니다. 함수에는 크게 네가지 형태가 존재합니다.

• 매개변수와 결과값이 없는 함수

  function sayHi() {
    console.log("Hi");
  }

• 매개변수가 있고 결과값이 없는 함수

  function sayHi(msg) {
    console.log(msg); 
  }

• 매개변수가 없고 결과값이 있는 함수

  function sayHi() {
    return "Hi"; 
  }

• 매개변수와 결과값이 둘 다 있는 함수

  function sayHi(msg) {
    return msg + "(이)라고 인사합니다";
  }

정의한 함수를 사용하는 방법은 다음과 같습니다.

함수이름(입력값1, 입력값2, ...);

여기서 입력값으로 사용될 값을 인수(argument)라고 부릅니다. 위에서 정의한 sayHi라는 함수를 사용하려면 sayHi();, sayHi("안녕"); 처럼 작성하면 됩니다.

함수를 사용할 경우 코드의 재사용이 용이해지기 때문에 코드가 훨씬 간결해집니다.