FrontEngineer JungBam
혼공스(챕터2) 자료와 변수 본문
기본 자료형
1. 자료 : 프로그램이 처리할 수 있는 모든 것
→ 자료형 : 자료 형태에 따라 나눠 놓은 것
2. 자료형의 종류
- 숫자 : 따옴표가 없이 숫자를 입력하면 숫자형으로 인식함.
+, -, / , *(기본 사칙연산), %(나머지)
- 문자열 : '(작은 따옴표)나 "(큰 따옴표)를 사용하여 선언
이스케이프 문자(|) : 문자열 안에서 따옴표나 |를 나타내고자 할 때 사용
ex) "|"" → 출력물 : "
문자열 연산자
- 문자열 + 문자열 : 두개의 문자열을 합침
* 만약 문자열 형태의 숫자를 숫자로 계산하고자 하면 문자열 앞에 +를 붙이던가 숫자형으로 변환하여 연산해야 함.
- 문자열[index] : 문자열의 index 순서에 있는 문자를 가져옴
- 문자열 길이 구하기 : 문자열.length
- 불 : true, false(참 / 거짓)
비교 연산자 : ===. !==, > 등..
- 비교 연산자를 수행한 값은 참이냐 거짓이냐가 나옴.
불 부정 연산자 : !(not)
- 불 값을 반대값으로 바꿔줌.
논리합 / 논리곱
- ||(or) : 논리합(앞에가 거짓이면 뒤에 값을 반환하고 앞에가 참이면 앞에 값을 반환함.)
- &&(and) : 논리곱(앞에가 거짓이면 앞에 값을 반환하고 앞에가 참이면 뒤에값은 반환함.)
*** 괄호 안에 개념을 많이 사용하게 됨.***
3. 자료형 검사 : typeof(자료)
4. 템플릿 문자열(빽틱 : `) : 문자열 내에 표현식을 삽입할 때 사용
- 사용방법 :
const data = '내가 넣고싶은 데이터'
console.log(`이 안에 넣고 싶은 문자열 표현식을 넣으면 됨.${data}`)
→ 출력물 : 이안에 넣고 싶은 문자열 표현식을 넣으면 됨. 내가 넣고싶은 데이터
5. === 연산자(!==) : 값과 자료형 모두 일치하는지 확인하는 연산자
- 프론트에서 유효성검사를 해서 데이터를 넘겨줘야할 때에 많이 사용함.
상수와 변수
1. 상수 : 항상 같은 수(const)
상수와 관련된 에러
- Identifier has already decleared : 같은 이름의 상수를 두번 선언한 경우
- Missing initializer in const declaration : 상수는 한번만 선언할 수 있기 때문에 선언시 값을 함께 지정해주어야 함.
- Assignment to constant variable : 상수로 선언한 자료의 값을 변경하고자 할 경우
2. 변수 : 변할 수 있는 수(let)
변수와 관련된 에러
- Identifier has already been declared : 같은 이름의 변수를 두번 선언한 경우
복합 대입 연산자
- +=, -=, %=, /=, %=
증감 연산자
- 변수++, 변수--, ++변수, --변수
const를 let보다 많이 사용하는 이유 :
const는 내용을 다시 꺼낼 필요가 없으니 쌓을 수 있어서 저장효율이 좋고 반면에 let은 수시로 넣고 빼야 하다보니 저장효율이 나쁘다. 값을 수시로 변해야 하는 경우가 아니라면 const를 사용하는 것이 성능면에서 좋다.
var를 사용하지 않는 이유 :
1. 중복선언이 가능함.
2. 전역에서 선언시 window 객체의 속성을 조작함.
3. 함수스코프를 가져 블록 스코프 내에서 선언을 하더라도 밖에서 참조가 가능함.
3. undefined 식별자
- 상수와 변수로 선언하지 않은 식별자
- 값이 없는 변수
const로 객체나 배열과 같은 참조형 객체를 했을 때 배열과 객체의 값을 변경할 수 있는 이유 :
배열이나 객체와 같은 참조형 데이터는 그 주소값을 가리키기 때문에
자료형 변환
1. 숫자 자료형으로 : Number(자료)
※ 협업을 할때에 직관적이기 때문에 Number()를 사용하지만 소규모 프로젝트나 팀원간 소통이 되었다면 +변수로 대체 가능
2. 문자 자료형으로 : String(자료)
3. 불 자료형으로 : Boolean(자료)
1. 문자열 입력 : prompt(메시지 문자열, 기본 입력 문자열)
- 사용자에게 입력받은 값을 선언할때 사용함.
2. 불 입력 : confirm(메시지 문자열)
- 사용자 확인 받은 값을 선언할 때 사용함.
반응형
'자바스크립트 개념' 카테고리의 다른 글
혼공스(챕터5) 별도정리 : 타이머 함수 (0) | 2022.11.12 |
---|---|
혼공스(챕터5) 함수 (0) | 2022.11.11 |
혼공스(챕터4) 반복문 (0) | 2022.11.10 |
혼공스(챕터3) 조건문 (0) | 2022.11.08 |
혼공스(챕터1) JS 기본용어 (0) | 2022.11.07 |
Comments