[JS]자료형(Type)

산말랭이(sanmalleng)·2022년 3월 29일

JavaScript

TIL : JavaScript

목록 보기

4/6

원시자료형(Primitive)

Number, String, Symbol, Boolean, null, undefined,

불변성을 갖는 값 (immutable value)
재할당 시 기존 값을 지우고 변경하는 것이 아니라 새로운 메모리에 재할당한 값을 저장하고 재할당된 값을 참조하는 것
pass-by-value
값에 의한 호출. 기본자료형은 복사되어 전달(=값 자체를 재할당하여 저장)

let a = 1;
let b = a;

console.log(a); // 1
console.log(b); // 1
console.log(a === b); //true

✍️ Result
기본 자료형은 b가 a를 호출한 것처럼 보이지만 a의 할당값 1을 재할당 받은 것이므로 true 값이 나온다.

1.숫자형(Number)

정수 및 부동소수점 숫자 출력
모든 숫자를 부동소수점 형태로 반환한다.

📌Infinity,-Infinity,NaN
'특수 숫자 값(special numeric value)'이 포함

 let positiveTest=(1/+0); // Infinity
 console.log(positiveTest);

 let negativeTest=(1/-0); // -Infinity
 console.log(negativeTest);

// Infinity 직접 호출 가능
 console.log(Infinity); // Infinity

✍️ Result
Infinity 무한대라는 뜻.
+0과 -0은 사용하는데 별다른 차이가 없으나 +,- 무한대는 코드로 나타내면 콘솔 상에서 차이점을 확인할 수 있다.

const TEST= 100 - "hi"; // 숫자열-문자열=?
console.log(TEST); // NaN

✍️ Result
부정확하거나 정의되지 않은 연산값은 NaN(Not a Number)로 반환

2.문자열형(String)

따옴표로 감싼 문자들의 집합체, 문자의 나열
1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): `Hello`

//""와 ''동시 사용 가능하나 번갈아서 사용해야함
let str1= "산말랭: '여러분 안녕하세요!?'";
console.log(str1);

let str2= '산말랭: "저는 산말랭이입니다 ~"';
console.log(str2);

//같은 따옴표 중복 사용시 따옴표 앞에 \(역슬레시)를 써주면 문자로 인식하여 출력한다.
let str3= "산말랭이란?: \"산정상의 방언입니다.\"";
console.log(str3);

//변수 사용시 enter = \n(제어문자)
//일반 문서출력 시 enter = <br>
let str4= "잘 부탁드립니다. \n 문자열형을 배우고 있습니다.";
console.log(str4);

✍️ Result
따옴표의 중복 사용, 역슬레시\, n(enter)를 콘솔 상에 어떻게 반환되는지 확인해보기

// 숫자형 + 문자열형 = 숫자형,문자열형
let num1= 10;
let num2= 5;
let num3= "5";
console.log(num1 + "+" + num3 + "=" + (num1+num2)); //10+5=15

//$기호 사용시 백쿼트로 표기
console.log(`${num1} + ${num2} = ${num1+num2}`);

// 1. 나의 성공의 해는?
let currentYear = prompt('나의 성공의 해는?')
document.write(`나의 성공의 해는 ${currentYear}입니다.`)

✍️ Result
``(백쿼트)안에 ${변수명}을 작성하면 변수에 있는 값이 지정한 자리에 와서 표현된다.
1. prompt 대화상자에 2022라고 적는다면 currentYear의 변수 값은 2022가 되므로 html 문서 상에 나의 성공의 해는 2022입니다.
라고 출력된다.

3.심볼형(Symbol)

유일하고 변경불가능(immutable)한 변수의 값
객체 property의 이름을 만들기위해 사용되므로 중복되어 충돌하는 일이 없도록 해야한다.
Symbol의 문자열은 심볼 함수에 대한 명명으로 심볼값에 어떠한 영향도 주지 않는다.

//1.심볼명이 겹친다면?
const SYMBOL1= Symbol("apple");
const SYMBOL2= Symbol("apple");
console.log(SYMBOL1);
console.log(typeof(SYMBOL1)); // symbol
console.log(SYMBOL1 === SYMBOL2); //false

//2.기본자료형의 성질
const SYMBOL3 = Symbol();
const SYMBOL4 = SYMBOL3;
console.log(SYMBOL3 === SYMBOL4); //true

✍️ Result
1.심볼은 유일한 존재로 주어지는 것이기 때문에 apple이라는 문자열은 같아도 서로 다른 apple로 출력되어 false로 반환된다.
2.위에서 말한 기본자료형 성질이 나타나는 부분이다. SYMBOL4는 SYMBOL3의 값을 재할당 받았기때문에 서로 같은 값을 가지고있어 ture로 반환된다.

4.논리형(Boolean)

true와 false 둘 중 하나의 값을 갖는 논리적 요소
주로 조건문에서 사용

    let redApple = 10;
	let greenApple = 20;
	let greenIsBig = redApple<greenApple
    console.log(greenIsBig); //true
    console.log(typeof(greenIsBig)); //boolean

    const B3 = Boolean(0); 
    const B4 = Boolean(1); 
    console.log(B3) //false
    console.log(B4) //true

✍️ Result
boolean 자료형은 '0'의 값을 flase로 반환한다.

    const B5 = Boolean("");
    const B6 = Boolean(null);
    const B7 = Boolean(undefined);
    console.log(B5) //false
    console.log(B6) //false
    console.log(B7) //false

✍️ Result
'0'의 값 외에 빈 문자열, null, undefined, -0, NaN도 flase로 반환한다.

    const B8 = Boolean({});
    console.log(B8) //true

✍️ Result
하지만, 값 안에 중괄호가 표기되어 있으면 {} 값을 가지고 있는 것으로 출력되어 true를 반환한다.

5.undefined

어떠한 값도 할당되지 않은 상태

let age;
console.log(age) //undefined

6.null

빈 값 (변수가 참조하는 객체가 없음)
null로 변수를 초기화 한 경우

📌 undefine는 아무 값도 할당되지 않은 것이지만,
null은 메모리 안에 'null'이라는 값이 들어있다.

참조자료형(Reference)

기본자료형을 제외한 모든 값은 object로 반환
기본형은 하나의 값만, 참조형은 여러개의 프로퍼티를 가질 수 있다.
pass-by-reference
참조에 의한 호출. 즉 메모리의 주소값으로 값을 가져오는 것

let arr = [1, 2, 3];
let arr1 = arr;

console.log(arr); // [1, 2, 3]
console.log(arr1); // [1, 2, 3]
console.log(arr === arr1); // false

✍️ Result
arr1은 기본형과 다르게 값을 복사하여 재할당 받은 것이 아니라 arr의 주소값을 복사하여 값을 참조하므로 arr과 arr1은 콘솔 상 같은 값으로 보이지만 다른 값으로 출력하여 flase를 반환한다.

1.객체형(Object)

중괄호{}를 이용하여 Key : vaule 을 포함
콜론:으로 Key : vaule 구조 생성(콤마,로 여러개 생성 가능)
여러 속성, 값을 하나의 변수에 저장하는 타입

// 매우 불쾌한 구조
  let apple_id = "apple"
  let apple_pw = "abcd1234"
  let apple_age = 10

let apple = {
    id : "apple",
    pw : "abcd1234",
    age : 10
  }
console.log(typeof(apple)); // Object
console.log(apple); // {id: 'apple', pw: 'abcd1234', age: 10}
console.log(apple.age); // 10

✍️ Result
콘솔창에 Object 타입으로 반환
{id: 'apple', pw: 'abcd1234', age: 10}
으로 apple의 프로필 모두 반환되며,
apple.age로 출력하였을때는 apple의 age 즉, 10이 반환된다.

// 프로퍼티 축약 표현 가능
let id = 'apple', age = 10;
const obj = { id, age };
console.log(obj) // {id: 'apple', age: 10}

2.배열형(Array)

typeof();

자료형 타입 확인하기

let num1= 100;
let num2= 20;
let num3= "10000";
//숫자형 + 문자열형 = 문자열형(string)
console.log(typeof(num1+num3)); // string
//숫자형 + 숫자형 = 숫자형(number)
console.log(typeof(num1+num2)); // number