JavaScript Summary 🧐
정리노트 주제 "변수 선언과 데이터타입"
: 유지할 필요가 있는 (문자나 숫자 같은) 값을 담는 컨테이너
var itemVar = 'global';
if(false){
itemVar = '전역변수';
var itemVar2 = 'local';
}
console.log(itemVar, itemVar2); //global local
let itemLet = 'global';
if(true){
let itemLet2 = 'local';
}
console.log(itemLet, itemLet2); //🚨Uncaught SyntaxError: Identifier 'itemLet2' has already been declared
const itemConst = 'global';
itemConst = 'local';//🚨Uncaught TypeError: Assignment to constant variable.
들어가기 앞서, 자바스크립트는 느슨한 데이터 체크 언어 라는 특징이 있다.
//문자열 형태로 생성한 변수
var whoAmI = "I'm string!!!";
//숫자 타입으로 변경..!
whoAmI = 1004;
어떤 데이터 형태로 저장하느냐에 따라 해당 변수타입 지정 및 변경될 수 있다.
다른 언어에 비해 데이터타입에 자유롭다..⭐️
데이터타입에는 크게 2가지 형태가 있습니다.
그 자체가 '하나의 값'을 의미한다.
ex. 5 / 2 는 2.5 이다. (정수형이 아닌 실수로 처리)
NaN : 수치 연산을 해서 정산적인 값을 얻지 못할 때 반환하는 값 (Nan끼리 불일치)
* isNaN()이라는 함수를 지원하며 NaN 값을 확인 👀
'(작은 따옴표) 와 "(큰 따옴표)로 생성
배열과 생김새가 비슷하며 length 프로퍼티, indexOf() 메서드, concat() 등 배열 표준 메서드 활용 가능
문자 배열처럼 인덱스를 이용해서 접근 가능
ex. var str = "Hello"; // str[0] 은 H 이다.
ex. str[1] = 'a'; //하지만 str은 그대로 Hello (Hallo ❌)
var jaeny; //undefined
원시타입을 제외한 모든 값을 의미한다.
객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리된다.
하나의 값만 가지는 원시타입과 다르게여러 개 프로퍼티들을 포함할 수 있다.
메모리에 저장된 객체로 메모리에 직접 접근을 허용하지 않으므로
객체를 조작할 때는 사실 객체 자체가아니라 해당 객체에대한 '참조'를 조작한다.
let obj = {a:123};
let obj2 = obj;
obj2['b'] = 456; //obj2 에 값 추가
let arr = [1];
let arr2 = arr;
arr2.push(2); //arr2 에 값 추가
console.log(obj,obj2,arr,arr2);
//{a:123, b:456} {a:123, b:456} [1,2] [1,2] <<< 함께 변경됩니다.
//객체리터럴 {} 방식
var jeObj = {
name: "jaeny", //속성 (property)
age: null,
action: function() { //메서드 (method)
return "Do first than you think";
}
}
//Object() 생성자 함수
var jkObj = new Object();
jkObj.name = "jaek"; //동적 할당
ex. var Arr = [1,'A',{name:'jaen'}]; //숫자, 문자, 객체, ...
//배열리터럴 [] 방식
var jeArr = [];
//Array() 생성자 함수
var jkArr = new Array();
ex. arguments 객체 //{0:'빵',1:'일', type:'number', length:3}
//리터럴 방식, 함수선언문
function exFunc (pParam) { return pParam; }
//함수표현식
var exFunc2 = function (pParam) { return pParam; };
//생성자함수 방식
var exFunc3 = new Function(pParam, 'return pParam');
//리터럴 방식
var jeReg = /ab+c/;
//생성자함수 방식
var jkReg = new RegExp("ab+c");
: 단순한 데이터 (변수에 저장된 실제 값 조작 하므로 ‘값’으로 접근)
: 여러 값으로 구성된 객체 (메모리에 저장된 객체로 직접 접근 허용 X -> 객체에 대한 ‘참조’로 접근)
. . .
연산 과정에서,
자바스크립트 엔진은 변수의 공간에 있는 값을 최종값으로 사용할 것인지 (원시값) 아니면 다른 메모리를 참조하는 값(참조 값)으로 판단해야 할지를 결정
. . .
원시값
"immutable::변경불가능"
: 다른 변수로 복사할 때는 값을 새로 생성한 다음 새로운 변수에 복사를 한다.
그러므로 새로운 변수의 값을 변경해도 원래 변수의 값은 변경되지 않는다.
참조값
"mutable::변경가능"
: 참조 값을 변수에서 다른 변수로 복사하면 원래 변수에 들어있던 값이 다른 변수에 복사 / 그 값이 객체 자체가아니라 힙(Heap)에 저장된 객체를 가리키는 *포인터(=참조)라는 점 때문에 새로운 변수의 값을 변경하면 원래 변수의 값도 바뀌게 된다.
* 동등연산자 (==) : 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조를 비교한다는 것
typeof "jaeny"; //"string"
typeof 2020; //"number"
typeof true; //"boolean
typeof undefined; //"undefined"
typeof null; //"object" < < < 🧐
typeof [2,0,2,0]; //"object" < < < 🧐
typeof {jKey: 7}; //"object"
typeof (function(){}); //"function" < < < 🧐