자료형
- 데이터(변수) 의 종류
Primitive (원시 타입) : string, number, boolean, undefined, null,,,
Objec (객체 타입) : Primitive 타입이 아닌 나머지
1. String (문자열)
-
텍스트 정보, 따옴표로 감싸야 함
-
숫자, 특수문자도 따옴표 안에 포함 되어있다면? -> 문자열
ex ) '1', '$' -
문자 + 변수를 동시에 쓰고 싶을 때
console.log(text + '저는 Damon 입니다. 저의 성별은 ' + gender + ' 입니다!'); // 문자열 연결- 템플릿 리터럴 (= 문자를 표현하는 새로운 문법)
(ES6) 백틱(`)과 달러($), 중괄호({}) 조합으로 사용
문자열 내에서 변수와 상수를 간결히 표현
console.log(`${text} 저는 Damon 입니다. 저의 성별은 ${gender} 입니다.!`);2. number (숫자형)
- 정수 , 실수
정수 : 소수점 없이 표현되는 숫자
실수 : 정수와 소수를 포함하며, 숫자체계에서 더 넓은 개념 - 연산이 가능하다 (+ - * / %)
let num = 100;
let num2 = 0.12;
console.log(num, num2);
console.log(num + 1);
console.log(num - 1);
console.log(num * 2);
console.log(num / 2);- Q) 정수로 나오는 이유?
A) JS에서는 정수와 실수를 구분하지 않고 모두 "Number" 타입으로 처리한다.
즉, JS에서는 모든 숫자를 같은 타입으로 취급한다.
실수의 형태를 유지하고 싶다면. 'toFixed()' 라는 메서드를 사용해야 한다.
3. boolean
- true, false (참, 거짓) 두 가지 값만 가지는 데이터
4. null (빈 값)
- "값이 없음"을 의도적으로 개발자가 명시한 것
5. undefined
- 값도 없고, 타입도 지정되지 않은 상태
- 변수 선언만 했을 때 초기 값으로 undefined 할당.
ex) let x; // undefined
Quiz
- Q1. 다음 코드 실행 시 q3 변수는 어떤 값이 될까? (상수) - 바뀌면 안됨.
const q3 = 1;
// q3 = q3 + 1; // Error
console.log(q3);- Q2. 다음 실행 값은 무엇일까?
let ex = 2;
let am = '2';
let s = 2;
console.log(ex + am - s);
// 2?
// 20 (22 -2)
// JS -> 느슨한 언어의 단점6. 배열
- 배열의 이름 : fruits
- 배열의 요소(아이템) : 배열 안에 있는 데이터 하나하나
- 배열의 위치(인덱스) : 0부터 시작 - zero based numbering
- 배열의 길이(크기 length) : 요소의 개수와 동일
- JS에서는 배열 원소의 자료형이 달라도 됨!
- Array 안에 Array 들어갈 수 있음 (중첩가능) => 2차원 배열
const fuits =['orange', 'pinapple', 'grape', 'apple' ]
const mixedArray = [1, 'Damon', true, 'Layla', null, undefined ];
const korean = [
['가', '나', '다'],
['라', '마', '바'],
['사', '아', '자' ]
];7. 객체 (key:value)
- 프로그래밍에서 실제 존재하는 개체나 개념을 표현하는 데이터 구조
- 속성과 메서드로 구성
속성 : 키(key)와 값(value)의 쌍으로 이루어져 있다 - 상태나 특징
메서드 : 함수(function)를 값으로 가진다 - 동작이나 행위
const cat = {
name : '장화',
age : 10,
isCute : true,
mew : function (){
return '먕';
},
};
// #1. 점 표기법(.)
console.log(cat.name);
// #2. 대괄호 표기법 ([])
console.log(cat['name']);
// #3. key가 변수에 저장되어 있을 때 사용법
const TempVal = 'name';
console.log(cat[TempVal]); //cat['name'] => cat.name과 동일8. typeof
: 자료형을 확인할 수 있는 키워드
- typeof x (x는 어떤 무언가)
console.log(typeof null); // null -> object
// js의 초기 구현중 하나로서, nuull 값을 object로 분류하는것은 공식적으로 인정한 언어의 설계상 오류
console.log(typeof undefined); // undefined
console.log(typeof fruits); //Array -> object
console.log(typeof cat); // object -> object9. 형변환
- 성적 평균 구하는 프로그램 만들기
- prompt() : JS에서 사용자로부터 입력을 받을 때 사용하는 브라우저 내장 함수
JS가 자동형변환 해준 모습.
let mathScore = prompt('수학 점수 입력');1. String()
: 문자로 형변환
- toString() : 메서드는 객체 또는 기본 자료형 값을 문자열로 변환
let str1 = true; // boolean
let str2 = 123; // number
let str3 = undefined; // undefined
console.log(String(str1), typeof String(str1));
console.log(String(str2), typeof String(str2));
console.log(String(str3), typeof String(str3));
console.log(str1.toString(), typeof str1.toString());
console.log(str2.toString(), typeof str2.toString());
2. Number()
: 숫자로 형변환
let n1 = true; // boolean
let n2 = false; // boolean
let n3 = 123.9; // number
console.log(Number(n1), typeof Number(n1)); // 1
console.log(Number(n2), typeof Number(n2)); // 0
console.log(Number(n3), typeof Number(n3)); // 123.9 - 실수
console.log(parseInt(n3, 10)); // n3 값을 10진수의 정수(int)로 바꾸겠다. // 123
console.log(parseFloat(n3)); // n3 값을 실수(float)로 바꾸겠다. // 123.9
// +) null, undefined를 숫자로 바꾼다면?
console.log(Number(undefined), typeof Number(undefined)); // NaN, number
// NaN = Not-A-Number (= 숫자가 아님)
// 정의 되지 않은 값이 숫자로 변환 될 수 없기 때문!
console.log(Number(null), typeof Number(null)); // 0, number