[REACT/JS] Data Type & 변수

** 자기 공부용 및 암기용으로 포스팅하는 글 입니다.

** 정확한 정보는 보장 할 수 없으니, 참고용으로만 봐주시면 감사하겠습니다.

** 제 개인적인 생각 및 자기 암시목적으로 작성되기에 이점 양해 부탁드립니다.

 

---

들어가기에 앞서..

REACT를 사용하기 위해서 JS에 대해 알아야 할 필요가 있다. 

REACT를 잘 사용하기 위해서 기초를 공부해보자.

이번 시간에는 JS의 데이터 타입에 관하여 공부하자.

 

---

★ 알아볼 내용

1. 각 타입의 설명 및 메서드

2. 변수 선언 방식

---

 

1. 각 타입의 설명 및 메서드

 

1) 숫자타입

정수,음수,실수 등 모든 숫자들을 포괄하는 의미이며 JavaScript에서는 모두 data type이 'number'로 통용된다.

typeof [value]로 타입 조회시 'number'가 반환된다. 이때 반환되는 값은 string 형이다.

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

 

Math 객체의 메서드를 통하여 복잡한 계산을 수행할 수도 있다.

• Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
• Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
• Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
• Math.abs(): 괄호 안의 숫자의 절대값을 반환합니다.
• Math.sqrt(): 괄호 안의 숫자의 루트값을 반환합니다.
• Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환합니다.

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

 

2) String 타입

모든 문자 및 문자열을 의미한다. 여기엔 특수문자들도 포함된다.

따옴표,큰따옴표,백틱으로 감싸서 표현할 수 있다.

백틱(`)으로 감싼 문자열은 줄바꿈도 가능하다.

각 문자열은 배열처럼 인덱스를 가지고 있어서 특정번째의 문자를 뽑아낼 수도 있다.

typeof [value]로 타입 조회시 'string'가 반환된다. 이때 반환되는 값은 string 형이다.

 

String 타입의 메서드는 아래와 같다.

• toLowerCase() : 문자열을 소문자로 변경합니다.
• toUpperCase() : 문자열을 대문자로 변경합니다.
• concat() : 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있습니다.
• slice() : 문자열의 일부를 자를 수 있습니다.
• indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인합니다.
  • 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
  • 포함되어 있지 않으면 -1을 반환합니다.
• includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인합니다.

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🙏'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

 

3) Boolean타입

참과 거짓을 나타내는 date type.  Java와 대부분 내용이 같기에 짧게 서술하겠다.

typeof [value]로 타입 조회시 'boolean'가 반환된다. 이때 반환되는 값은 string 형이다.

java에서 == 와 != 를 여기서는 ===와 !== 로 사용한다.

물론 JS에서도 == 와 != 를 사용할 수 있지만 느슨한 동치 연산자로 인식하기에 사용자가 원하지 않는 결과를 출력 할 가능성이 높다.

---

2.  변수 선언 방식

JS에서는 독특한 방식으로 변수를 선언할 수 있다. 

기존에 변수 데이터 타입을 먼저 기술한 후 이후 변수명을 작성하였지만, 여기선 변수 데이터 타입대신 

let과 var그리고 const 으로만 사용하여 변수를 선언한다.

우선 var는 최근들어 잘 사용하지 않기에 생략하겠다.

let은 기본적으로 원시타입과 참조타입모두 선언 가능하며 변수에 들어가는 데이터에 따라 typeof가 맞춰서 변화하는 형태이다. const는 상수 변수 타입을 의미한다. 

최초 선언 시 초기값은 undefined로 설정이 된다.

 

또한 변수 값을 표현하거나 사용할 때 템플릿 리터럴 ${} 을 통해 간편하고 단순하게 구현 할 수 있다.

let course = 'FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'FE 99 kimcoding'