[JS] 기본 문법 (데이터 타입과 형 변환)

황태규·2023년 8월 15일

JS

목록 보기

2/6

출처 : https://www.iplocation.net/javascript

JS 언어의 특징

[1] 객체 지향 프로그래밍 지원
[2] 동적 타이핑
[3] 함수형 프로그래밍 지원
[4] 비동기 처리
[5] 클라이언트 측 및 서버 측 모두에서 사용 가능

JS 기본 문법

(1) 변수와 상수

⚠️ 변수가 무엇이고, 왜 필요할까요?

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용
하기 위해 변수라는 메커니즘을 이용합니다.
만약, 변수를 이용해서 재사용을 하지 않는다면, 우리는 “10 + 20 + 30 = 60”이라는 식에서 60이라는 결과값을 얻기 위해서 항상 저렇게 긴 식을 써줘야 하겠죠. 변수를 사용한다면 60이라는 결과만 변수에 담아놓고, 계속해서 재사용하기만 하면 돼요 🙂

⚠️ 변수의 5가지 주요 개념

변수 이름 : 저장된 값의 고유 이름

변수 값 : 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 행위

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어오는것

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있습니다. var은 예전부터 사용되던 방법입니다. let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법입니다.

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World";
console.log(myLet); // "Hello World"

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워집니다. let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생합니다. const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용합니다.

(2) 데이터 타입

1] 데이터 타입

숫자(Number)

정수형 숫자(Integer)

let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

실수형 숫자(Float)

let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

지수형 숫자(Exponential)

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

NaN(Not a Number)
```
let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"
```
❗ NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값입니다. 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생합니다.

Infinity(양수)

let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

Infinity(음수)

let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

문자열(String)
문자열은 문자의 나열입니다. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현합니다.
```
  let name = 'Alice';
  let message = "Hello, world!";
```

문자열 길이(length) 확인하기

     let str = "Hello, world!";
     console.log(str.length); // 13
	   ```

	2. 문자열 결합(concatenation)
     
  ```jsx
     let str1 = "Hello, ";
     let str2 = "world!";
     let result = str1.concat(str2);
     console.log(result); // "Hello, world!"

문자열 자르기(substr, slice)

 let str = "Hello, world!";
 console.log(str.substr(7, 5)); // "world"
 console.log(str.slice(7, 12)); // "world"

문자열 검색(search)

 let str = "Hello, world!";
 console.log(str.search("world")); // 7

문자열 대체(replace)

 let str = "Hello, world!";
 let result = str.replace("world", "JavaScript");
 console.log(result); // "Hello, JavaScript!"

문자열 분할(split)

 let str = "apple, banana, kiwi";
 let result = str.split(",");
 console.log(result); // ["apple", " banana", " kiwi"]

불리언(Boolean)
불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입입니다.
```
  let bool1 = true;
  console.log(bool1); // true
  console.log(typeof bool1); // "boolean"
```
```
  let bool2 = false;
  console.log(bool2); // false
  console.log(typeof bool2); // "boolean"
```
불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용됩니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
```
 let x = 10;
 let y = 5;
 
 if (x > y) {
   console.log("x is greater than y");
 } else {
   console.log("x is less than or equal to y");
 }
 
 let a = true;
 let b = false;
 
 console.log(a && b); // false
 console.log(a || b); // true
 console.log(!a); // false
```
위 코드에서는 if 조건문을 사용하여 x가 y보다 큰 경우에는 "x is greater than y"를 출력하고, 그렇지 않은 경우에는 "x is less than or equal to y"를 출력합니다. 또한, 논리 연산자를 사용하여 a와 b의 논리적인 AND(&&)와 OR(||) 연산을 수행하고, NOT(!) 연산을 수행합니다.
undefined
undefined는 값이 할당되지 않은 변수를 의미합니다.
```
 let x;
 console.log(x); // undefined
```
null
null은 값이 존재하지 않음을 의미합니다. undefined와는 다릅니다.
```
 let y = null;
```
객체(Object)
자바스크립트에서는 객체가 매우 중요한 역할을 합니다. 객체는 속성과 메소드를 가지는 컨테이너입니다. 중괄호({})를 사용하여 객체를 생성합니다.
```
 let person = { name: 'Alice', age: 20 };
 person.name // 'Alice'
 person.age // 20
```
배열(Array)
배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호([])를 사용하여 배열을 생성합니다.
```
let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
```

(3) 형 변환

JS에서는 다양한 자료형을 다룰 수 있으며, 그중 형 변환에 대해 공부하겠습니다.

[2]-1. 암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

[2]-1-1. 문자열 변환

console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"

위의 예제에서는 문자열과 다른 자료형이 연산자로 결합되어 있습니다. 이 경우에는 자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행합니다.

[2]-1-2. 숫자 변환

console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9

위의 예제에서는 연산자를 사용할 때, 문자열을 숫자로 변환합니다. 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환됩니다.
[2]-1-3. 불리언 변환

console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

위의 예제에서는 Boolean() 함수를 사용하여 불리언 값으로 변환합니다. 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다. 그 외의 값은 true로 변환됩니다.

[2]-2. 명시적 형 변환(explicit coercion)

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말합니다.

[2]-2-1. 명시적 문자열 변환

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

위의 예제에서는 String() 함수를 사용하여 다른 자료형을 문자열로 변환합니다.

[2]-2-2. 숫자 변환

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

황태규

응애

이전 포스트

자바스크립트 소개 1

다음 포스트