Ch02 JS 데이터

ECMA스크립트(ES) = JS

String(문자열)

ex)

const string1 = "Hello"; // 큰따옴표
const string2 = 'Hello'; // 작은따옴표
const string3 = `Hello ${string1} ?!`; // 백틱

console.log(string3);

• 백틱: 중간에 데이터를 채워 넣을 때 사용 → 템플릿 리터럴(어떠한 기호를 통해서 데이터를 만들어 내는 방식)

Number(숫자)

ex)

const number = 123; // 양수
const number = -123; // 음수
const pi = 3.14 // 실수(부동소수점)

• number+undefined = NaN (타입은 number)
• 소수점 잘라내기 → toFixed(자릿수) console.log((0.1+0.2).toFixed(1)); // 첫번째 자리까지만 출력 → 위의 타입은 string임
  
• 소수점 잘라내며 숫자형 으로 변환 console.log(Number((0.1+0.2).toFixed(1)));
  

Boolean(논리데이터)

ex)

const a = true // 참
const b = false // 거짓

→ boolean에는 true, false 두 가지 값만 존재

null

• 존재하지 않음, 값을 알 수 없음, 값이 비어있음 → 나중에 값을 할당하여 사용 가능

ex)

let age = null;

console.log(age); // null

setTimeout(function () {
	age = 85;
	console.log(age); // 85
},1000);

undefined

• 값이 없는 상태, null과 같은 의미

ex)

let age;

console.log(age); // undefined

setTimeout(function () {
	age = 85;
	console.log(age); // 85
},1000);

❗️null vs undefined

null: 명시적으로 개발자가 값이 없다는 것을 나타냄

undefined: 암시적으로 값이 없다는 것을 의미

ex)

const user = {
	name: '홍길동',
	age : 85,
	phone: null
}
console.log(user.name); // 홍길동
console.log(user.age); // 85
console.log(user.email); // undefined
console.log(user.phone); // null

Array(배열)

• 대괄호([]) 안에 콤마(,)로 구분되어 나열된 데이터들

ex)

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

• 요소(Element), 아이템: 배열 안 각 데이터
• 0부터 인덱스 시작
• 배열.length: 배열의 길이 확인(아이템의 개수 확인)
• 특정 원소 출력 → 인덱싱 이용: console.log(fruits[2]); // Cherry

Object(객체)

• 중괄호({}) 안에 key(속성)-value(값) 형태로 나열된 데이터들

ex) 생성자 함수 방식으로 객체 생성

const user = new Object();
user.name = '홍길동';
user.age = 85;
console.log(user);

ex) 함수 내부에서 this 사용하여 객체 생성

function User() {
	this.name = '홍길동',
	this.age = 85
}
const user = new User();
console.log(user);

ex) 중괄호 기호를 사용한 리터럴 방식으로 객체 생성

const user = {
	name: '홍길동',
	age: 85
};
console.log(user); // {name: '홍길동', age: 85}
console.log(user.name); // 홍길동
console.log(user['name']); // 홍길동 → 대괄호 표기법(변수로 인덱싱할 때 사용)

const userA = {
	name: '홍길동',
	age: 85
};
const userB = {
	name: '김철수',
	age: 22,
	parent: userA
};
console.log(userB); 
// {name: '김철수', age: 22, parent: {name: '홍길동', age: 85}}
console.log(userB.parent);
// {name: '홍길동', age: 85}
console.log(userB.parent.age); // 85
console.log(userB['parent']['age']); // 85

const users = [userA, userB]
console.log(users[0]); // {name: '홍길동', age: 85}

Function(함수)

ex)

function hello() {
	console.log('Hello!');
}

hello(); // Hello!

function getNumber() {
	return 123;
}

console.log(getNumber()); // 123
console.log(typeof getNumber); // function
console.log(typeof getNumber()); // number

const getNumber = function () { // 익명함수(함수 이름이 없는 경우)
	return 123;
}

console.log(getNumber()); // 123
console.log(typeof getNumber); // function
console.log(typeof getNumber()); // number

const a = function () {
	console.log('A');
}

const b = function (c) {
	console.log(c); // a 함수 출력
	c(); // a 함수 내 내용 출력
}

b(123); // 123
b(a); 
/* f () {
			console.log('A');
	 }
	 A
*/

Type Conversion(형 변환)

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

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

❗️ === vs ==
=== (일치 연산자): 정확하게 데이터가 같은지 비교(형, 데이터 값)
== (동등 연산자): 형 변환이 일어나 값 동등한지 비교 → 다른 데이터 형태라도 true로 나올 수 있다.

Truthy&Falsy(참과 거짓)

• 거짓 → 0(숫자), false, null, undefined, NaN(Not a Number), ‘’(빈 문자), 0n(BigInt)
• 참 → 거짓 외 나머지 값 모두

ex)

if(true) {
	console.log('참');
}
// 참
if(false) {
	console.log('거짓');
}

const fruits = ['Apple', 'Banana'];
const fruits2 = [];

if(fruits) {
	console.log('아이템이 들어있음');
} // 아이템이 들어있음

if(fruits2.length){
	console.log('아이템이 들어있음');
} 

데이터 타입 확인

ex)

const a = 123;

console.log(typeof a); // number
console.log(typeof 'Hello'); // string
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof function () {}); // function

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

console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(null).slice(8, -1)); // Null 

• typeof 확인할 데이터 → 확인할 데이터의 타입 확인
• null, []는 object로 나옴
• [].constructor → Array 타입 확인
• {}.constructor → Object 타입 확인
• Object.prototype.toString.call(null).slice(8, -1) → Null 타입 확인

/* 데이터 타입 확인 함수 */
function checkType(data) {
	return Object.prototype.toString.call(data).slice(8,-1);
}

console.log(checkType('Hello')); // Hello
console.log(checkType(123)); // 123
console.log(checkType(false)); // false
console.log(checkType(undefined)); // undefined
console.log(checkType(null)); // null
console.log(checkType([])); // Array
console.log(checkType({})); // Object
console.log(checkType(function () {})); // function