JavaScript 데이터

Javascript를 사용하기 위해서는 데이터를 원하는 대로 다룰 줄 알아야 합니다.

 

데이터 선언

JS 데이터 선언에는 크게 두가지로 const와 let이 존재합니다.

const는 값이 변하지 않는 데이터를 의미합니다.

let은 코드에 의해 값이 변할 수 있는 데이터를 의미합니다.

 

var라는 선언방식이 존재하지만, 호이스팅관련 문제를 일으킬 수 있으므로 가급적 사용을 피하는것이 좋습니다.

 

 

데이터 타입

JS 데이터 타입에는 크게 원시형과 참조형 두가지가 존재합니다.

원시형

원시형 타입에는 String, Number, Boolean, null, undefined 의 5가지가 있습니다.

   1. String

// 문자는 따옴표를 사용합니다.
const s1 = "Thomas"
const s2 = '12'

// 템플릿 문자열은 백틱을 사용하며, ${} 안에 데이터를 보간합니다.
const s3 = `My name is ${s1}, I'm ${s2} years old`

console.log(s3)

      - 문자를 다루는 데이터 형식입니다.

      - 따옴표를 사용하여 표시합니다.

      - 백틱( ` )을 사용하여 템플릿 문자열을 만들 수 있으며,  데이터 보간은 ${} 를 사용합니다.

출력 결과

   2. Number

const n1 = 123
const n2 = 12.345

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

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

      - 숫자를 다루는 데이터 형식입니다.

      - 따옴표 없이 숫자로만 입력하며, 부동소수점 방식을 사용합니다.

      - 문자 데이터를 더하면 숫자값 뒤에 문자를 붙이며, 문자데이터로 변환됩니다.

      - undefined를 더하면 NaN으로 값이 변하여 깨지므로, 데이터 형식을 잘 생각해야 합니다.

 

실행결과

 

 

   3. boolean

// boolean 타입은 참/거짓의 두가지 값을 가진 논리 데이터입니다.
const yes = true;
const no = false;

console.log(yes, no) // true, false

if(yes){
   console.log('true') // if문이 true이므로 출력됩니다.
}

// 논리연산자를 사용하여 참과 거짓을 판단합니다.
const n1 = 1;
const n2 = 2;

console.log(n1>n2) // 거짓이므로 false가 출력됩니다.

      - 논리값을 다루는 데이터 형식입니다.

      - true (참) 와 false (거짓) 두가지 값만 가지고 있습니다.

실행 결과

 

 

   4. Null

// 존재하지 않는 값, 비어있는값, 알 수 없는 값을 명시적으로 나타냅니다.
let item = null

      - 존재하지 않는값, 비워진 값, 알 수 없는 값을 표시할 때 사용합니다.

 

 

   5. undefined 

let ud1
console.log(ud1)

function fn1(){

}

console.log(fn1)

      - 값이 정해지지 않은 상태를 나타내는 타입입니다.

      - 값이 할당되지 않은 데이터, 반환값이 없는 함수 등을 출력할 때 undefined가 암시적으로 할당됩니다.

      - 명시적으로 undefined 값을 지정해 줄 수도 있습니다.

 

 

 

 

참조형

   1. Object

const user = {
    name: 'Thomas',
    age: 12,
    isValid: true,
    email: ['Thomas123@abc.com', 'Thomas@xyz.com'],
    hello: function(){
        return `My name is ${this.name}, I'm ${this.age} years old`
    }
}

console.log(user.name)
console.log(user.age)
console.log(user.isValid)
console.log(user.email)
console.log(user.hello())

console.log(user['name'])
console.log(user['age'])
console.log(user['isValid'])
console.log(user['email'])
console.log(user['hello']())

      - 객체를 의미하는 타입으로, key와 value로 이루어진 데이터 집합입니다.

      - 객체 내 각 데이터를 속성(Property)라 부르고, 함수인 경우 메서드(Method)라 부릅니다.

      - 점 표기법 또는 대괄호 표기법을 사용해 객체 내 속성이나 메서드에 접근할 수 있습니다.

출력 결과

 

 

 

   2. Functions

// 함수 선언문
function add(a, b){
    return a+b
}

// 함수 표현식
const sub = function (a, b){
    return a-b
}


console.log(add)
console.log(sub)
console.log(add(1,4))
console.log(sub(8,5))

      - 함수를 의미하며, javascript에서는 데이터로 취급할 수 있습니다.

      - 함수를 선언하여 할 수도 있지만, 변수에 함수를 지정하는 표현식으로 사용할 수도 있습니다.

      - 함수명 뒤에 소괄호를 포함해야 값이 출력되며, 소괄호 없이 함수명만 적으면 함수 데이터가 출력됩니다.

출력결과

 

 

   3. Array

const fruits = ['Apples', 'Banana', 'Cherry']
const numbers = [1,2,3,5,8,13]

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

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

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

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

      - 여러 데이터의 배열을 의미하는 타입입니다.

      - length로 길이를 확인할 수 있고, index를 지정하여 Array 내 item을 확인할 수 있습니다.

      - index는 0부터 시작합니다.

실행결과