💙 들어가며
플랫폼을 바꿔서 언어도 새롭게 배워보자.
JavaScript의 시작!
✏️ 학습내용 정리
#자바스크립트의 버전
자바를 끝내고 자바스크립트의 시작이다! 우리가 배울 버전부터 확인해보자.
현재 더 많은 자바스크립트의 버전이 나왔지만
특히 5.0, 6.0은 거의 다른 언어라고 할 정도로 많은 변화가 있었던 분기점이라고 한다.
지금의 우리에게는 6.0이 더 익숙할 것이고, 앞으로 6.0을 기본으로 수업을 할 것인데
과거의 것을 새로운 기능이라고 생각해서 오용하지 않게 하기 위해서
어떤 녀석이 5.0이고 어떤 녀석이 6.0인지를 구분할 수 있게 과거버전부터 배울 것이다.
#자바 스크립트 탄생과 기본 플랫폼 소개
처음에는 유효성검사를 위해 폼만 객체로 만들어서 JavaScript를 활용했는데,
이제 모든 것들을 다 객체로 만들기 시작하면서 JavaScript의 역할이 강력해지게 되었다.
폼 이외 많은 문서의 영역이 객체화 되면서 자바스크립트는 다양한 객체를 활용할 수 있게 되었다.
(심지어 주석마저 객체로 올라감, 물론 사용할 일은 크게 없겠지만!)
활용할 수 있는 객체들이 많아질수록 언어가 컨트롤 할 수 있는 것들이 많아진다.
#자료형이 없는 JavaScript
Java와는 다르게 JavaScript는 변수의 자료형이 없다.
모든 변수는 var를 통해서 선언되고 안에 들어가는 값의 종류에 따라서 자동으로 type이 결정된다.
지역화를 하지 않았는데도 변수명을 똑같이 해도 충돌나지 않는다... (매우 위험)
자바스크립트는 자바처럼 문자형뿐만 아니라 모든 데이터형(상수형까지 포함)해서 박스로 만들어진다.
값에 기본형이라는 것이 없다. 값형식(int, char, double..)이라는 것이 없다. 그냥 박스형 자체(var)가 형식이다.
그리고 자바스크림트에는 컴파일러가 없기 때문에 사전에 다 처리해야 하는 특징을 가지고 있다.
(컴파일러(번역기)가 없기 때문에 안전장치가 하나 없다고 생각하면 된다...ㅠㅠ)
때문에 번역을 못하기 때문에 사전에 무슨 형인지를 적어두지 않고
무슨 형이든 다 박스로 감싸고 그 안에 넣는 값을 통해서 파악하게 된다.
💡 타입스크립트의 등장:
자바 스크립트를 만들어내는 방식은 똑같지만 안전장치인 타입을 추가한 것
나중에 큰 프로젝트를 다룰 때 타입스크립트를 사용하면 편리하겠다!
#Wrapper 클래스와 Wrapping 방식
한번 3이라는 박스를 만들었다면 3은 새로운 박스로 만들지 않는다.
이럴때 밑에 수동방식으로 새로 만들 수 있다. (new 연산자 반가움!)
#박스에 들어있는 값을 비교
언급했듯이 자바 스크립트에서는 박스를 자동으로 새로 만들어주지 않기 때문에
이미 3이라는 값의 박스가 있으면 아무리 새로 3을 생성하더라도 같은 박스를 가리킨다.
💡 값 / 주소가 같은지 확인을 위한 연산
==(2개) 값을 비교하는 연산
===(3개) 주소를 비교하는 연산
#오토박싱, 매뉴얼박싱
그러면 자동박싱과 수동박싱을 가지고 비교해보자
1. 자동박싱
🚨 x(3)와 y(3)를 ===으로 비교하면?
var x = 3;
var y = 3; // new Number(3);
console.log(x);
console.log(y);
console.log(x==y); // 박스에 들어있는 값을 비교하는 연산
console.log(x===y); // 박스가 같은지를 비교하는 연산⭕ 실행결과:
3
3
true (같은 값이다.)
true (같은 박스이다. 3이라는 박스를 새로 만들지 않음, 오토박싱)
2. 수동박싱
그런데 3이라는 다른 박스를 생성하기를 원한다면 수동으로 박싱을 해줘야 한다.
이때 new 연산자를 사용해서 수동 박싱을 한다.
🚨 x(3)과 y(new Number(3))을 ===으로 비교하면?
var x = 3;
var y = new Number(3);
console.log(x);
console.log(y);
console.log(x==y); // 박스에 들어있는 값을 비교하는 연산
console.log(x===y); // 박스가 같은지를 비교하는 연산⭕ 실행결과:
3
3
true (같은 값이다.)
false (y를 수동으로 다른 박스로 만들었기 때문에 다른 박스로 인식해서 false이다.)
#박스 형식이자 값: undefined
그런데 만약에 바로 초기화를 안했다면? 자료형을 어떻게 알까?
💡 초기화를 하지 않은 경우: var x;
undefined는 곧 형식이며 값이라는 것을 기억하자.
(초기화 되지 않으면 늘 형식명하고 값이 undefined로 같다.)
이 밑에 x=3;처럼 초기화를 해주어야지만 비로소 typeof라고 했을 때 number이라고 나온다.
undefined를 통해서 초기화되었는지 안되었는지를 확인해볼 수 있다.
✅ undefined를 통해 초기화여부를 확인해보자.
var x = 5;
var y;
🚨 다음 중 초기화되었는지를 확인하는 코드는?
console.log(y=="undefined");
console.log(y==undefined); // 초기화여부 확인은 이것(==)을 기본으로 사용하자!
console.log(y===undefined);⭕ 실행결과:
false (undefined자체가 박스이며 값이다. 더블쿼터("" )로 감싸게 되면 그것은 문자열이 된다.)
true (undefined 자체가 값이기 때문에 같다고 나온다.)
true (undefined 자체가 박스이기 때문에 참조하는 것이 없다고 한다.)
💙 마치며
1.
자바스크립트는 컴파일러가 없어서 조금 불안하다..
기초를 탄탄히 다지고, 본격적인 코드 작성으로 들어가자!
2.
아래는 코드 작성 전에 짧게 참고하면 좋을 법한 정보들이다.
💡 JavaScript에서의 구분자: 세미콜론(; )과 내려쓰기(개행)
💡 JavaScript에서의 문자와 문자열 구분은 의미가 없다!
따라서 싱글쿼터(' ' )와 더블쿼터(" " )를 혼용한다.
이때 싱글쿼터를 사용하면 더블쿼터로 전체 속성을 감쌀 때, 충돌이 덜나니 효율적일 수도 있음
하지만 이 모든 것들은 다 선호도의 차이일 뿐이다.
3.
할 수 있다! 화이팅!
