만약 웹사이트가 HTML만으로 구성되어 있다면, 사용자가 버튼을 누르거나 정보를 입력하는 등의 동적인 작업들을 처리할 수 없습니다. 그래서 그런 동적인 작업들을 처리하기 위해서 자바스크립트를 사용하게 됩니다. 여기에서는 웹 사이트에 생명을 불어넣어주는 자바스크립트에 대해서 알아보도록 하겠습니다.

0.3.1 자바스크립트란 무엇인가?

자바스크립트는 프로그래밍 언어의 한 종류입니다. 이름 때문에 Java랑 연관된 프로그래밍 언어라고 착각하기 쉬운데, 자바스크립트의 정식명칭은 ECMAScript입니다. 그래서 버전을 매길 때 ECMAScript의 앞 글자를 따서 ES5, ES6 이런식으로 이름을 짓습니다(바로 뒤에서 ES6에 대해서 배울 예정입니다).
앞에서 배운 HTML이 웹사이트의 뼈대를 구성하는 역할을 한다면, 자바스크립트는 웹사이트가 살아 움직이도록 생명을 불어넣는 역할을 합니다. 우리가 흔히 스크립트 언어(scripting language 또는 script language)라고 부르는 언어들이 있는데, 자바스크립트는 이름에서도 알 수 있듯이 스크립트 언어의 한 종류입니다.
그렇다면 스크립트 언어의 특징은 뭐가 있을까요? 다른 프로그래밍 언어와 가장 큰 차이점은 프로그램이 실행되는 런타임에 코드가 해석된다는 점입니다. C언어나 Java같은 컴파일 언어는 컴파일이라는 과정을 통해서 소스코드가 해석되고 실행가능한 형태로 변환됩니다. 하지만 자바스크립트같은 스크립트 언어는 런타임에 해석되고 실행됩니다.
오랫동안 자바스크립트는 웹사이트 개발에만 사용 되었는데, 최근에는 모바일 앱 개발을 위한 ReactNative나 데스크탑용 앱 개발을 위한 Electron등에서도 자바스크립트를 사용하고 있습니다. 점점 자바스크립트의 사용범위가 넓어지고 있고, 전세계에서 가장 많이 쓰이는 프로그래밍 언어 중에 하나로 자리잡고 있습니다.

0.3.2 ES6

자바스크립트는 수없이 많은 변천사를 겪었습니다. 우리나라 말에도 표준어와 방언(사투리)가 있는 것처럼, 자바스크립트도 표준과 방언이 뒤섞여서 수많은 개발자들이 고통을 받아 왔습니다. 그래서 표준 버전으로 나온 것이 ES5, ES6 같은 것들입니다. 앞에서 설명한 것처럼 ES는 자바스크립트의 정식 명칭인 ECMAScript를 의미하고 뒤에 나오는 숫자는 버전을 의미합니다. ES6는 2015년에 발표 되었는데, 그래서 ECMAScript 2015 또는 ES2015라고 부르기도 합니다. 이름부터 참 복잡하죠? 이 문서에서는 ES6로 통일해서 부르도록 하겠습니다. 현재 최신 버전은 ES16(ECMAScript 2025)이지만, 2015년에 ES6가 나오면서 새로운 문법들이 많이 추가되었고, 자바스크립트 표준화의 발판을 마련했기 때문에 그 의미가 깊다고 할 수 있습니다.

0.3.3 자바스크립트의 자료형

이제 이 문서에서 사용하게 될 자바스크립트 문법들을 간단하게 알아보도록 하겠습니다. 다른 프로그래밍 언어를 배운 경험이 있지만 자바스크립트를 써본적이 없거나, 자바스크립트에 익숙하지 않은 분들도 쉽게 따라올 수 있도록 굉장히 간단한 수준의 문법만을 사용할 예정입니다. 이 문서의 목적은 리액트를 배우는 것이니 자바스크립트에 대해서는 크게 부담을 가지지 않고 따라오면 됩니다. 그리고 모든 문법에 대해서 설명하지 않고 어렵거나 자주 사용하지 않는 부분은 제외하였습니다. 여기에서는 자바스크립트 ES6의 문법을 기준으로 설명하도록 하겠습니다.

먼저 자바스크립트의 자료형(Data Type)입니다. 자료형은 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형이라고 보면 됩니다. 우리가 흔히 정수(integer), 배열(array) 등으로 부르는 것들이죠. 모든 변수들은 하나의 자료형을 갖게 되는데, 일반적인 프로그래밍 언어에서는 변수를 선언하는 시점에 해당 변수의 자료형이 결정됩니다. 그런데 자바스크립트에서는 변수를 선언할 때가 아닌, 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정됩니다. 이처럼 동적으로 자료형이 결정되는 것을 동적 타이핑(Dynamic Typing)이라고 부르며, 자바스크립트는 동적 타이핑 방식을 사용합니다. 그래서 자바스크립트에서는 변수를 선언할 때 다른 프로그래밍 언어처럼 int i = 100; 이런식으로 하지 않고, var i = 100; 같은 형태로 사용합니다. 여기서 var는 변수를 나타내는 영어 단어인 variable을 의미합니다. 변수를 선언 할 때 var말고 let도 사용하는데 두 가지 방식에는 차이점이 있습니다만, 여기에서 설명하면 어려워질 수 있기 때문에 따로 다루지 않도록 하겠습니다. 이 문서에서는 변수를 선언 할 때 되도록이면 let을 사용하도록 하겠습니다.

자, 그럼 실제로 자바스크립트에서 제공하는 자료형들을 살펴볼까요? 아래는 자바스크립트의 대표적인 자료형들을 나타낸 것입니다.

// Number type
let n1 = 1234;
let n2 = 5.678;

// String type
let s1 = "hello";
let s2 = 'world';

// Boolean type
let b1 = true;
let b2 = false;

// Null type
let n = null;

// Undefined type
let u1;
let u2 = undefined;

// Array type
let arr = [1, 2, 3, 4];

// Object type
let obj = { a: "apple", b: "banana", c: "carrot" };

먼저 Number 타입은 말 그대로 숫자를 다루기 위한 자료형입니다. 정수나 소수를 저장할 수 있습니다. 그리고 String 타입은 문자열을 다루기 위한 자료형입니다. 문자열을 선언 할 때는 큰 따옴표(")로 묶어 주거나, 작은 따옴표(')로 묶어 주면 됩니다. 한 가지 유의할 점은 문장을 큰 따옴표로 열고 작은 따옴표로 닫는 식으로 두 종류의 따옴표를 한 번에 섞어서 사용하면 안 된다는 것입니다. 이 Number 타입과 String 타입은 자바스크립트에서 가장 많이 사용되는 자료형이라고 보면 됩니다.

다음으로 나오는 자료형은 Boolean 타입입니다. Boolean 타입은 값이 true 아니면 false 두 가지로만 정해져 있는 자료형입니다. 그리고 Null 타입은 값이 null인 것을 의미하는 자료형입니다. 바로 뒤에 나오는 Undefined 타입과는 다른 의미를 갖고 있습니다. Undefined 타입은 영어단어 뜻 그대로 정의가 되지 않은(undefined) 것을 의미합니다. let u1;처럼 변수를 선언만 하고 값을 대입하지 않으면, 변수의 자료형은 undefined가 됩니다. 그리고 위에서 설명한 것처럼, 변수에 값이 대입되는 순간 동적 타이핑 방식으로 해당 변수의 자료형이 결정됩니다. 그래서 Undefined 타입은 값이 아직 정의되지 않은 상태를 의미하고, Null 타입은 값이 정의되긴 했는데, 정의된 그 값이 null인 것을 의미합니다. 이런 개념이 조금은 어렵게 느껴지실 수도 있고 이 문서는 자바스크립트 문서가 아니기 때문에, 여기서 꼭 완벽하게 이해하지 못하셔도 상관 없습니다. 그냥 이런 개념이 있다 정도로만 알고 넘어가면 됩니다.

그 다음으로 나오는 자료형은 Array 타입입니다. Array 타입은 배열을 나타내는 자료형입니다. 배열은 여러가지 변수들을 순서대로 모아놓은 것입니다. 위에 예시처럼 숫자가 모여 있을 수도 있고, 문자열이 모여 있을수도 있습니다. 또한 일반적인 프로그래밍 언어와 달리, 자바스크립트에서는 배열에 다양한 자료형의 변수가 함께 들어갈 수 있습니다. 그리고 배열은 변수들을 순서대로 모아놓은 것이기 때문에, 배열에 있는 각 변수는 자신의 순서를 나타내는 index값을 가집니다. 참고로 이 index는 0부터 시작하며, 이걸 사용해서 배열의 변수에 접근할 수 있습니다. 아래 코드는 자바스크립트에서 배열을 사용하는 다양한 예시와 index를 사용해서 배열의 변수에 접근하는 예시입니다.

// Number 타입으로만 이루어진 배열
let arr1 = [1, 2, 3, 4, 5];

// String 타입으로만 이루어진 배열
let arr2 = ["h", "e", "l", "l", "o"];

// Number 타입과 String 타입을 함께 사용한 배열
let arr3 = [1, "h", 2, "i"];

// 다양한 자료형들을 함께 사용한 배열
let arr4 = [true, 1, undefined, false, "h", 2, null, "i"];

console.log(arr1[0]);
// 출력 결과: 1

console.log(arr2[1]);
// 출력 결과: e

console.log(arr3[2]);
// 출력 결과: 2

console.log(arr4[3]);
// 출력 결과: false

마지막으로 나오는 자료형은 Object 타입입니다. Object 타입은 말 그대로 객체를 다루기 위한 자료형입니다. 여기에서의 객체는 다른 객체 지향 프로그래밍 언어의 객체와는 의미가 조금 다릅니다. 자바스크립트에서의 객체는 이름(key 또는 name)과 값(value)으로 이루어진 쌍의 집합을 의미합니다. 다른 프로그래밍 언어를 공부해보신 분들은 Dictionary나 Map, HashMap 같은 것들을 들어보셨을텐데, 그것과 유사한 자료형이라고 보면 됩니다. 객체에 들어가는 키-값 쌍에서 키는 문자열이어야 하며, 값으로는 어떤 자료형이나 다 들어갈 수 있습니다. 객체의 값에 접근하기 위해서는 obj[key]처럼 대괄호 안에 키를 넣어주거나, obj.key처럼 점을 찍고 키의 이름을 써주면 됩니다. 아래 코드는 자바스크립트에서 객체를 사용하는 다양한 예시입니다.

// 값으로 String 타입만을 사용한 객체
let obj1 = { a: "apple", b: "banana", c: "carrot" };

// 값으로 Number 타입만을 사용한 객체
let obj2 = { a: 1, b: 2, c: 2 };

// 값으로 다양한 자료형들을 함께 사용한 객체
let obj3 = { a: "hello", b: 100, c: [1, 2, 3, 4] };

// 값으로 객체를 사용한 객체
let obj4 = {
    a: { a1: 1, a2: 2 },
    b: { b1: 3, b2: 4 },
    c: { c1: 5, c2: 6 },
};

console.log(obj1['a']);
// 출력 결과: apple

console.log(obj2.a);
// 출력 결과: 1

console.log(obj3['c']);
// 출력 결과: [1, 2, 3, 4]

console.log(obj4.c.c2);
// 출력 결과: 6

지금까지 자바스크립트의 대표적인 자료형들에 대해서 알아보았습니다. 여기에서 다루지 않은 자료형들도 있습니다만, 이 문서에서 리액트를 공부하는데는 위에 나온 자료형들만으로도 충분합니다. 자바스크립트의 자료형에 대해서 더 궁금하신 분들은 아래 링크에서 자세한 내용들을 확인하실 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

0.3.4 자바스크립트의 연산자

앞에서는 자바스크립트의 자료형에 대해서 배웠습니다. 자료형은 데이터를 정해진 유형으로 변수에 저장하기 위해서 사용하는데, 이렇게 선언된 변수들을 이용해서 다양한 연산을 할 수 있습니다. 이 때 연산을 하기 위해서 사용하는 것을 연산자(Operator) 라고 부릅니다. 여기에서는 자바스크립트의 연산자에 대해서 배워보도록 하겠습니다.

먼저 가장 기본적인 연산자로 대입 연산자(assignment operator) 가 있습니다. 대입 연산자는 말 그대로 변수에 값을 대입하기 위해 사용하는 연산자입니다. 기호로는 우리가 흔히 equal이라고 부르는 = 를 사용합니다. 수학만 공부하다가 프로그래밍을 처음 접하는 분들은 이 대입 연산자의 작동방식에 약간 혼란을 겪는 경우가 있습니다. 대입 연산자는 항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러갑니다. 그래서 수학에서의 equal과는 그 의미가 다르다고 보면 됩니다. equal의 오른쪽에 있는 값을 equal의 왼쪽에 대입시킨다 라고 해석하면 됩니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = 10;
let b = 20;

console.log(a);
// 출력 결과: 10

console.log(b);
// 출력 결과: 20

다음으로 가장 기본적인 연산자로는 사칙 연산자가 있습니다. 사칙연산은 우리가 흔히 알고 있는 덧셈, 뺄셈, 곱셈, 그리고 나눗셈을 의미합니다. 그리고 추가적으로 나눗셈의 나머지를 구하는 연산자(%)와 지수 연산자(**)가 있습니다. 이러한 연산자들을 통칭해서 산술 연산자(Arithmetic operators) 라고 부릅니다. 아래 코드는 자바스크립트에서 산술 연산자들을 사용한 예시 코드입니다.

let a = 2;
let b = 4;

console.log(a + b);
// 출력 결과: 6

console.log(a - b);
// 출력 결과: -2

console.log(a * b);
// 출력 결과: 8

console.log(a / b);
// 출력 결과: 0.5

console.log(a % b);
// 출력 결과: 2

console.log(a ** b);
// 출력 결과: 16

산술 연산자는 대입 연산자와 함께 사용되는 경우가 많습니다. 그래서 이 둘을 합쳐서 간편하게 쓸 수 있도록 만든 대입 연산자들이 있는데, 이것을 복합 대입 연산자라고 부릅니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = 2;
let b = 4;

a += b; // a = a + b
console.log(a);
// 출력 결과: 6

a -= b; // a = a - b
console.log(a);
// 출력 결과: 2

a *= b; // a = a * b
console.log(a);
// 출력 결과: 8

a /= b; // a = a / b
console.log(a);
// 출력 결과: 2

산술 연산자만으로도 기본적인 연산은 대부분 다 가능합니다. 하지만 편의를 위해서 추가로 변수의 값을 증가, 감소시키기 위한 연산자들도 제공합니다. 증가 연산자(increment operators)와 감소 연산자(decrement operators)가 바로 그것인데, 기호로는 ++와 --를 사용합니다. 증감 연산자들은 사용하는 순서가 굉장히 중요합니다. 증감 연산자를 변수의 뒤에 붙이는 방식을 postfix 방식이라고 하고, 변수의 앞에 붙이는 방식을 prefix 방식이라고 합니다. 영어에서 post는 뒤를 의미하고, pre는 앞을 의미하기 때문에 그렇게 기억하면 쉽습니다. postfix 방식으로 변수의 뒤에 증감 연산자를 붙이게 되면, 먼저 증감 전의 값을 반환하고 이후에 변수의 값이 증감됩니다. 반대로 prefix 방식으로 변수의 앞에 증감 연산자를 붙이게 되면, 먼저 변수의 값을 증감시키고 이후에 증감된 변수의 값을 반환합니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = 1;
let b = a++;

console.log(a, b);
// 출력 결과: 2, 1

let c = 1;
let d = ++c;

console.log(c, d);
// 출력 결과: 2, 2

증감 연산자는 아주 많이 사용하지는 않지만, 사용할 경우에는 꼭 연산자를 변수에 붙이는 순서를 유의해서 사용하시기 바랍니다.

다음으로 많이 사용되는 연산자는 관계 연산자(relational operators) 입니다. 관계 연산자는 변수들 사이의 관계를 비교하기 위해서 사용하기 때문에 비교 연산자(comparison operators) 라고도 부릅니다. 비교 연산자는 말 그대로 변수들의 값을 비교하기 위해서 사용하는 연산자 입니다. <, >, <=, >= 같은 것들이 있으며, 우리가 수학에서 부등호라고 부르는 것입니다. 비교 연산자는 항상 왼쪽에 나온 변수를 기준으로 생각하면 쉽습니다. 예를 들어, a < b라는 코드가 있을 경우, a가 b보다 작다라고 해석하면 됩니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = 1;
let b = 2;

console.log(a < b);
// 출력 결과: true

console.log(a > b);
// 출력 결과: false

console.log(a <= b);
// 출력 결과: true

console.log(a >= b);
// 출력 결과: false

관계 연산자는 변수 사이의 크고 작음을 비교하는데 사용합니다. 그런데 변수의 값이 같은지 다른지를 비교하고 싶을 때는 어떻게 해야 할까요? 이 때 사용하는 것이 바로 동등 연산자(equality operators) 입니다. 동등 연산자는 두 개의 변수의 값이 같은지 다른지를 판단할 수 있게 해줍니다. 같은지 다른지를 비교하기 위해서 기호로는 각각 ==, !=를 사용합니다. 그런데 자바스크립트에서는 단순히 동등한지 비교하는 것 이외에 변수의 자료형까지 같은지 엄격하게 비교를 할 수 있도록 일치 연산자(strict equality operators) 를 제공합니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = 1;
let b = '1';

console.log(a == b);
// 출력 결과: true

console.log(a != b);
// 출력 결과: false

console.log(a === b);
// 출력 결과: false

console.log(a !== b);
// 출력 결과: true

위 예시 코드에서 변수 a의 자료형은 number이고, b의 자료형은 string입니다. 두 변수의 값은 1로 동일하지만, 자료형은 다른 것이죠. 그래서 동등 연산자를 사용한 경우에는 값이 같은 것으로 나오지만, 일치 연산자를 사용한 경우에는 자료형이 다르기 때문에 두 변수가 다르다고 판단하게 됩니다. 동등 연산자나 일치 연산자를 사용할 경우에는 이러한 차이를 잘 인지하고 사용하시는 것이 중요합니다. 사용 할 변수의 자료형이 확실치 않을 때는 일치 연산자를 사용하여 자료형까지 완전히 일치하는지 비교하는 것이 좋습니다.

다음으로 중요한 연산자는 이진 논리 연산자(binary logical operators) 입니다. 이진 논리 연산자란 true와 false값만을 가지는 boolean값을 비교할 때 사용하는 연산자 입니다. 그렇기 때문에 이진 논리 연산자의 결과 또한 boolean값이 됩니다. Logical AND연산과 Logical OR연산을 제공하며, 기호로는 각각 &&와 ||를 사용합니다. 논리 연산에 대해서 간단하게 설명하면, AND연산은 양쪽 모두가 true일 경우에만 true를 반환하며, OR연산은 하나라도 true일 경우에는 true를 반환하는 연산입니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = true;
let b = false;

console.log(a && b);
// 출력 결과: false

console.log(a || b);
// 출력 결과: true

마지막으로 배울 연산자는 조건부 연산자(conditional operator) 입니다. 조건부 연산자는 조건에 따라서 결과가 두 개로 나눠지게 되는데, 그래서 삼항 연산자(ternary operator) 라고도 부릅니다. 기호로는 ?를 사용하며, 조건식 ? true일 경우 : false일 경우형태로 사용합니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

let a = true;
let b = false;

console.log(a ? 1 : 2);
// 출력 결과: 1

console.log(b ? 1 : 2);
// 출력 결과: 2

지금까지 자바스크립트에서 가장 많이 사용하는 기본적인 연산자에 대해서 배워보았습니다. 우리가 배운 내용 이외에도 다양한 연산자들이 있지만, 자바스크립트를 배우기 위한 문서가 아니기 때문에 여기에서는 다루지 않고 넘어가도록 하겠습니다. 자바스크립트의 연산자에 대해 더 자세한 내용이 궁금하신 분들은 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

0.3.5 자바스크립트의 함수

지금까지 자바스크립트의 자료형과 연산자를 배웠습니다. 이번에는 마지막으로 자바스크립트의 함수에 대해서 배워보도록 하겠습니다. 프로그래밍에서 함수라고 하면, 입력을 받아서 정해진 출력을 하는 것을 의미합니다. 여기에서 함수의 입력을 파라미터(parameters) 또는 arguments라고 부릅니다. 자바스크립트에서 함수를 정의하는 방법은 크게 두 가지로 나뉩니다. 첫 번째는 function statement를 사용하는 것이고, 두 번째는 arrow function expression을 사용하는 방법입니다. 아래 예시 코드를 한 번 보도록 하겠습니다.

// function statement를 사용
function sum(a, b) {
    return a + b;
}

console.log(sum(10, 20));
// 출력 결과: 30

// arrow function expression을 사용
const multiply = (a, b) => {
    return a * b;
}

console.log(multiply(10, 20));
// 출력 결과: 200

이처럼 두 가지 다른 방식으로 함수를 정의할 수 있으며, 함수를 호출할 때는 함수 이름 뒤에 괄호를 붙이고 그 안에 파라미터들을 넣어주면 됩니다. 이 문서에서는 자바스크립트 함수를 직접 만들어서 사용할 경우는 많이 없지만, 리액트의 컴포넌트 중에서 함수 컴포넌트(function component)가 하나의 자바스크립트 함수라는 사실을 기억하고 넘어가시기 바랍니다. 그리고 자바스크립트의 함수에 대해 더 자세한 내용이 궁금하신 분들은 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions