JavaScript 소개 및 자료형 [처음 만난 리액트 #2]

리액트를 배우기 위해 필요한 기초 지식 정리 📄 & 실습 환경 구축 💻

 

[무료] 처음 만난 리액트(React) - 인프런 | 강의

---

만약 웹사이트가 html만으로 구성되어 있다면, 사용자는 버튼을 누르거나 정보를 입력하는 등의 동적인 작업들을 처리할 수 없음

동적인 작업을 처리하기 위해서 JavaScript를 사용

html은 웹사이트의 뼈대를 구성한다면, JavaScript는 웹사이트가 살아 움직이도록 생명을 불어넣는 역할

 

JavaScript란?

● 프로그래밍 언어의 한 종류

● 이름때문에 Java와 연관된 프로그래밍 언어라고 착각하기 쉽지만, JavaScript의 정식 명칭은 ECMAScript

● Script 언어의 한 종류

● JavaScript의 사용 범위는 굉장히 넓다!

오랫동안 JavaScript는 웹사이트 개발에만 사용되었는데, 최근에는 모바일 앱 개발을 위한 리액트 네이티브나 데스크탑용 앱 개발을 위한 일렉트론 등에서도 JavaScript를 사용하고 있음

 

Script Language 특징

● 다른 프로그래밍 언어들과의 가장 큰 차이점은 프로그램이 실행되는 run time에 코드가 해석, 실행된다는 점

C 언어나 Java 같은 컴파일 언어는 컴파일이라는 과정을 통해서 소스코드가 해석되고, 실행 가능한 형태로 변환 

 

ES6 (ECMAScript 2015, ES2015)

강의 시점 기준 가장 최신 버전은 ES2 (ECMAScript 2021)이지만, 2015년에 ES6가 release되면서 새로운 문법이 많이 추가되었고 JavaScript 표준의 발판을 마련했기 때문에 그 의미가 깊음

이 강의에서는 ES6 문법을 기준으로 설명!

 

---

JavaScript의 자료형

자료형(Data Type): 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형

 

Dynamic Typing (동적 타이핑)

● 모든 변수들은 하나의 자료형을 가지게 되는데, 일반적인 프로그래밍 언어에서는 변수를 선언하는 시점에 해당 변수의 자료형이 결정 

● JavaScript에서는 변수를 선언할 때가 아닌 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정 

● 변수를 선언할 때 다른 프로그래밍 언어처럼 변수의 자료형을 먼저 쓰지 않고, var을 씀 (var: 변수 variable)

   var 대신 let을 쓰기도 함

 

▼ JavaScript의 대표적인 자료형

 

// 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 type : 숫자를 다루기 위한 자료형, 정수나 소수를 저장할 수 있음

 

● String type : 문자열을 다루기 위한 자료형, 문자열을 선언할 때는 큰 따옴표나 작은 따옴표로 묶어주면 됨

* 큰 따옴표로 열고 작은 따옴표로 닫는 것 처럼 두 종류의 따옴표를 한 번에 사용해서는 안 됨

 

● Boolean type : 값이 true 또는 false 두 가지로만 정해져있는 자료형

 

● Null type : 값이 null인 것을 의미하는 자료형

 

● Undefined type : 값이 아직 정의되지 않은 상태를 의미 

let u1; 처럼 값을 선언만하고 대입하지 않으면 변수의 자료형은 undefined가 됨 

 

● Array type : 배열을 나타내는 자료형

* 배열 : 여러가지 변수들을 순서대로 모아놓은 것

일반적인 프로그래밍 언어들과 달리, JavaScript에서는 배열에 다양한 자료형의 변수가 함께 들어갈 수 있음 

배열에 있는 각 변수들은 자신의 순서를 나타내는 인덱스 값을 가짐 (인덱스는 0부터 시작하며, 인덱스를 통해 배열의 변수에 접근할 수 있음)

 

// 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 type : 객체를 다루기 위한 자료형

여기서 객체는 다른 객체지향 프로그래밍 언어에서의 객체와 의미가 다름 

JavaScript에서의 객체 : key와 value로 이루어진 쌍의 집합 (다른 프로그래밍 언어에서의 딕셔너리, map, hashmap과 유사한 자료형)

key는 문자열이어야 하며, value는 어떤 자료형이든 다 들어올 수 있음

 

// 값으로 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 } 
};

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

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

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

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

---

▼ JavaScript 자료형 참고 링크

JavaScript data types and data structures - JavaScript | MDN