JavaScript[3] - 데이터 타입과 연산자

JavaScript[3] - 데이터 타입과 연산자

 

데이터타입

데이터 타입에는 크게 원시 타입(Primitive type)과 참조 타입(Reference type)이 있습니다.

데이터 타입

원시 타입(Primitive type)

• 숫자(Number) : 정수 및 실수형 숫자를 표현하는 자료형
• 문자열(String) : 문자열을 표현하는 자료형
  • Template Literal(템플릿 리터럴) => Backtick(' ')을 사용하고 $와 중괄호 { }로 표기합니다.
• 불리언(Boolean) : 참(true) 또는 거짓(false) 값
• null : 값이 없거나 비어 있음을 나타내는 특수한 값 ( object )
  • 변수의 값이 없음을 의도적으로 표현할 때 사용
• undefined : 값이 정의(할당)되지 않음을 나타내는 특수한 값 ( undefined)
  • 변수 선언 이후 직접 값을 할당하지 않으면 자동으로 할당됨
• 심볼(Symbol) : 객체의 속성으로 사용될 수 있는 유일한 식별자를 만드는 데 사용되는 값

// 숫자(Number)
let number = 10

// 문자열(String)
let string = 'Hello, world!'

// 불리언(Boolean)
let boolean = true

// null
let nullValue = null

// undefined
let undefinedValue = undefined

// 심볼(Symbol)
let symbol = Symbol('unique')


// 템플릿 리터럴
const name = '만두'
const age = 28
console.log(`제 이름은 ${name}이고, 나이는 ${age}살입니다.`) // 제 이름은 만두이고, 나이는 28살입니다.


// undefined
let firstName // 선언만 하고 할당하지 않음
console.log(firstName) // undefined


// null 과 undefined의 대표적 차이는 typeof 연산자를 통해 알 수 있다.
typeof null // "object"
typeof undefined // "undefined"

 

참조 타입(Reference type)

• Object : 이름과 값을 가진 속성(property)들의 집합으로 이루어진 자료구조
  
  • 점(.) 또는 대괄호( [ ] )로 접근이 가능합니다. 
  • key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능합니다.
• Array : 여러 개의 값을  순서대로 저장하는 자료구조
  • 순서를 보장하는 특징이 있습니다.
  • 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능합니다.
• Function : function 키워드를 통해 생성하고, 호출 시 실행될 코드를 정의
  
  • 함수에 대한 추가설명은 코드 아래쪽

// 객체 생성과 초기화
let object = {
//  key  : value
    name: 'John',
    age: 20,
    'address arr': {
        city: 'Seoul',
        country: 'Korea'
    }
}

console.log(object.name) // Jhon
console.log(object['name']) // Jhon
console.log(object.address arr) // => 불가능 합니다.
console.log(object['adress arr']) // { city: 'Seoul', country: 'Korea' }
console.log(object['adress arr'].city) // Seoul


// 배열 생성
let array = [1, 2, 3, 4, 5]

console.log(array[0]) // 1
console.log(array[-1]) // undefined
console.log(array.length) // 5

Function(함수)

JavaScript에서 함수를 정의하는 방법은 주로 2가지로 구분됨

• 함수 선언식 (function declaration)

function add(num1+num2) {
  return num1 + num2
}

add(2, 7) // 9

• 함수 표현식 (function expression)
  • 표현식 내에서 함수를 정의하는 방식
  • 함수 이름을 명시하는 것도 가능. 다만 함수 이름은 호출에 사용되지 못하고 디버깅 용도

const sub = function (num1, num2) {
  return num1 - num2
}

sub(7, 2) // 5


//함수 이름을 명시
const mySub = function nameSub(num1, num2) {
  return num1 - num2
}

mySub(1, 2) // -1
nameSub(1, 2) // ReferenceError: nameSub is not defined

 

ToBoolean Conversions ( 자동 형변환 )

자동 형변환

 

연산자

• 할당 연산자

let c = 0

c += 10
console.log(c) // 10 => c에 10을 더한다. 

c -= 3
console.log(c) // 7 => c에 3을 뺀다. 

c *= 10
console.log(c) // 70 => c에 10을 곱한다. 

c++
console.log(c) // 71 => c에 1을 더한다.(증감식) 

c--
console.log(c) // 70 => c에 1을 뺀다.(증감식)

• 비교 연산자
  • 문자열은 유니코드 값을 사용하며 표준 사전 순서를 기반으로 비교
  • 알파벳 순서상 후순위가 더 크다. 소문자가 대문자보다 더 크다.

console.log(3>2) // true
console.log(3<2) // false

console.log('A'<'B') // true
console.log('Z'<'a') // true
console.log('가'<'나') // true

• 동등 연산자
  • 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
  • 예상치 못한 결과가 발생할 수 있으므로 특별한 경우 외에 사용하지 않음

const a = 1
const b = '1'

console.log(a == b) // ture
console.log(a == true) // true

//자동 형변환 예시
console.log(8*null) // 0 => null은 0
console.log('5'- 1) // 4
console.log('5'+ 1) // '51'
console.log('five'* 2) // NaN

• 일치 연산자(===)
  • 두 피 연산자의 값과 타입이 모두 같은 경우 true
  • 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
  • 엄격한 비교 => 두 비교 대상의 타입과 값 모두 같은 지 비교하는 방식

const a = 1
const b = '1'

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

• 논리 연산자
  • and 연산은 '&&' 연산자
  • or 연산은 '||' 연산자
  • not 연산은 '!' 연산자
  • 단축 평가 지원

console.log(true&&false) // false
console.log(true&&true) // true

console.log(false||true) // true
console.log(false||false) // false

!true // false


// 단축 평가
console.log(1 && 0) // 0
console.log(0 && 1) // 0
console.log(4 && 7) // 7

console.log(1 || 0) // 1
console.log(0 || 1) // 1
console.log(4 || 7) // 4

• 삼항 연산자
  • 3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자
  • 가장 앞의 조건식이 참이면 :(콜론) 앞의 값이 반환되며,
    그 반대의 경우 : 뒤의 값이 반환되는 연산자
  • 삼항 연산자의 결과 값이기 때문에 변수에 할당 가능

console.log(true ? 1 : 2) // 1
console.log(false ? 1 : 2) // 2

const result = Math.PI > 4 ? 'yep':'Nope'
console.log(result) // Nope

• 스프레드 연산자 (Spread Operator)

const numbers = [1, 2, 3]
const otherNumbers = [...numbers, 4, 5] // [1, 2, 3, 4, 5]
const copyNumbers = [...numbers] // [1, 2, 3]

const obj = { a:1, b:2 }
const otherObj = {c:3, ...obj } // { c:3, a:1, b:2 }
const copyObj = {...obj} // { a:1, b:2 }