처음부터 차근차근

변수와 데이터 타입 본문

Language/JavaScript

변수와 데이터 타입

HangJu_95 2023. 5. 22. 19:12
728x90

변수란?

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 매커니즘을 사용한다.

변수의 5가지 주요 개념**

변수 이름 : 저장된 값의 고유 이름
변수 값 : 변수에 저장된 값
변수 할당 :변수에 값을 저장하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
변수 참조 : 변수에 할당된 값을 읽어오는것

Javascript에서 변수는 세 가지 방법으로 선언할 수 있다.

 

1. var

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워진다.

// 1. var
var myVar = "Hello World";
var myVar = "Test 1";
myVar = "Goodbye"
console.log(myVar); // "Goodbye"

2. let

let은 같은 이름의 변수를 두 번 선언하면 오류 발생, but 변수 변경 가능

// 2. let
let myLet = "Hello World1";
// let myLet = "Test 2" -> let은 두번 선언하면 오류가 발생
myLet = "Goodbye 1"
console.log(myLet); // "Goodbye 1"

 

3. const

const 선언 후에 값을 변경할 수 없는 상수로 된다.

// 3. const
const myConst = "Hello World2";
// myConst = "goodbye2" -> 오류 발생, Const는 재할당 할 수 없다.
console.log(myConst); // "Hello World2"

 

데이터 타입

1. 숫자형

// 1-1. 정수
let num1 = 10;
console.log(num1);
console.log(typeof num1); // typeof 숫자 데이터 타입 확인용

// 1-2 실수 (float)
let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

// 1-3 지수형 (Exp)
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"

// 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"

2. 문자열(문자의 나열)

// 2. 문자열 : string(문자의 나열)
// 문자열을 나타낼때는, '' 나 "" 를 사용해야 한다
let str = "Hello, world!";

// 2-1 문자열 길이 확인하기
console.log(str.length); // 13

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

// 2-3 문자열 자르기(substr, slice)
let str3 = "Hello, world!";
console.log(str3.substr(7, 5)); // "world" 7번째부터 5개만 출력해줘
console.log(str3.slice(7, 12)); // "world" 7부터 12까지 출력해줘

// 2-4 문자열 검색
let str4 = "Hello, world!";
console.log(str4.search("world")); // 7

// 2-5 문자열 대체
let str5 = "Hello, world!";
let result2 = str5.replace("world", "JavaScript");
//console.log(result2); // "Hello, JavaScript!"

// 2-6 문자열 분할(split)
let str6 = "apple, banana, kiwi";
let result3 = str6.split(",");
console.log(result3); // ["apple", " banana", " kiwi"]

3. 불리언(Boolean)

 - true와 false를 나타내는 데이터 타입을 의미한다.

 - 조건문과 논리연산자와 함께 많이 사용된다.

// 불리언(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"

4. undefined

 - 값이 할당되지 않은 변수를 의미한다.

 

5. null

 - 값이 존재하지 않음을 의미한다.

 - undefined와 다른 점은, 값이 존재하지 않음을 '명시적'으로 나타내는 방법이다.

let y = null;
console.log(y);

6. Object 객체

 - JS에서 매우 중요한 역살

 - 속성와 메소드를 가지는 컨테이너 역할 (데이터 타입으로 봤을때, python의 딕셔너리 역할, but 하는 역할은 더욱 많음)

 - key - value 짝을 이루어져 있음

//object(객체) : key - value pair
let person = { name: 'Alice', age: 20 };
person.name // 'Alice'
person.age // 20

7. array(배열)

 - 여러 개의 데이터를 순서대로 저장하는 데이터 타입

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

형 변환

 - 형태를 바꾼다는 의미

 - 암시적 형 변환과 명시적 형 변환이 있다.

 

1. 암시적 형 변환

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"

1-2 숫자 변환

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

더하기 연산자가 아닌 다른 연산자를 할 경우, 숫자가 우선시된다, 문자와 문자가 만나도 숫자형으로 변환

2. 명시적 형 변환

2-1 Boolean Boolean()

// 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환됩니다.

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

2-2 문자열 String()

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]"

2-3 숫자형 Number()

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

 

https://developer.mozilla.org/ko/

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

 

 

 

 

'Language > JavaScript' 카테고리의 다른 글

객체 메소드  (0) 2023.05.24
조건문, 반복문  (1) 2023.05.24
함수와 Scope  (0) 2023.05.22
연산자  (0) 2023.05.22
Fetch 사용하기(Get 사용하기)  (0) 2023.05.04