[JavaScript] 데이터 타입

suyeon·2022년 6월 7일
JavaScript
0

Frontend

목록 보기
12/19
post-thumbnail

💫 JavaScript 데이터 타입

🌈 기본 타입

  • Primitive Type (원시 타입)
  • 숫자, 문자열, 불린값, null, undefined
  • 한번에 하나의 값만 가질 수 있다.
  • 하나의 고정된 저장 공간을 이용한다.
  • 자바스크립트는 느슨한 타입 체크 언어다. > 개선 > TypeScript(Microsoft)
  • 변수 선언 |
    • var 변수명;
    • 변수의 타입이 없다.
    • 변수는 모든 자료형의 데이터를 저장할 수 있다. (= 자바의 object 변수와 유사함)
  • 자바스크립트는 변수에 어떤 형태의 데이터를 저장하느냐에 따라 해당 변수의 타입이 결정된다.

💭 typeof : 자료형 검사

<script>
// 숫자 타입
var intNum = 10;
var floatNum = 0.1;

// 문자열 타입
var singleQuoteStr = 'single quote string';
var doubleQuoteStr = "double quote string";
var singleChar = 'a';

// 불린 타입
var boolVar = true;

// undefined 타입
var emptyVar;

// null 타입
var nullVar = null;


console.log(
  typeof intNum,          // number
  typeof floatNum,        // number
  typeof singleQuoteStr,  // string 
  typeof doubleQuoteStr,  // string 
  typeof singleChar,      // string 
  typeof boolVar,         // boolean 
  typeof emptyVar,        // undefined 
  typeof nullVar          // object
);
</script>

1. 숫자

  • 모든 숫자를 64bit 부동 소수점 형태로 저장
  • C언어의 double 타입과 유사하다.
  • 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때는 주의해야 한다.
<script>
var num = 5 / 2;

console.log(num); 			  // 2.5
console.log(Math.floor(num)); // 2
</script>

2. 문자열

  • 문자열은 작은 따옴표(')나 큰 따옴표(")로 생성한다.
  • 한 번 생성된 문자열은 읽기만 가능하고 수정은 불가능하다.
<script>
// str 문자열 생성
var str = 'test';

console.log(str[0], str[1], str[2], str[3]); // t e s t

// 문자열의 첫 글자를 대문자로 변경?
str[0] = 'T';
console.log(str); // test
</script>

📎 문자열 연산자

  • 문자열 연결 : 문자열 + 문자열
console.log('가나다' + '라마' + '바사아'); // 가나다라마바사아
  • 문자 선택 : 문자열[숫자]
console.log('안녕하세요'[0]); // 안
console.log('안녕하세요'[3]); // 세
  • 문자열 길이 : length
console.log('안녕하세요'.length); // 5
console.log(''.length); // 0
  • 문자열 검색 : indexOf( ), lastIndex( )
var txt = 'Hello~ Hong~';

console.log(txt.indexOf('~')); 		// 5
console.log(txt.indexOf('~', 6)); 	// 11
console.log(txt.lastIndexOf('~')); 	// 11
  • 대소문자 변환 : toUpperCase( ), toLowerCase( )
var txt = 'Hello~ Hong~';

console.log(txt.toUpperCase()); // HELLO~ HONG~
console.log(txt.toLowerCase()); // hello~ hong~
  • 문자열 추출 : substring( ), substr( ), charAt( )
var txt = 'Hello~ Hong~';

console.log(txt.substring(2, 8)); // llo~ H
console.log(txt.substring(2)); // llo~ Hong~

// 글자수
console.log(txt.substr(2, 4)); // llo~ 
console.log(txt.substr(2)); // llo~ Hong~

// 문자
console.log(txt.charAt(2)); // l 

// 문자 코드값
console.log(txt.charCodeAt(2)); // 108
  • 치환 : replace
    • 처음 만나는 요소만 치환한다.
    • 모든 대상을 치환하려면 정규 표현식을 사용해야 한다.
txt = 'Hello~ Hong~ Bye~ Hong~';

console.log(txt.replace('Hong', 'Lee')); 	// Hello~ Lee~ Bye~ Hong~
console.log(txt.replace(/Hong/gi, 'Lee')); 	// Hello~ Lee~ Bye~ Lee~
  • 문자열 공백 제거 : trim( )
txt = '     하나      둘    셋    ';

console.log('@' + txt.trim() + '@'); 		// @하나      둘    셋@
console.log('@' + txt.trimStart() + '@'); 	// @하나      둘    셋    @
console.log('@' + txt.trimEnd()+ '@');  	// @     하나      둘    셋@
  • 문자열 분할 : split( )
txt = '홍길동,아무개,호호호,테스트,하하하';

console.log(txt.split(','));

[출력결과]

(5) ['홍길동', '아무개', '호호호', '테스트', '하하하']
0: "홍길동"
1: "아무개"
2: "호호호"
3: "테스트"
4: "하하하"
length: 5
  • 문자열 검색 : startsWith( ), endsWith( )
txt = '홍길동';
console.log(txt.startsWith('홍')); // true
console.log(txt.endsWith('동')); // true

💭 이스케이프 문자 : 특수한 기능을 수행

- \n : 줄바꿈
- \t : 탭
- \\ : 역슬래시(\)
- \" : 이중따옴표
- \' : 단일따옴표

3. 불린값(boolean)

  • true, false

4. null과 undefined

  • 값이 비어있음을 나타낸다.
  • undefined : 기본적으로 값이 할당되지 않은 변수
  • null : 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용
  • undefined는 타입이자, 값을 나타낸다.
  • null typeof 결과는 object이다.
  • null 타입 변수인지를 확인할 때는 typeof 연산자 X, 일치 연산자(===)를 사용한다.
<script>
// null 타입 변수 생성
var nullVar = null;

console.log(typeof nullVar === null);  // false
console.log(nullVar === null); 		   // true
</script>
💭 비교 연산자
== : 자료형 비교(x), 값만 비교(o)
=== : 자료형 비교(o) + 값 비교(o)

🌈 참조 타입(객체 타입)

  • Non-Primitive Type (비 원시 타입)
  • 자바스크립트에서 숫자, 문자열, 불린값, null, undefined 같은 기본 타입을 제외한 모든 값은 객체다.
  • 객체는 '이름(key):값(value)' 형태의 프로퍼티들을 저장한다.
  • 해시(hash) 자료구조와 유사하다.
  • 한번에 여러 개의 값을 가질 수 있다.
  • 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있고, 함수로 포함할 수 있다 이러한 프로퍼티를 메서드라고 한다.
  • 여러 개의 고정되지 않은 동적 공간을 사용한다.

1. 객체 생성하는 방법

  • javaScript는 클래스 개념이 없다.

1. Object() 생성자 함수 이용

  • 내장 함수
// Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo); // object
console.log(foo);	     // { name: 'foo', age: 30, gender: 'male'}

foo['name'] = 'su yeon';
foo.home-tel = '010-1234-5677'; // 식별자 기호 X
foo['home-tel'] = '010-1234-5677'; // 식별자 기호 O > 웬만하면 식별자 기호 쓰지말기

2. 객체 리터럴 { }

  • 리터럴 : 표기법
  • 객체 리터럴 : 객체를 생성하는 표기법
  • 중괄호{} 이용해서 객체를 생성한다.
  • { } 안에 아무것도 적지 않은 경우는 빈 객체가 생성된다.
// 객체 리터럴 방식으로 foo 객체 생성
var foo = {
	name: 'foo',
  	age: 30,
  	gender: 'male'
};

console.log(typeof foo); // object
console.log(foo);		 // { name: 'foo', age: 30, gender: 'male'}

const jung = {
  name: '정형돈',
  age: 30,
  address: {
    sido: '서울시',
    gugun: '강동구',
    dong: '천호동'
  }
};

console.log(jung.name);
console.log(jung.age);
console.log(jung.address); // { sido: '서울시', gugun: '강동구', dong: '천호동'}
console.log(jung.address.sido);

3. 생성자 함수 > 4장으로.. ex42)

🌈 형변환(Type Casting)

  • 형변환 함수
  1. 정수 : parseInt(value)
  2. 실수 : parseFloat(value)
  • 문자열 -> 정수 : 시작부터 연속된 숫자만을 취급하고, 나머지는 버리고 형변환된다.
var n1= 3.99;
console.log(parseInt(n1)); // 실수 -> 정수

var n2 = '300';
console.log(parseInt(n2)); // 문자열 -> 정수

var n3 = '100점';
console.log(parseInt(n3)); // 100점

var n4 = '스코어90';
console.log(parsInt(n4)); // NaN -> Not a Number

var n5 = '100점이 아니라 50점입니다.'
cosole.log(parsenInt(n5)); // 100점
  • CSS 조작 유용하다.
var width = "150px";
// 잘못된 조작 X
console.log(width * 2); // NaN (Not a Number)

var width = `200px`;
console.log(parseInt(width) + 100);

var size = '1.5em';
console.log(parseInt(size));
console.log(parseFloat(size));
  • boolean isNaN(value) : is not a number?
    • 숫자가 아니면? true
    • 숫자면? false
// 자주 사용하는 곳 > 유효성 검사(숫자만 입력했니?)

var age = '20세';

console.log(isNaN(age)); // false

if (isNaN(age)) {
     console.log('나이가 올바르지 않습니다.');
}else {
     console.log('올바른 나이입니다.');
}
profile
suyeon
이전 포스트

[JavaScript] 기초

다음 포스트

[JavaScript] 연산자

0개의 댓글