Javascript 데이터 - 원시형, 참조형, 형 변환, 참 & 거짓, 데이터 타입 확인

프론트엔드(Web)/JavaScript

Javascript 데이터 - 원시형, 참조형, 형 변환, 참 & 거짓, 데이터 타입 확인

만능 엔터테이너 2024. 7. 2. 01:38

728x90

SMALL

원시형 - String, Number

문자열 데이터 => " " (큰 따옴표) 또는 ' '(작은 따옴표) 내부에 작성합니다.

※ 백틱 ( `` 1번 왼쪽 키보드 ) -> 보간 역할 - 데이터를 문자 데이터 내부에 채워 넣는 경우 {템플릿 리터럴}

const string1 = 'Hello'
const string2 = 'Hello ${string1} ?!'

console.log(string3)

=> 콘솔 창에 Hello Hello ?! 으로 출력됨 / 문자 내용에 ${ } 내부에 추가할 내용을 작성하는 것

연산을 추가할 때, const 변수명 = 3.14 처럼 부동소수점형으로 작성이 가능함 / 만약 const 변수명 = 0.14인 경우에는 const 변수명 = .14 으로 작성해도 무관합니다.

const number = -123.123123

cosonle.log(number + undefined)

이때, undefined으로 작성하면 콘솔 창에 Nan( Not a Number ) 라고 데이터의 타입은 숫자이지만 숫자로 표기가 불가능한 것을 의미합니다.

※ typeof -> 작성된 데이터의 형을 콘솔창에 출력합니다.

console.log(typeof (number _ undefined ))

NaN 인 경우에 이렇게 작성하게 되면 콘솔 창에 number로 입력이 되는데 만약, 코드를 작성시 NaN 이 콘솔창에 등장하게 되면 코드를 점검해야됩니다. (오류)

.toFixed(n) : 계산 결과의 소수점 n번째 자리까지 계산

const a = 0.1
const b = 0.2

console.log(Number(a+b).toFixed(1))) // 0.3

만약에, 소수값을 계산하는 과정에서 0.33333333333333333과 같이 무한소수가 나오게 되면 콘솔 창에

consonle.log(Number[데이터형](a+b).toFixed(1)))) 으로 작성하여 숫자형 데이터를 소수점 1의 자리까지 계산하도록 설정할 수 있습니다.

원시형 - Boolean, Null, Undefined

Boolean [논리형] : true or false 2개의 값 중 하나를 나타내고 주로 조건문에 사용됩니다.

Null : 값이 존재하지 않거나, 비어있거나 혹은 알 수 없음을 의미합니다. [명시적으로 값이 없음]

Undefined : 값이 존재하지 않음, 직접 값을 할당하지 않아도 이미 값이 존재함 즉, 값이 할당받지 않은 경우를 의미

const function = Null

명시적으로 사용자가 직접 작성함

const function 

값이 없으므로 undefined가 나타나게 됨

const user = {
  name: "HEROPY",
  age: 85,
  email: null
};

console.log(user.name);
console.log(user.age);
console.log(user.email);
console.log(user.abc);

각각 콘솔 창에 순서대로 
HEROPY
85
Null
Undefined 
이렇게 출력이 됩니다.

const user 함수에 { } 내부에 객체를 생성하고 콘솔 창에 함수명.객체명 으로 콘솔창에 각각 출력할 수 있습니다. 변수의 값이 null 이면 null로 표기하고 값이 존재하지 않으면 콘솔 창에 Undefined으로 작성됩니다.

참조형 - Array[배열]

// Array(배열)

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);

이렇게 작성하게 되면 콘솔 창에는 아래와 같은 화면으로 출력됩니다. 이때, 배열 데이터는 const fruits = [ , , , ] 이처럼 작성되며 각각 숫자 0번째, 1번째, 2번째로 작성하게 됩니다. 이때, 콘솔 창에 fruits[0] 으로 변환하게 되면 첫 번째 배열 데이터인 'Apple'이 콘솔 창에 출력되게 됩니다.

// Array(배열)

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits);


---------------------------------------------------

// Array(배열)

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]);

배열데이터에서 대괄호 안에 숫자를 작성하여 특정 숫자 값을 대입하는 것을 인덱싱이라고 합니다.

// Array(배열)

const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits.length);

=> console.log(fruits.length); 로 입력하게 되면 배열의 길이인 3이 콘솔 창에 출력되게 됩니다.

만약, 배열의 길이를 모른다고 가정하에 배열의 마지막 데이터를 콘솔 창에 출력할 경우에는 console.log(fruits[fruits.length -1]) 으로 작성하게 되면 배열의 마지막 데이터가 출력되게 됩니다.

=> 배열의 순서는 Zero Based Numbering을 기준으로 지정되게 됩니다.

참조형 (객체 데이터) - Object

객체 데이터는 new 함수명 () 으로 생성할 수 있습니다.

방식1)

// Object (객체)

const user = new Object();
user.name = "HEROPY";
user.age = 85;

console.log(user);

으로 작성하게 되면 콘솔 창에 아래와 같이 출력이 됩니다.

{name: 'HEROPY', age: 85}
age: 85
name: "HEROPY"
[[Prototype]]: Object

출력되는 형식 => key:value 형식 [속성: 값] 둘 다 같은 개념

방식2)

function User() {
  this.name = 'Heropy'
  this.age = 85
}
const user = new User ()

console.log(user)

위와 같이 출력되는 부분은 동일 / 객체 데이터를 생성하는 방식이 다른 경우일 뿐

방식3)

const user = {
  name: 'Heropy',
  age: 85
}

console.log(user.name)

위와 같이 출력되는 부분은 동일 / 객체 데이터를 생성하는 방식이 다른 경우일 뿐 But, 이 형식이 가장 많이 사용되는 형식

이때, name: 'Heropy' 다음 ,(쉼표)를 입력하지 않으면 오류가 발생하기에 꼭 name 뒤 ,(쉼표)를 붙이고 다음 내용을 작성합니다.

console.log(user.name)
console.log(user['name'])

위 2가지 모두 같은 내용인 Heropy를 콘솔창에 출력합니다. 표기하는 방식은 점 표기법과 대괄호 표기법의 차이가 있는 정도 일 뿐입니다.

const key = 'name'

console.log(user.name)
console.log(user[key])

위 내용처럼 새롭게 생성한 key 함수에 name값을 저장하고 콘솔 창에 key 함수를 출력하면 동일한 값이 출력되게 됩니다.

const user = {
  name: 'Heropy',
  age: 85,
  age: 23
}

const key = 'age'

console.log(user)

이처럼 age 속성이 2가지가 객체 데이터가 존재한다면 가장 마지막에 작성된 객체 데이터인 age: 22가 콘솔 창에 출력이 됩니다.

const userA = {
  name: 'HEROPY',
  age: 85
}
const userB =  {
  name: 'Neo',
  age: 22,
  parent: userA
}

console.log(userB.parent.name)
console.log(userB['parent']['name'])

위 처럼 각각 점 표기법과 대괄호 표기법을 활용하여 동일한 내용을 출력할 수 있습니다.

const userA = {
  name: 'HEROPY',
  age: 85
}
const userB =  {
  name: 'Neo',
  age: 22,
  parent: userA
}

console.log(userB.parent.name)
console.log(userB['parent']['name'])

const users = [userA, userB]

console.log(users[0].name)

위 처럼 표기법을 다양하게 활용하여 사용할 수 있습니다.

참조형 - Function

이렇게 작성하고 콘솔 창을 입력하게 되면

function hello() {

console.log("Hello!");

}

console.log(hello);

ƒ hello() {
console.log("Hello!");
}

이렇게 출력이 됩니다.

function getNumber() {

return 123;

}

console.log(getNumber());

만약, 이렇게 작성하고 실행하게 되면

화면에는 123이 출력되게 됩니다.

const getNumber = function () {

return 123;

};

console.log(typeof getNumber());

number 이 출력됨

const getNumber = function () {

return 123;

};

console.log(typeof getNumber);

function 이 출력됨

=> 이처럼 console.log(함수명) 과 console.log(함수명()) 은 각각 값이 다르게 출력되는 것을 알 수 있습니다.

형 변환 (Type Conversion)

=== : 일치 연산자 [완벽하게 같은 값이 아니면 항상 false가 출력되기에 안전하게 사용이 가능함]

// 형 변환 (Type Conversion)

const a = 1; // Number
const b = "1"; // String

console.log(a === b);

위 내용처럼 console.log ( a === b) 의 값이 동일하다고 작성하고 콘솔에 출력하게 되면 Number인 형과 String인 형이 서로 다르기에 콘솔 창에는 false라고 출력이 되게 됩니다.

== : 동등 연산자 { 서로 다른 형식의 데이터를 비교할 때는 웬만하면 일치 연산자 === 를 사용함}

// 형 변환 (Type Conversion)

const a = 1; // Number
const b = "1"; // String

console.log(a == b);

이렇게 작성하고 console.log( a == b) 라고 입력하게 되면 콘솔 창에는 true라고 출력이 됩니다. 이러한 이유는 콘솔 창에 출력할 때 데이터의 형 변환이 일어나서 실제 결과값만 비교하여 값은지 출력하기 때문입니다.

// 형 변환 (Type Conversion)

const a = 0; // Number
const b = false; // Boolean

console.log(a == b);

이렇게 작성하고 console.log( a == b)로 출력하게 되면 불린형 데이터 타입인 false 와 숫자형 데이터 타입인 0의 결과값은 같게 되므로 콘솔 창에는 true로 출력되게 됩니다.

// 형 변환 (Type Conversion)

const a = 1;
const b = true;

console.log( a==b)

이렇게 작성하게 되면 console.log( a==b)에 숫자형 데이터 타입인 1과 불린형 데이터 타입인 true의 결과값이 같기 때문에 콘솔 창에는 true로 출력되게 됩니다.

참과 거짓 (Truthy & Falsy)

// 참과 거짓 (Truthy & Falsy)

if (false) {
  console.log("참!");
}

if 조건문 내용에 true로 입력이 되면 입력한 참! 데이터가 출력이 되고 만약 false로 입력이 되면 콘솔 창에 아무것도 출력이 되지 않습니다.

<조건문에 대입하면 콘솔 창에 출력이 되지 않는 값>

1. false

2. 숫자 0

3. null

4. undefined

5. NaN

6. ' ' - 빈 문자열

7. 0n (숫자 0 + n(소문자))

위 7가지 경우를 제외한 내용 외 모든 내용은 모두 참 값 입니다!

const fruits = [];

if (fruits.length) {
  console.log("아이템이 들어있음!");
}

=> 위 조건문 값은 0 이기에 콘솔 창에는 아무것도 출력이 되지 않습니다.

const fruits = ["Apple"];

if (fruits.length) {
  console.log("아이템이 들어있음!");
}

=> 위 조건문 값은 1이기에 콘솔 창에는 "아이템이 들어있음!"이 출력이 됩니다.

데이터 타입 확인

// 데이터 타입 확인

console.log(typeof "Hello");

이렇게 작성하면 콘솔 창에 String 이라는 문자 데이터 타입이 명시됩니다.

// 데이터 타입 확인

console.log(typeof "Hello" === 'string');

일치 선택자를 사용하여 "Hello" 문자 데이터가 string이 맞는지 확인하는 내용을 콘솔에 출력하게 되면 콘솔 창에는 true라는 값이 출력되게 됩니다.

// 데이터 타입 확인

console.log(typeof "Hello" === "string");
console.log(typeof 123 === "number");
console.log(typeof false === "boolean");
console.log(typeof null === "null");

이렇게 입력하고 콘솔창에 출력하게 되면 콘솔 창은 각각 true,true,true,false 라고 출력이 되게 됩니다.

이때, console.log(typeof null) 로 변경하고 출력하게 되면 콘솔 창에 object라고 출력됩니다.

console.log(typeof null === "null");
console.log(typeof [] === "object");
console.log(typeof {} === "object");

위 내용처럼 typeof 를 사용하여 입력하게 되면 null 과 [ ] , { } 을 콘솔 창에 출력하게 되면 true 값으로 출력이 되기에 구분이 되질 않습니다.

console.log(typeof function () {} === "function");

위 내용 function, ( ), { } 전부 콘솔 창에 true로 출력이 되기에 구분이 되질 않습니다.

//console.log(null.constructor)
console.log([].constructor === Array)
console.log({}.constructor === Object)

constructor 를 사용하여 배열 데이터와 객체 데이터를 구분할 수 있지만 null값은 구분할 수는 없습니다.

console.log(Object.prototype.toString.call(null).slice(8,-1) === 'Null')

※ 최종적으로 null값을 구분할 수 있고 null 을 제외한 모든 데이터형식을 구분할 수 있습니다.

function checkType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

console.log(checkType(null));
console.log(checkType([]));
console.log(checkType({}));
console.log(checkTYpe(123));
console.log(checkType(undefined));
console.log(checkType("Hello"));

데이터의 형식을 알맞게 콘솔 창에 출력하려고 할 때 함수를 생성하고 그 함수가 받는 데이터를 지정하여

Object.prototype.toString.call(data).slice(8,-1)로 입력하고 console.log(checkType(체크할 데이터형)) 을 입력하면 콘솔 창에

각각

Null main.js:16 
Array main.js:17 
Object main.js:18
Number main.js:19 
Undefined main.js:20 String

로 출력되게 됩니다.

728x90

LIST

'프론트엔드(Web) > JavaScript' 카테고리의 다른 글

JavaScript - 매개변수 패턴 (0)	2024.07.08
JavaScript - 호이스팅(함수 선언과 표현 구분) (0)	2024.07.08
JavaScript - While, Do While 반복문 (0)	2024.07.08
JavaScript - For , For of , For in 반복문 (0)	2024.07.07
Javascript - 산술, 할당, 증감 연산자 (0)	2024.07.02

현재글Javascript 데이터 - 원시형, 참조형, 형 변환, 참 & 거짓, 데이터 타입 확인

250x250

yh-jeon Full stack

기획부터 디자인, 프론트, 백 개발까지 모든 거를 다 해보고 싶은 개발자 입니다~!

ㅂ, 티스토리챌린지, 오블완, #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #react #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #react #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정 태그 삭제# 태그입력, .,

Today :
Yesterday :

yh-jeon Full stack