JavaScript - 구문과 기본 문법

자바스크립트란?

자바스크립트는 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어다. 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. 스크립트는 웹 페이지의 HTML 안에 작성할 수 있는데, 웹 페이지를 불러올 때 웹 브라우저에서 스크립트가 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다.

 

자바스크립트의 원래 이름은 'LiveScript' 였다. 그런데 당시에 Java의 인기가 높은 때였고, 관련인들은 LiveScript를 자바의 동생 격인 언어로 홍보하면 도움이 될 것이라 생각하여 이름을 바꾼 것이다. 이름은 Java에서 따왔지만, 사실은 자바와는 상관 없는 독자적인 언어인 것이다. 꾸준히 발전하여 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 되었다.

 

변수

자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var라는 가변형 변수만 존재하여 초기화 할 때 형태에 따라서 스스로 할당된다. 

var i;
var a = 12345;
var b = "12345";
var c = true;
var d = null;

var의 유효 범위는 함수 내부로 조건문이나 반복문 안에서 초기화 된 경우라도 함수 내부 블록이라면 어디서나 호출할 수 있다. 이러한 변수 선언으로 간단한 테스트에는 편리할 수 있지만, 코드가 길어진다면 어디서 어떻게 사용되고 있는지 파악하기 힘들뿐만 아니라 값이 바뀔 우려가 있다. 이를 보완하기 위해 ES6에서 let과 const가 추가되었다.

 

let과 const의 차이점은 각각 값이 변할 수 있는 지의 여부(mutable 또는 immutable)다. let은 값이 재할당될 수 있지만, const는 그렇지 않다.

 

자바스크립트는 여덟 가지 기본 자료형을 지원한다.

• 정수와 부동 소수점을 저장하는 데 쓰이는 숫자형 아주 큰 숫자를 저장할 수 있는 BigInt형 
• 문자열을 저장하는 데 쓰이는 문자형 
• 논리값 true/false을 저장하는 데 쓰이는 불린형 
• ‘비어있음’, '존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
• 값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
• 복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형

 

연산자

모질라에 너무나 자세히 정리되어 있다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

표현식과 연산자 - JavaScript | MDN

 

코드 구조

// 세미콜론 기준으로 여러 개의 구문을 구분한다.
alert('Hello'); alert('World');

// 줄바꿈으로 세미콜론을 생략할 수 있다. 
// 이를 '세미콜론 자동 삽입(automatic semicolon insertion)'이라고 한다.
alert('Hello')
alert('World')

코딩 컨벤션과 같은 코드 스타일 지침서 대부분은 문장의 끝에 세미콜론을 붙이는 걸 권장한다. 코드 블록( {...} )이나 코드 블록과 함께 구성되는 문법(반복문 등) 끝엔 세미콜론을 붙이지 않아도 된다.

function f() {
  // 함수 선언문 끝엔 세미콜론이 필요 없다.
}

for(;;) {
  // 반복문 끝엔 세미콜론이 필요 없다.
}

 

엄격 모드

모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위(스크립트 최상단 또는 함수 본문 최상단)에 'use strict'를 적어야 한다.

'use strict';

'use strict'가 없어도 코드는 정상적으로 동작하지만, 모던한 방식이 아니라 하위 호환성을 지키며 옛날 방식으로 동작하게 된다. (즉, 쓰는 것이 좋다.)

 

반복문

// while 문
while (조건) {
  ...
}

// do-while 문
do {
  ...
} while (조건);

// for 문 - let i는 반복문 내에서만 사용 가능
for(let i = 0; i < 10; i++) {
  ...
}

지시자 break과 continue가 반복문 전체나 현재 실행 중인 반복을 빠져나가는 데 사용될 수 있다.

 

if 문

if 문은 지정한 조건이 참인 경우 명령문을 실행한다.

let result;
if (a > 0) {
    result = 'positive';
} else if (a === 0) {
    result = 'zero';
} else {
    result = 'NOT positive';
}

 

switch 문

if 문에 조건이 다양하다면 switch 문으로 대체할 수 있다. switch 문은 조건을 확인할 때 내부적으로 일치 연산자 === 를 사용해 비교한다.

let num = propmpt("몇 개 먹을래?")

switch (num) {
  case 1:
    alert("그래 1인분만 먹는 거야");
    break;

  case 2:
    alert("2개 먹고 후회하기 없기");
    break;
    
  case 3:
    alert("돼지새끼");
    break;

  default:
    alert("어떤 case에도 해당하지 않음.");
}

 

함수

세 가지 방법으로 함수를 만들 수 있다.

1. 함수 선언문

function sum(a, b) {
  let result = a + b;

  return result;
}

2. 함수 표현식

let sum = function(a, b) {
  let result = a + b;

  return result;
};

3. 화살표 함수

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;