[js_03] 변수형과 자료형 (3)

※ 디지털 스마트 부산 아카데미 내용입니다.

3. 자바스크립트의 자료형

1️⃣ 자료형(data type)이란

• 프로그램에서 처리하는 자료의 형태   (예) 3을 숫자로 처리할지, 문자로 처리할지
• 자료형, 자료 유형, 데이터 타입 등으로 부름
• 자바스크립트 자료형은 크게 ‘원시형’과 ‘객체’로 나눔
  • 원시형(primitive type) : 하나의 값만 가지고 있는 자료형. 
  • 객체(object): 원시형 외의 모든 자료

 

2️⃣ typeof()함수

 

자바스크립트 안에 미리 만들어져 있는 함수로, 괄호 안에 값이나 변수를 넣으면 어떤 자료형인디 알려준다.

typeof("안녕하세요") #string

let data = 5
typeof(data)      #number

 

 

 

 

 

 

 

 

 

ex )

console.log('I\'m studying now');
console.log('탭\t포함')

 

 

 

 

 

 

 

 

 

 

 

3️⃣ 탬플릿 리터럴

• 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식
• ES6 이전에는 +를 사용해서 식이나 변수와 연결했음, 변수나 식이 많아질수록 오타가 나올 확률이 높다. 
• 백팃(`  `)기호 사용  (백팃을 눌렀는데 ₩로 표시된다면 영문 상태로 바꾸고  백팃 입력) 
• 변수나 식이 들어간다면 ${ }로 묶고, 태그나 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있기 때문에 사용이 편리하다. 

name = "백두산"
classroom = 205
console.log(`${name}님, ${classroom}호 강의실로 입장하세요.`)

변수 부분만 ${ }로 묶어주고 원하는 결과 문자열을 그대로 사용하면 됨

 

 

 

 

 

 

 

 

 

 

 

4️⃣ 논리형

• 참true이나 거짓false 값을 표현하기 위한 데이터 유형. 불린boolean 유형이라고도 함. 
• 사용할 수 있는 값은 true와 false
• 논리형 값은 지정한 조건을 체크하는 조건식에서 많이 사용한다.

 

 

5️⃣ truthy와 falsy

• true와 false 라는 명확한 값 외에 참과 거짓을 판별하는 방법
• truthy: true로 인정할 수 있는 값, falsy: false로 인정할 수 있는 값 
• falsy 값을 제외한 모든 값은 truthy하다. 즉 true로 친다.

falsy 값

0  // 숫자 0
"" // 빈 문자열
NaN
undefined
null

• NaN은 숫자가 아님(Not a Number)을 나타낸다.
• 변수를 선언만 하고 값이 할당되지 않은 상태에서 그 변수를 더하거나 빼는 연산에 사용하면 NaN이 됨 

 

undefined

• 변수를 선언하기만 하고 값을 할당할지 않을 때 변수의 초깃값.
• undefined는 값이면서 동시에 자료형

let userName
userName         //undefined

 

 

null

• 유효하지 않은 값 
• null 역시 값이면서 동시에 자료형

let age = null

 

 

undefined과 null

let first, second;
second = null;
console.log(first)
console.log(second)

 

 

 

undefined

선언만하고 할당하지 않음

주로 사용자의 실수에 의해 발생

 

null

null값을 할당함

주로 사용자가 의도적으로 null을 할당

 

 

 

 

 

 

 

 

6️⃣ 배열

• 하나의 변수에 여러 값을 할당할 수 있는 형태
• 대괄호([ ])로 묶고, 그 안에 값을 나열함. 각 값은 쉼표(,)로 구분
• 대괄호 안에 아무 값도 없으면 ‘빈 배열’이라고 하고, 이것 역시 배열

배열명 = [값1, 값2,... ]

 

emptyArr = []                      // 빈 배열
colors = ["red", "blue", "green"]  // 문자열 배열
arr = [10, "banana", true]         // 여러 자료형으로 구성된 배열

 

 

 

 

7️⃣ 배열과 인덱스

season = ["봄", "여름", "가을", "겨울"]

 

• 두번째 값을 알고 싶다면     season[1]
• 배열에 있는 요소의 갯수를 알고 싶다면       season.length
• 배열의 마지막 값을 알고 싶다면        season[season.legth - 1]

 

 

 

 

 

• 인덱스 : 배열에 있는 여러 값을 저장하는 방 번호
• 인덱스는 0부터 시작!

 

 

 

 

 

8️⃣ 심볼

• 심볼의 가장 큰 특징은 유일성을 보장한다는 것
• 심볼은 객체 프로퍼티의 키로 사용할 수 있다

자바스크립트 프로그램에서 오픈 소스를 가져와 사용하거나 다른 팀원이 만든 객체들을 함께 사용할 경우 객체의 키 이름이 중복될 수도 

-> 키 이름을 심볼로 지정하면 서로 충돌이 발생하지 않는다. 

 

• 심볼을 만들 때는 Symbol() 함수 사용
• 심볼은 한 번 만들면 변경할 수도 없고,  같은 값을 가진 심볼을 만들 수도 없다.

 

Symbol()

let var1 = Symbol()
let var2 = Symbol()

 

var1과 var2는 똑같아 보이지만, 심볼은 유일한 값이기 때문에 두 변수는 같지 않다!

var1 === var2       // false

• 심볼을 키로 사용할 때에는 [키]처럼 대괄호로 묶어서 표현 
• 키에 접근할 때도 마침표가 아닌 대괄호 사용

예) member 객체를 만들면서 id 키를 고유하게 만들기

let id = Symbol()
const member = {
  name : "Kim",
  [id] : 12345
}

member        // {name: "Kim", Symbol(): 12345}
member[id]    // 12345