Modern JavaScript 데이터타입과 변수
1. 데이터타입과 변수
- 변수 : 메모리상의 주소를 기억하는 저장소 (address)
- 동적타이핑 : js는 동적타입 언어로 변수의 타입지정 없이 값이 할당되는 과정에서 자동으로 변수타입이 결정된다.
- 원시타입 : 변경 불가능한 값, 값에 의한 전달
- Number : 모든 수를 실수로 처리
- Infinity : 양의 무한대 / -Infinity : 음의 무한대
- NaN : 산술연산 불가
- String : js 특징으로 일부 문자를 변경할 수 없다. (새롭게 문자열을 할당해야한다.)
- Boolean : false / true
- Undefined
- Null
- Symbol : 이름의 충돌을 줄이기 위해 유일한 객체 프로퍼티 키를 만들어 사용 (object의 프로퍼티가 많을때 같은 프로퍼티를 추가하여 생기는 코드오류 방지)
let obj = {
name: "cy"
};
let id = Symbol("id");
obj[id] = 1;
console.log( obj[id] )
Tip) Typeof 연산자로 값 타입 확인 가능
Null 타입 확인시 일치연산자 ‘===‘사용
2. const / let / var 차이점
- let : update 허용
- const : update 허용 x
- var : 이전의 js 에서 쓰던 방식으로 update 가 어디서든 가능, 데이터가 보호 받기 힘듬 (실수로 연산해도 알려주지 않음)
3. var 문제점
- 함수레벨 스코프 : 전역변수 남발
- 키워드생략허용 : 의도치않은 변수 전역화
- 중복 선언 허용
- 변수 호이스팅 : 변수 선언전 참조 가능
- 이를 보완하기 위해 Let / const 키워드가 도입
4. 호이스팅
- 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성-위치와 상관없이 어디서든 호출가능
- 함수 선언문으로 정의된 함수는 엔진이 스크립트를 로딩하는 시점에 바로 초기화하고 VO에 저장한다. (선언, 초기화, 할당 한번에 이루어짐)
- 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성 (위치와 상관없이 어디서든 호출가능)
- 함수 선언문으로 정의된 함수는 엔진이 스크립트를 로딩하는 시점에 바로 초기화하고 VO에 저장한다. (선언,초기화,할당 한번에 이루어짐)
- 선언단계 : 변수개게 변수에 등록, 객체는 스코프 참조 대상
- 초기화단계 : 등록된 변수에 메모리 할당 변수는 undifined로 초기화
- 할당단계 : undifined로 초기화된 변수에 실제값 할당
//함수 표현식에서 정의
var res = square(5); // TypeError: square is not a function
var square = function(number) {
return number * number;
}
5. Scope
- 함수레벨 스코프 : 함수내에 선언된 변수는 함수내에서만 유효 (지역변수)
- 블록레벨 스코프 : 코드 블록내에 선언된 변수는 블록내에서만 참조
참고 : https://isaac-yoon.tistory.com/9
6. 타입변환과 단축평가
- 명시적 타입 변환
var x = 10;
var str = x.toString(); // 숫자를 문자열로 타입 캐스팅한다.
console.log(typeof str); // string
- 암묵적 타입 변환 : 숫자 타입 x의 값을 바탕으로 새로운 문자열 타입의 값을 생성해 표현식을 평가
var str = x + '';
console.log(typeof str, str); // string 10
console.log(x); // 10 변수 x의 값이 변경된 것은 아님
- 문자열 타입 변환
숫자 타입 => 문자열 타입
String 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(String(1)); // "1"
Object.prototype.toString 메소드를 사용하는 방법
console.log((1).toString()); // "1"
문자열 연결 연산자를 이용하는 방법
console.log(1 + ''); // "1"
- 숫자타입변환
문자열 타입 => 숫자 타입
Number 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(Number('0')); // 0
parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
console.log(parseInt('0')); // 0
+ 단항 연결 연산자를 이용하는 방법
console.log(+'0'); // 0
* 산술 연산자를 이용하는 방법
console.log('0' * 1); // 0
- 불린타입변환
문자열 타입 => 불리언 타입
Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(Boolean('x')); // true
! 부정 논리 연산자를 두번 사용하는 방법
console.log(!!'x'); // true