JavaScript의 자료형과 JavaScript만의 특성
느슨한 타입(loosely typed)의 동적(dynamic) 언어
자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당 가능하다느슨한 타입의 동적 언어이기 때문에 변수생성시 원시 변수의 타입을 미리 선언하지 않아도 된다는 장점이 있음
문제점변수 생성시 원시 변수의 타입을 미리 선언하지 않아도 된다는 장점으로 인해 타입이 올바른지 체크하는것이 굉장히 까다롭기 때문에 배포 시 예상치 못한 문제와 직면 할수 있다
보완방법
정적 타입 체크와 강력한 문법을 추가한 타입스크립트를 사용-> 타입스크립트란? 자바스크립트에 타입을 부여한 정적 타입 언어만약 타입 스크립트를 브라우저에서 실행하려면 파일을 변환하는 트랜스 파일 과정을 거쳐서 사용함 (공식적으로는 트랜스 파일이 아닌 컴파일된다고 표현)컴파일의 경우 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 뜻하는 반면,트랜스 파일의 경우 한 언어로 작성된 소스 코드를 비슷한 수준의 다른 언어로 변환한다는 차이가 있음예를 들어 Java를 컴파일하면 bytecode 코드가 출력되지만, C++를 트랜스 파일 하면 C가 출력되며 Typescript를 트랜스 파일 하면 Javascript가 출력됨
이런 정적 타입 언어는 런타임 이전에 타입이 올바른지에 대한 검사를 시행하며, 동적 타입 언어는 런타임에 프로그램의 타입이 올바른지에 대한 검사를 실행하고 만약 래퍼런스 오류를 유발하는 코드가 존재한다면 정적 언어는 컴파일하는 과정에서 오류를 출력하는 반면 동적 언어는 해당 구문이 실행되는 시점에서 오류를 출력하게 됨
*JavaScript 형변환
1. 암시적 변환
자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는것산술 연산자 : 더하기(+) 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환되어 연산
다른 연산자(-,,/,%) : 숫자형이 문자형보다 우선시되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않는다
동치비교 : 엄격하지 않은 동치 ‘==’ 비교 ( ‘===‘비교와 혼동되지 않도록 해아함 )
- 명시적 전환
개발자가 의도를 가지고 데이터 타입을 변환시키는것
다른 자료형 -> Number Type으로 변환하는 방법Number() , parseInt(), paprseFloat(), parseInt()parseInt()는 정수형의 숫자로 변환한다. 만약 문자열이 ‘숫자 0’으로 시작하면 8진수로 인식하고(구형브라우저 O, 신형브라우저X),‘0x, 0X’로 시작한다면 해당 문자열을 16진수 숫자로 인식한다. 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.parseFloat()는 부동 소수점의 숫자로 변환한다. parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.
다른 자료형-> String Typed으로 변환하는 방법String(), toString(), toFixed()toString()toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 ()안의 숫자길이를 맞춘 문자열을 반환한다.
다른자료형 -> Boolean TypeBoolean()
‘==’ 와 ‘===’ 연산자의 주된 차이점
‘==‘는 연산자를 이용하여 서로 다른 유형의 두 변수값이 비교가 가능하지만’ ===’는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false로 표시숫자와 불리언 비교
#0값은 false와 동일하므로 -> true 출력0 == false // true#두 피연산자의 유형이 다르기 때문에 ->false0 === false // expected output: falseconsole.log(typeof 0);// expected output: “number”console.log(typeof false); // expected output: “boolean”
undefined와 null의 미세한 차이들을 비교해보세요.
undefined : var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화가 됨변수선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화 됨즉 변수를 선언한 이후 값을 할당하지 않은 변수를 참고하면 undefined가 반환 되게 됨자바스크립트 엔진이 변수를 초기화하는 데 사용하는 undefined를 개발자가 의도적으로 변수에 할당한다면 undefined의 본래 취지와 어긋날뿐더러 혼란을 줄수 있이므로 권장하지 않는다
값이 없다는걸 명시하고 싶을땐 undefined가 아닌 null을 할당해야함 null은 값이 없다는걸 의도적으로 명시할 때 사용. 변수에 null을 할당하는것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미. 즉 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거 하는것을 의미
기본형 데이터와 참조형 데이터
Primitive type(기본형)
하나의 값을 넣음, 기본형에는 바로 값을 할당함
Number, String, Boolean, null, undefined (+ES6 symbol)
Reference type(참조형)
여러값을 가짐, 주소값을 할당(참조)함
Object 객체 (Array, Function, RegExp)
JavaScript 객체와 불변성이란 ?
객체는 변경 가능한 값(mutable value)입니다. 재할당 없이 직접 변경을 할 수 있습니다. 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신 할 수 있습니다.
불변성은 기존값을 변경하지않고 참조하는 데이터의 주소값을 갱신할 수 있습니다. 따라서 원본 객체의 데이터가 변경되거나 훼손되는 걸 막기위해 원래 변경가능한 객체를 불변 객체로 만드는 것입니다.
불변 객체 만드는 방법
자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데 const와 Object.freeze()를 사용하는 것입니다.
얕은복사 깊은 복사
얕은 복사
객체의 참조값(주소 값)을 복사 -> 원래값과 복사된 값이 같은 참조를 가리키고있음 -> 기존 객체를 저장한 변수에 영향
깊은 복사
객체의 실제 값을 복사 -> 원본에 영향을 주지 않음
cf) 기본형은 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다.
자바스크립트호이스팅과 TDZ는 무엇일까?
스코프
변수가 선언되는 범위에 따라서 참조할 수 있는 구역이 나누어지는 것
예) 전역 스코프(전역 변수)는 어디서든 참조 가능, 지역 스코프(지역 변수)는 함수 자신과 하위 함수에서 참조 가능
// test1은 아래 function안에서도 참조 가능
const test1 = '전역 변수';
function temp() {
//test2는 function 바깥쪽에서는 참조 불가능
let test2 = '지역 변수';
};
호이스팅(hoisting)
함수의 코드를 실행하기 전에 변수와 함수의 메모리 공간을 선언 전에 미리 할당하여 변수의 선언을 최상단으로 끌어올리는 것
예) 함수가 선언되기 전에 호출하는 코드를 먼저 배치하지만, 정상적으로 실행되는 것을 볼 수 있다.
name1('상진'); // '제 이름은 상진입니다.'
function name1(name2) {
console.log('제 이름은 '+ name2 +'입니다.');
}
이는 변수 선언 형식에 따라 달라진다.
var : 호이스팅 시 undefined로 변수를 초기화
function : 선언된 위치와 상관없이 동일하게 호출됨
let, const : 호이스팅 시 변수를 초기화하지 않음. (호이스팅 대상은 맞음)
예)
console.log(test1); // 호이스팅한 var 선언으로 인해 undefined 출력
var test1; // 선언
test1 = 'test1' // 초기화
console.log(test2); // ReferenceError : test2 is not defined
let test2 = 'test2'
name1('상진'); // '제 이름은 상진입니다.'
function name1(name2) {
console.log('제 이름은 '+ name2 +'입니다.');
}
TDZ(Temporal Dead Zone, 일시적 사각지대)
변수 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간
영향을 받는 구문 : const, let, class
예)
name; // TDZ의 영향으로 ReferenceError
// -- 개념상의 TDZ 공간 --
const name = '상진'; // 선언
name; // => '상진'
var는 의도하지 않은 중복선언과 재할당으로 문제가 생길 수 있기 때문에 사용하지 않는 편이 좋음
const, let, var, function
var : 중복 선언이 가능하다. 하지만 가장 마지막에 선언된 변수만 저장된다. 변수의 중복선언이 가능하기 때문에 위험하다.
let : 중복 선언이 불가능하다.(에러 발생) 하지만 값을 재할당 하는 것은 가능하다.(재할당시 let은 생략)
const : 중복선언이 불가능하며, 값을 재할당 하는 것도 불가능하다.
실행 컨텍스트와 콜 스택
실행 컨텍스트(Execution Context)는 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다. 더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
콜스택 call은 호출, stack은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조를 의미한다. 따라서 callstack은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다. 항상 맨 위에 놓인 함수를 우선으로 실행된다. 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.
스코프 체인(Scope Chain), 변수 은닉화
스코프를 안에서부터 바깥으로 차례로 검색해 나가는 것
여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 된다.
스코프 체인 내부에서 선언된 변수와 전역변수를 동일한 이름으로 선언해도 서로 접근할 수 없는 경우를 변수 은닉화라고 한다.
var a = 1;
var outer = function() {
var inner = function() {
console.log(a); //undefined
var a = 3;
}
inner();
console.log(a); // 1
};
outer();
console.log(a); // 1
실습과제
콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.
let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}
//console.log(a);
console.log(b);
hi();
console.log(b);
첫 번째 console.log(b)에서는 전역변수로 선언한 1이 나옵니다. 두 번째 hi()로 찍은 console.log(a, b)에서는 함수를 실행시켰기 때문에 a = 1, b = 100인데, b++로 1을 더해주었기 때문에 101이 나옵니다. 그리고 세 번째 console.log(b)에서는 첫 번째와 마찬가지로 전역변수로 선언한 1이 나옵니다.주석을 풀 경우 오류가 발생하는데, 이유는 a 변수가 함수 내에서 선언된 변수이기 때문에 값을 불러올 수 없고, 오류를 해결하기 위해 a를 전역변수로 선언해 주면 됩니다.
