[ JS ] JavaScript 데이터

📌 자바스크립트로 여러 데이터들을 활용하여 원하는 동작을 만들거나 관리를 할 수 있게 된다.
그래서 데이터가 매우 중요한 개념임!

🔎 원시형

01. String (문자열)

const s1 = "Neo"
// 왼쪽에 있는 변수 부분에 오른쪽 내용을 할당한다.
// '=' 할당 연산자
const s2 = '19'

const s3 = `My name is ${s1}, I'm ${s2}.`

console.log(s3)

My name is Neo, I'm 19.

• 문자(string)은 따옴표를 사용 (큰 따옴표, 작은 따옴표 상관 없음)
• 템플릿 리터럴(Literal)은 백틱을 사용하며, ${} 안에 데이터를 보간(Interpolation)한다.

02. Number (숫자)

const n1 = 123
const n2 = 12.345

const n3 = n1 + 'abc'
const n4 = n1 + undefined

console.log(n3)
console.log(n4)

123abc
NaN

• 숫자(number)는 정수 및 부동소수점 숫자를 나타낸다.
• 숫자가 아닌 숫자는 NaN(Not a Number)으로 표시된다.

03. Boolean (불린)

: 'true'와 'false' 두 가지 값인 참/거짓의 논리 데이터

const a = true
const b = false

console.log(a, b)

if (a) {
  console.log('참(Truthy)입니다!')
}

// 데이터를 서로 비교해, 참과 거짓을 판단한다.
const n1 = 1
const n2 = 9

console.log(n1>n2)

true false
참(Truthy)입니다!
false

04. null

: 존재하지 않는, 비어있는 알 수 없는 값을 명시적으로 나타낸다.

let age = null

const h1El = document.querySelector('h1')
//h1Element(h1요소 변수) = 

console.log(h1El)
console.log(h1El.textContent)

<h1>Hello, world!</h1>
Hello, world!

👀 html에 <h1>이 없다면?

💻 출력

null
Uncaught TypeError

05. undefined

: 값이 할당 되지 않은 상태

let age = 19

console.log(age)

function fn() {
  return 19
}

console.log(fn())

19
19

👀 변수를 할당하지 않는다면?

let age

console.log(age)

function fn() {
  //return 19
}

console.log(fn())

undefined
undefined

• 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 암시적으로 할당됨
  
  

🔎 참조형

01. Object (객체 데이터)

: 객체(Object) 데이터는 순서가 없는 Key(키)와 Value(값)의 쌍으로 이루어진 데이터 집합
: 객체에 포함된 각 데이터를 속성(Property)라고 부르고, 만약 그 데이터가 함수인 경우에는 메소드(Method)라고 부른다.

const user = {
  //key: value
  name: 'Neo',
  age: 19,
  isValid: true,
  emails: ['neo@abc.com', 'neo@xyz.com'],
  hello: function () {
    return `My name is ${this.name}, I'm ${this.age}!`
  }
}

// 점 표기법을 사용해 객체의 속성이나 메소드에 접근할 수 있다.
console.log(user.name)
console.log(user.age)
console.log(user.isValid)
console.log(user.emails)
console.log(user.hello())

// 대괄호 표기법을 사용해 객체의 속성이나 메소드에 접근할 수 있다.
console.log(user['name'])
console.log(user['age'])
console.log(user['isValid'])
console.log(user['emails'])
console.log(user['hello']())

Neo
19
true
['neo@abc.com', 'neo@xyz.com']
My name is Neo, I'm 19!

• 일반적으로 점 표기법을 사용하면 눈에 더 잘 들어옴
• 대괄호 표기법은 속성의 이름을 바꿔서 쓸 수 있어서 동적인 방식임

const key = 'isVaild'

console.log(user[key]) = console.log(user['isVaild'])

true

02. Functions (함수)

: 어떤 작업을 수행하기 위해 필요한 여러 코드의 집합으로, 코드를 추상화하고 재사용성을 확보한다.

• 함수 선언문(Declaration)

function add(a, b) {
  //console.log(a)
  //console.log(b)
  return a + b
}

console.log(add)
console.log(add(1, 3))
console.log(add(4, 12))
console.log(add(5, 7))

add(a, b) {
//console.log(a)
//console.log(b)
return a + b
}
4
16
12

• 함수 표현식(Expression)
  : 함수 표현식은 특정한 변수에 익명함수를 할당하는 개념으로 만들어진다!
  (function의 이름이 없음, 변수 자체가 함수가 됨)

const sub = function (a, b) {
  return a - b
}

console.log(sub)
console.log(sub(1, 3))
console.log(sub(4, 12))
console.log(sub(5, 7))

(a, b) {
return a - b
}
-2
-8
-2

03. Array (배열)

: 순서가 있는 여러 데이터의 집합
: 배열에 포함된 각 데이터는 아이템(Item) 혹인 요소(Element)라고 부른다.

const fruits = ['Apple', 'Banana', 'Cherry']
const numbers = [12, 27, 5, 9, 103]

console.log(fruits)
console.log(numbers)

// 배열의 길이를 확인합니다.
console.log(fruits.length)
console.log(numbers.length)

['Apple', 'Banana', 'Cherry']
[12, 27, 5, 9, 103]
3
5

// 배열의 아이템 번호(Index)로 아이템을 확인합니다.
// 숫자는 0부터 시작
console.log(fruits[2])
console.log(numbers([4])

Cherry
103

// 배열의 모든 아이템을 순회하며 확인합니다.
for (let i =0; i < fruits,length; i += 1) {
console.log(fruits[i])
}

for (let i =0; i < fruits,length; i += 1) {
console.log(numbers[i])
}

Apple
Banana
Cherry
12
27
5
9
103

⭐ 참과 거짓

// '참'으로 평가되는 값(Truthy)
if (true) { console.log('참!') }
if ({}) { console.log('참!') } //객체 데이터
if ([]) { console.log('참!') } // 배열 데이터
if (42) { console.log('참!') } // 숫자 데이터 (0제외)
if ('0') { console.log('참!') } // 문자 데이터
if ('false') { console.log('참!') }
if (new Date()) { console.log('참!') }
if (-52) { console.log('참!') }
if (12n) { console.log('참!') }
if (3.14) { console.log('참!') }
if (-3.14) { console.log('참!') }
if (Infinity) { console.log('참!') }
if (-Infinity) { console.log('참!') }

참!

// '거짓'으로 평가되는 값(Falsy)
if (false) { console.log('거짓..') }
if (null) { console.log('거짓..') }
if (undefined) { console.log('거짓..') }
if (0) { console.log('거짓..') }
if (-0) { console.log('거짓..') }
if (NaN) { console.log('거짓..') }
if (0n) { console.log('거짓..') }
if ('') { console.log('거짓..') } // 띄어쓰기 있으면 결과값이 출력됨 주의!

거짓으로 평가되면 출력되지 않음

const fruits = ['Apple', 'Orange']
if (fruits.length) {
  console.log('과일이 있어요!')
}

조건문이 if (2)가 되기 때문에 결과 값
과일이 있어요!

const fruits = []
if (fruits.length) {
  console.log('과일이 있어요!')
}

조건문이 if (0)이 되기 때문에 거짓으로 평가됨
결과 값이 출력되지 않음