본문 바로가기

Study/JavaScript

자바스크립트 기초 - 자료형

728x90

[20240930] 자바스크립트 기초 강좌  #2 - 자료형

실습 진행 IDE : https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

I. 문자열(String)

const name = "Mike" // 문자형 String

// 문자열 선언 방식 3가지
const name1 = "Mike" // 큰 따옴표
const name2 = 'Mike' // 작은 따옴표
const name3 = `Mike` // 백틱

// 큰 따옴표로 문자열 출력
const message = "I'm a boy."

// 작은 따옴표로 문자열 출력하고 싶을때 사용법
const message2 = 'I\'m a boy.'

// 백틱(`)은 문자열 내부의 변수를 표현해줄때 사용하면 편리하다.
const message3 = `My name is ${name}`;

const message4 = `나는 ${30+1}살 입니다.`;

console.log(message4)

 

 

호출결과

 

I. 숫자형(Number)

const age = 30; // 숫자형 number
const PI = 3.14;

console.log(age)
console.log(PI)

console.log(1 + 2) // 더하기
console.log(10 - 3) // 빼기
console.log(3 * 2) // * 곱하기
console.log(6 / 3) // / 나누기
console.log(6 % 4) // % 나머지

 

호출결과

 

Q. 특정문자열이나, 숫자를 0으로 나누면 어떻게 될까?

- 숫자를 0으로 나눈다면.

const x = 1/0;
console.log(x) // Infinity(무한대) 결과값 출력

 

호출결과

 

- 문자를 숫자로 나눈다면.

const name = "Mike"
const y = name/2;

console.log(y) // NaN = Not a number

호출결과

 

I. 논리형(Boolean)

const a = "true"; // 참
const b = "false"; // 거짓

const name = "Mike";
const age = 30;
console.log(name == 'Mike')
console.log(age > 40)

호출결과

 

 

I. Null과 undefined

// null : 존재하지 않는 값
// undefined : 값이 할당되지 않음.

let age;
console.log(age);

let user = null
console.log(user);

호출결과

 

 

I. typeof 연산자

// typeof 연산자 : 변수의 자료형을 알아낼 수 있음.

const name = "Mike";

console.log(typeof 3)
console.log(typeof name)
console.log(typeof true)
console.log(typeof "XXX")
console.log(typeof null)
console.log(typeof undefined)

호출결과

 

E. 위 실습중 typeof null; // "object" 객체형을 반환했는데

null은 객체가 아니다.

초기 자바 스크립트의 오류이나 하위 호환성을 위해 수정하지 않고 있는 부분..

 

I. 자료형 정리하며 Tip 실습 정리

- 백틱(`) 사용예제

// 백틱(`)으로 작성된 예제
const name = "Mike";
const message = `My name is ${name}`;

const message2 = "My name is ${name}"; // 큰따옴표에 넣으면 바인딩 출력이 아닌 그냥 ${name} 형태로 출력함.


console.log(message)
console.log(message2)

 

호출결과

 

- 문자열 + 숫자 더하기 사용예제

const name = "Mike";

const a = "나는 ";
const b = " 입니다.";
const c = "살"

console.log(a + name + b); 

age = 29;
const str = a + age + c + b;

console.log(str);
console.log(typeof str)
// 숫자형과 문자형을 섞어서 더할 수도 있으나 문자열로 변환됨.

 

호출결과

 

반응형

'Study > JavaScript' 카테고리의 다른 글

자바스크립트 기초 - 변수  (0) 2024.09.27