[JavaScript] 값(Value)에 대해 알아보자

값(value)

조작 가능한 표현
ex> 문자열, 문자, 숫자 등

 

✅ 값(value)의 종류

원시 값

 

    - Number

    - String

    - Boolean

    - Null

    - Undefined

 

참조 값

---

원시 값이란❓

- 단순 원시적인 값 또는 데이터
- 재할당하지 않은 처음의 값

** 변수는 어떠한 공간을 갖는 것으로 임의의 메모리 주소를 할당받음

let myAge = 10;
let myAge2 = myAge;

myAge = 20;

console.log("myAge :"+myAge);
//20
console.log("myAge2 :"+myAge2);
//10

 

Number

 

1. 숫자의 종류

 

- 정수

ex>10, 100,-10,-100,,,

 

☑️ Number.isInteger(num)

: num이 정수인지 판별하는 함수

- 반환 값 : 참(true), 거짓(false)->NaN, infinity

- 반환 타입 : boolean

 

☑️ Number.parseInt(num)

: num을 정수로 변환하는 함수 (소수점 뒷자리 버림)

- 반환 값 : 변환된 값

- 반환 타입 : number

 

- 부동소수점 실수 (float)

 ex> 9.99, 1.1,,

 

☑️ Number.parseFloat(val)

: 실수로 변환하는 함수

- 반환 값 : 변환된 값

- 반환 타입 : number

let str = "123aaa";

console.log(Number.parseFloat(str));
//123

let str = "aaa 123";

console.log(Number.parseFloat(str));
//NaN

let str = "1 2 3";

console.log(Number.parseFloat(str));
//1

❗️ 뒤에 띄어쓰기 부분은 날려버리기 때문에 문자열로 시작되면 NaN 출력한다.

 

- 부동소수점 실수 (double)

ex> IEEE754 표준 부동소수점보다 더 정밀한 데이터

let x = 0.5
let y = 0.01;
let add = x+y;

console.log(add);
//0.51
console.log(typof add);
//number

❗️자바스크립트는 위의 숫자 종류들을 모두 number타입으로 간주한다.

let x = 0.1;
let y = 0.2;
let add = x+y;

console.log(add);
//0.30000000000000004

❓ 왜 0.3이 아닌가??

>> 컴퓨터가 이해할 수 있도록 2진법 변환하여 연산을 수행하는데 이 과정에서 유한소수로 저장하면서 위와 같은 미세한 오차가 발생하는 경우가 많다. 따라서, ☑️toFixed(소수점n번째) 메서드나 ☑️Math.round() 함수를 이용해서 해결하는 방법도 존재한다.

 

2. 상수와 리터럴

const age = 20;
// age:상수, 20:리터럴

2-1. 상수(constant)

>> 변하지 않는 변수

 

2-2. 리터럴(literal)

>> 변하지 않는 데이터

 

2-3. 숫자 리터럴의 종류

 

- 정수 리터럴

• 10진수(0-9) or 16진수(0x숫자)

- 부동 소수점

• 실수 & 지수

- 무한 (Infinity)

• 무한대를 나타내는 숫자값
• 숫자 타입
• 컴퓨터가 처리 가능한 가장 큰 수
• 양의 무한대
• 64비트 공간을 넘는 경우

📌 무한(infinity) 처리 방법

☑️ isFinite(val) 함수 이용하여 유한/무한 숫자 판별
- 유한일 경우 : true
- 무한일 경우 : false

 

- NaN (Not a Number)

• 숫자 타입이지만 숫자가 아님을 나타내는 값
• Number.NaN

let x = NaN

console.log(x)
//NaN
console.log(typeof x)
//number

☑️ Number.isNaN(num)

: NaN인지 판별하는 함수

- 반환 값 : 참(true), 거짓(false)

- 반환 타입 : boolean

 

- 특수값

 

 

3. 숫자 변환

1️⃣ Number(문자열 or 불리언)
2️⃣ + (문자열 or 불리언)
3️⃣ (문자열 or 불리언) * 1
4️⃣ parseInt(정수 문자열)
5️⃣ parseFloat(실수 문자열)

 

String

텍스트 형식의 데이터
부호가 없는 정수 값의 요소 집합
문자열 리터럴이나 객체를 통해 문자열 생성 가능

//큰 따옴표
let str = "Hello World!";
//작은 따옴표
let str = 'Hello World!';
//백틱
let str = `Hello World!`;

1. 특수문자 표시

// \n : 다음줄로 이동
// \t : tab만큼 이동
// \\ : 문자 표시
// \" : 큰따옴표 표현
// \' : 작은따옴표 표현

2. 문자열 접근

 

1️⃣ charAt(num)

: num번째 문자열에 접근하는 함수

let text = "Hello World!";

console.log(text.charAt(4));
//o

2️⃣ charCodeAt()

3️⃣ startsWith(searchStr, position)

: 특정 문자로 시작하는지 확인하는 함수

- searchStr : 탐색할 문자열

- position(옵션) : 탐색 시작할 위치 

 - 반환 값 : 참(true), 거짓(false)

let text = "Hello World!";

console.log(text.startsWith("He");
//true
console.log(text.startsWith("el", 1);
//true

4️⃣ endsWith()

5️⃣ indexOf(searchStr)

: 문자열에서 검색하는 문자열과 같은 첫번째 인덱스를 반환하는 함수

- searchStr : 탐색할 문자열

- 반환 값 : 인덱스, 일치하는 값이 없으면 -1

let text = "Hello World!";

console.log(text.indexOf("H"));
//0
console.log(text.indexOf("l"));
//2
console.log(text.indexOf("orl"));
//7
console.log(text.indexOf("f"));
//-1

6️⃣ lastIndexOf()

7️⃣ 문자열[index]

let text = "Hello World!";
for(let i=0; i<text.length; i++){
	console.log(text[i]);
}
//H
//e
//l
//l
//o
//
//W
//o
//r
//l
//d
//!

 

3. 문자열 변환

 

1️⃣ 더하기 연산

let str = 123 + ""

console.log(typeof str);
//string

2️⃣ replace(searchStr, replaceStr)

: 첫 번째 문자를 변환하는 함수

- searchStr : 바꿀 기존 문자열의 문자

- replaceStr : 바꿀 문자

let str = "010-1234-5678";

console.log(str.replace("5678", "****"));
//010-1234-****

3️⃣ replaceAll()

: 전체 문자를 변환하는 함수

let text = "Hello World!";

console.log(text.replaceAll("l", "L"));
//HeLLo WorLd!

4️⃣ toLocaleLowerCase([locale])

: locale에 따라 소문자로 변환하는 함수

: 문자열 자체에 영향을 주지 않음

 

5️⃣ toLocaleUpperCase()

: locale에 따라 대문자로 변환하는 함수

: 문자열 자체에 영향을 주지 않음

 

6️⃣ toLowerCase()

: 대문자 -> 소문자

let text = "HeLlo";

console.log(text.toLowerCase());
//hello

7️⃣ toUpperCase()

: 소문자 -> 대문자

let text = "HeLlo";

console.log(text.toUpperCase());
//HELLO

 

4. 문자열 병합

 

1️⃣ 더하기 연산

let str1 = "Hello";
let str2 = " World!";
let str3 = 1234;

console.log(str1 + str2);
//Hello World!
console.log(str1 + str3);
//Hello1234
console.log(typeof str1 + str3);
//string

2️⃣ concat()

: 값 또는 배열을 합쳐 반환하는 함수

//1. 값
let str1 = "Hello";
let str2 = " World!";

console.log(str1.concat(str2));
//Hello World!

//2. 배열
let arr1 = ["j","a","v","a","s"];
let arr2 = ["c","r","i","p","t"];

console.log(arr1.concat(arr2));
//['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']
console.log(typeof arr1.concat(arr2));
//object

3️⃣ join()

: 배열을 하나의 문자열로 합쳐서 반환하는 함수

- default : ,

let arr = ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't'];

console.log(arr.join());
//j,a,v,a,s,c,r,i,p,t
console.log(arr.join(""));
//javascript

 

5. 배열

- 대괄호([ ])를 사용하여 표현

- 각 요소 자료형 고정❌

- 배열의 길이 존재 length()

 

1️⃣ split(구분자)

: 문자열을 분리하여 배열로 반환하는 함수

let text = "Hello World!";

console.log(text.split(" "));
//['Hello', 'World!']

2️⃣ Array.from()

: 문자들을 분리해서 배열로 반환하는 함수

let str = "Hello World!";

console.log(Array.from(str));
//['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!']

3️⃣ 스프레드 연산자 [...문자열 변수]

: 문자열을 분리해서 배열로 반환하는 연산자

: 대괄호([ ])와 점(.)을 이용하여 배열로 반환

let str = "hello";
let arr = [...str];

console.log(arr);
//['h', 'e', 'l', 'l', 'o']

 

6. 템플릿 리터럴 (템플릿 문자열)

- 문자열 안에 사용

- 백틱(`) 사용

- 표현식 사용 ${expression}

let name = "홍길동";
let age = 36;
let str = `${name}의 나이는 ${age}세 입니다.`;

console.log(str);
//홍길동의 나이는 36세 입니다.

 

 

Boolean

참(true), 거짓(false) 값을 가지는 데이터 타입

//불리언 타입
let areYouPretty = true;

//객체 타입
let areYouPretty = new Boolean(true);

//문자열 타입
ley areYouPretty = "true";

1. 참과 거짓의 의미

• true : 1
• false : 0,-0
  • null, undefined, ""
  • NaN
  • false

2. 논리연산자

>> 참(true)과 거짓(false)을 이용하여 연산

>> 우선순위 : && > ||

 

연산자	설명	예
a && b	논리 AND (=논리곱 ab)	a, b 둘 다 true이면 true a, b 둘 중 하나가 true이면 false
a || b	논리 OR (=논리합 a+b)	a, b 둘 다 true이면 true a, b 둘 중 하나만 true여도 true
!a	논리 NOT (= 부정)	a가 true이면 false a가 false이면 true

 

Undefined

- 값의 유무를 표현
- 빈 값, 없는 값
- 유일한 값, 원시 값
- 변수를 선언하고 값을 할당받지 않은 상태
- let, var로 선언한 변수는 undefined로 초기화된다.

let foo;

console.log(foo);
//undefined
console.log(typeof foo);
//undefined

Null

- 값의 유무를 표현
- 빈 값, 없는 값
- 유일한 값, 원시 값
- 값이 없다는 것을 명시하는 방법

let foo = null;

console.log(foo);
//null
console.log(typeof foo);
//object

📌 [undefined] vs [null]의 차이점??

 

	undefined	null
변수 초기화 대상	자바스크립트 자체	개발자
자료형(typeof)	정해지지 않음	정해짐

>> undefined와 null은 '값이 없다' 라는 의미로는 같지만 엄밀히 말하면 다른 개념이니 유념해두자!

 

 

래퍼 객체 (Wrapper Object)

- 원시 타입을 객체화
- 임시 객체 생성

 

래퍼 객체의 종류

- Number

- String

- Boolean

 

래퍼 객체 변환 방법

1️⃣ 원시 타입에 해당하는 객체 생성

let name = "홍길동";

2️⃣ 생성된 객체의 함수를 호출

console.log(name.length);

3️⃣ 함수 처리

//3

4️⃣ 생성된 객체 소멸

5️⃣ 원시 타입만 존재

 

 

타입 변환

다른 타입 값 대입을 가능하게 해줌

 

타입 변환 종류

- 묵시적 : 자동으로 타입 변환

- 명시적 : 자동 변환 말고 다른 타입으로 변환이 필요할 때 사용

let age;

//묵시적 
age = 20;    //숫자타입
age= "20";   //문자타입

//명시적
console.log(Number(age)); //숫자타입
console.log(String(age)); //문자타입

 

명시적 타입 변환 종류

Number()  문자 ▶️ 숫자
String()     숫자,불리언 ▶️ 문자
Boolean() 문자, 숫자▶️ 불리언
Object()    모든 자료형 ▶️ 객체
parseInt()  문자, 소수점 존재 ▶️ 정수
parseFloat()  문자, 소수점 존재 ▶️ 소수

 

 

 

 

 

 

 

참조 값이란 ❓

- 참조하여 값을 조작
- 메모리에 객체로 저장됨

let students1 = {age: 18};
let students2 = students1;

students1.age = 19;
students1.name = "홍길동";

console.log(students2.age);
//19
console.log(students2.name);
//홍길동
console.log(students1.age);
//19
console.log(students1.name);
//홍길동