[JS] 03. 프로젝트 구성, 원시형 데이터

[JS] 03. Js 프로젝트 구성, 원시형 데이터

 

 

 

 

📚 Table of Contents

 

 

 

 

01. 프로젝트 구성

ECMA

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

 

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다.

> npm init -y

> npm i -D parcel (개발의존성 패키지)

 

package.json 에서 작성

"dev": "parcel ./index.html",

"build": "parcel build ./index.html"

 

index.html , main.js 파일 생성

html 에 main.js 연결 (module로 사용)

<script type="module" defer src="./main.js"></script>

 

터미널에서 작성한 html 파일 실행

> npm run dev 

Server running at http://localhost:1234

 

02. 원시형 데이터

1. String (문자열):
   • 텍스트 데이터를 나타냅니다.
   • 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 선언합니다.
2. Number (숫자):
   • 정수와 실수를 모두 표현합니다.
   • 특수값으로 Infinity, -Infinity, NaN이 있습니다.
3. Boolean (불리언):
   • true 또는 false 값을 가집니다.
   • 조건문에서 주로 사용됩니다.
4. Undefined:
   • 값이 할당되지 않은 상태를 나타냅니다.
   • 변수를 선언만 하고 초기화하지 않으면 undefined가 됩니다.
5. Null:
   • 의도적으로 '비어있음'을 나타낼 때 사용합니다.
   • 객체가 없음을 표현할 때 주로 사용됩니다.
6. Symbol (ES6에서 추가):
   • 고유하고 변경 불가능한 원시 값입니다.
   • 객체 속성의 키로 사용될 수 있습니다.
7. BigInt (ES11에서 추가):
   • Number가 안전하게 표현할 수 있는 범위를 넘어서는 정수를 다룰 때 사용합니다.

이 원시형 데이터들은 불변성을 가지며, 값 자체가 메모리에 저장됩니다.

 

String (문자열)

String은 자바스크립트에서 텍스트 데이터를 나타내는 원시 데이터 타입입니다. 다음과 같은 특징이 있습니다:

1. 선언 방법: 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)을 사용하여 선언할 수 있습니다.
2. 불변성: 한 번 생성된 문자열은 변경할 수 없습니다. 문자열을 수정하면 새로운 문자열이 생성됩니다.
3. 연결: '+' 연산자를 사용하여 문자열을 연결할 수 있습니다.
4. 템플릿 리터럴: 백틱을 사용하면 문자열 내에 표현식을 삽입할 수 있습니다. (예: Hello, ${name})
5. 이스케이프 문자: 특수 문자를 표현하기 위해 ''를 사용합니다. (예: '\n'은 줄바꿈)
6. 메서드: length, indexOf(), slice(), toUpperCase() 등 다양한 내장 메서드를 제공합니다.

문자열은 자바스크립트에서 매우 중요하며, 텍스트 처리에 광범위하게 사용됩니다.

const string1 = "Hello1"
const string2 = 'Hello2'
const string3 = `Hello3 ${string1} ?!`

console.log(string3)

 

Number

Number는 자바스크립트에서 숫자를 나타내는 원시 데이터 타입입니다. 다음과 같은 특징이 있습니다:

1. 정수와 실수: 정수와 부동 소수점 숫자를 모두 표현할 수 있습니다.
2. 특수한 값: Infinity, -Infinity, NaN(Not a Number)과 같은 특수한 값도 포함합니다.
3. 범위: -(2^53 - 1)부터 (2^53 - 1) 사이의 숫자를 안전하게 표현할 수 있습니다.
4. 진법: 10진수, 2진수(0b), 8진수(0o), 16진수(0x) 표기법을 지원합니다.
5. 메서드: toFixed(), toPrecision(), toString() 등 다양한 내장 메서드를 제공합니다.
6. 산술 연산: 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%) 등의 연산이 가능합니다.
7. Math 객체: Math.random(), Math.floor() 등 수학 관련 함수를 제공합니다.

Number 타입은 자바스크립트에서 수치 계산과 데이터 처리에 광범위하게 사용됩니다.

const number = -123
const pi = .14

console.log(number + 1)
console.log(pi)

console.log(typeof number)
console.log(typeof pi)

 

부동 소수점 오류

const a = 0.1
const b = 0.2

console.log(a + b)

 

해결

.toFixed() 는 숫자 데이터를 문자 데이터로 바꿈

console.log((a + b).toFixed(1)) //String

console.log(typeof Number((a + b).toFixed(1)))
// Number

 

Boolean

불리언(Boolean)은 자바스크립트에서 논리적인 값을 나타내는 원시 데이터 타입입니다. 불리언은 두 가지 값만 가질 수 있습니다:

1. true: 참을 나타냅니다.
2. false: 거짓을 나타냅니다.

불리언은 주로 조건문, 반복문, 논리 연산 등에서 사용됩니다.

주요 특징:

1. 타입 변환: 다른 데이터 타입은 불리언으로 자동 변환될 수 있습니다. 예를 들어, 0, null, undefined, NaN, 빈 문자열('')은 false로 변환되고, 그 외의 값들은 true로 변환됩니다.
2. 논리 연산자: &&(AND), ||(OR), !(NOT) 등의 논리 연산자와 함께 사용됩니다.
3. 비교 연산: ==, ===, !=, !==, <, >, <=, >= 등의 비교 연산자의 결과로 불리언 값이 반환됩니다.
4. 조건문에서의 사용: if, else, switch 등의 조건문에서 조건을 평가하는 데 사용됩니다.

const a = true
const b = false

// 분기처리 시에 자주 사용
if (a) {
  console.log('Hello')
}

Null

Null은 JavaScript에서 '의도적으로 값이 없음'을 나타내는 특별한 원시 데이터 타입입니다. 주요 특징은 다음과 같습니다:

1. 의미: 변수에 값이 할당되지 않았음을 명시적으로 나타냅니다.
2. 타입: typeof 연산자로 확인하면 'object'를 반환합니다. 이는 JavaScript의 오래된 버그입니다.
3. 비교: null은 오직 null 및 undefined와 동등합니다 (==). 그러나 엄격한 비교(===)에서는 오직 null과만 같습니다.
4. 사용 사례: 객체가 없음을 나타내거나, 함수의 반환값으로 '유효한 값이 없음'을 표현할 때 사용합니다.
   
   
   

Undefined

Undefined는 JavaScript에서 '값이 할당되지 않은 상태'를 나타내는 원시 데이터 타입입니다. 주요 특징은 다음과 같습니다:

1. 의미: 변수가 선언되었지만 아직 값이 할당되지 않았음을 나타냅니다.
2. 타입: typeof 연산자로 확인하면 'undefined'를 반환합니다.
3. 비교: undefined는 오직 null 및 undefined와 동등합니다 (==). 엄격한 비교(===)에서는 오직 undefined와만 같습니다.
4. 자동 할당: 변수를 선언만 하고 초기화하지 않으면 자동으로 undefined가 할당됩니다.
5. 사용 사례: 변수의 초기 상태를 나타내거나, 함수가 명시적으로 값을 반환하지 않을 때 사용됩니다.

const user = {
  name: 'Neu',
  age: 85,
  email: null
}

console.log(user)
console.log(user.name)
console.log(user.age)
console.log(user.email)
console.log(user.abc)