내 머리속 JS - 변수와 데이터타입

JAEN·2020년 1월 13일
0

내머리속 JS 🙈

목록 보기
2/14

JavaScript Summary 🧐
정리노트 주제 "변수 선언과 데이터타입"

변수 (Variable)

: 유지할 필요가 있는 (문자나 숫자 같은) 값을 담는 컨테이너

변수선언 (es6 기준)

# var

  • 한 가지 키워드 만으로 변수 선언 가능 
  • 초기값을 주지않으면 undefined로 저장
  • 어떤 타입의 데이터 라도 저장이 가능
  • 값 외에도 타입 또한 동적 변경 가능 (재활용성↑)
var itemVar = 'global';

if(false){
  itemVar = '전역변수';
  var itemVar2 = 'local';
}

console.log(itemVar, itemVar2);		//global local

# let

  • es6에서 사용 가능 변수 선언식
  • 블록 스코프 변수 : 블록 안에서 선언하면 자신을 정의한 블록에서만 접근 가능 (블록 하위까지, 밖은 접근 X)
  • 범위 내 활용가능한 변수
let itemLet = 'global';

if(true){
  let itemLet2 = 'local';
}

console.log(itemLet, itemLet2);	//🚨Uncaught SyntaxError: Identifier 'itemLet2' has already been declared

# const

  • 읽기전용 변수
  • 한번 선언한 변수는 다시 값을 할당할 수 없음
  • 선언과 동시에 값을 할당
const itemConst = 'global';

itemConst = 'local';//🚨Uncaught TypeError: Assignment to constant variable.

 


 

들어가기 앞서, 자바스크립트는 느슨한 데이터 체크 언어 라는 특징이 있다.

//문자열 형태로 생성한 변수
var whoAmI = "I'm string!!!";
//숫자 타입으로 변경..!
whoAmI = 1004;			

어떤 데이터 형태로 저장하느냐에 따라 해당 변수타입 지정 및 변경될 수 있다.
다른 언어에 비해 데이터타입에 자유롭다..⭐️

데이터 타입

데이터타입에는 크게 2가지 형태가 있습니다.

1. 기본타입 (≒ 원시타입)

그 자체가 '하나의 '을 의미한다.

 

1.1 숫자 (number)

  • 하나의 숫자 형태로만 존재 (int형, float형, long형 ❌)
  • 모든 숫자를 64비트 부동 소수점 형태로 저장 ( ≒ double)
ex. 5 / 22.5 이다. (정수형이 아닌 실수로 처리)
  • NaN : 수치 연산을 해서 정산적인 값을 얻지 못할 때 반환하는 값 (Nan끼리 불일치)

    * isNaN()이라는 함수를 지원하며 NaN 값을 확인 👀

 

1.2 문자열 (string)

  • '(작은 따옴표) 와 "(큰 따옴표)로 생성

  • 배열과 생김새가 비슷하며 length 프로퍼티, indexOf() 메서드, concat() 등 배열 표준 메서드 활용 가능

  • 문자 배열처럼 인덱스를 이용해서 접근 가능

ex. var str = "Hello"; // str[0] 은 H 이다.
  • 한번 정의 된 문자열을 인덱스로 읽기만 가능하고 수정 불가능
ex. str[1] = 'a';	//하지만 str은 그대로 Hello (Hallo ❌)
  • 변수에 저장된 문자열을 수정 하려면 기존의 문자열을 파괴하고 해당 변수에 새 문자열 을 채워야한다.
    (= 문자열 메서드는 그 내용을 바로 변경하지 않고 항상 새로운 문자열을 생성한 후 반환한다.)

 

1.3 불린 (boolean)

  • true 또는 false 로 값을 나타냄

1.4 undefined

  • "값이 비어있음"을 나타냄.
  • 타입이자 값을 나타냄.
  • 자바스크립트에서 초기 변수에 값을 할당하지 않았을 경우 나타냄.
var jaeny;		//undefined
  • undefined는 변수 자체의 값이자 타입이다.

1.5 null

  • 개발자가 "명시적으로 값이 비어있음"을 나타냄


2. 참조타입 :: 객체 타입

원시타입을 제외한 모든 값을 의미한다.
객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리된다.
하나의 값만 가지는 원시타입과 다르게 여러 개 프로퍼티들을 포함할 수 있다.

메모리에 저장된 객체로 메모리에 직접 접근을 허용하지 않으므로
객체를 조작할 때는 사실 객체 자체가아니라 해당 객체에대한 '참조'를 조작한다.

값이 아닌 '값의 주소'를 가지고 있다.

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] <<< 함께 변경됩니다.

 

2.1 객체 (Object)

  • { key: value } 형태 컨테이너
  • 배열과 다르게 순서가 없다.
  • key는 문자열(string), value는 여러 형태(숫자, 문자열, 배열...) 가능하다.
  • 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. ( ≒ 프로토타입객체)
  • 생성 방법 : "객체리터럴 {} ", "Object() 생성자 함수" 방식이 있다.
  //객체리터럴 {} 방식
  var jeObj = {
      name: "jaeny",		//속성 (property)
      age: null,
      action: function() {	//메서드 (method)
          return "Do first than you think";
      }
  }

  //Object() 생성자 함수
  var jkObj = new Object();
  jkObj.name = "jaek";		//동적 할당

 

2.2 배열 (Array)

  • 다른 언어와 다르게 굳이 크기를 지정하지 않아도 무관하다.
  • 값들을 순서대로 여러 타입으로 저장 가능하다.
ex. var Arr = [1,'A',{name:'jaen'}];	//숫자, 문자, 객체, ...
  • 생성 방법 : "배열리터럴 [] ", "Array() 생성자 함수" 방식이 있다.
  //배열리터럴 [] 방식
  var jeArr = [];

  //Array() 생성자 함수
  var jkArr = new Array();

 

2.3 유사배열객체

  • length 속성을 가지고 있는 객체 (배열 ❌ > 배열 관련 메서드 사용 ❌)
ex. arguments 객체 //{0:'빵',1:'일', type:'number', length:3}

 

2.3 함수 (Function)

  • 특정 기능을 제공하는 코드를 정의하여 호출을 통해 결과값을 얻음.
  • 함수도 객체다 :: 일급객체 😬
  • 생성 방법 : "함수리터럴", "함수선언문", "함수표현식", "Function() 생성자 함수"방식이 있다.
  //리터럴 방식, 함수선언문
  function exFunc (pParam) { return pParam; }
  
  //함수표현식
  var exFunc2 = function (pParam) { return pParam; };
  
  //생성자함수 방식
  var exFunc3 = new Function(pParam, 'return pParam');

 

2.5 정규표현식

  • 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다.
  • 생성 방법: "정규식 리터럴 / ", "RegExp() 생성자 함수" 방식이 있다.
  //리터럴 방식
  var jeReg = /ab+c/;
  
  //생성자함수 방식
  var jkReg = new RegExp("ab+c");

 


원시 값 vs 참조값 (비교)

원시값

: 단순한 데이터 (변수에 저장된 실제 값 조작 하므로 ‘값’으로 접근)

참조값

: 여러 값으로 구성된 객체 (메모리에 저장된 객체로 직접 접근 허용 X -> 객체에 대한 ‘참조’로 접근)

. . .

연산 과정에서,
자바스크립트 엔진은 변수의 공간에 있는 값을 최종값으로 사용할 것인지 (원시값) 아니면 다른 메모리를 참조하는 값(참조 값)으로 판단해야 할지를 결정

. . .

값 복사

원시값 "immutable::변경불가능"
: 다른 변수로 복사할 때는 값을 새로 생성한 다음 새로운 변수에 복사를 한다.
그러므로 새로운 변수의 값을 변경해도 원래 변수의 값은 변경되지 않는다.

참조값 "mutable::변경가능"
: 참조 값을 변수에서 다른 변수로 복사하면 원래 변수에 들어있던 값이 다른 변수에 복사 / 그 값이 객체 자체가아니라 힙(Heap)에 저장된 객체를 가리키는 *포인터(=참조)라는 점 때문에 새로운 변수의 값을 변경하면 원래 변수의 값도 바뀌게 된다.

* 동등연산자 (==) : 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조를 비교한다는 것

+ typeof 연산자

  • 피연산자의 타입을 문자열 형태로 반환한다.
  • 기본타입 / 참조타입 값 중 null, Array, Function 주의해야한다.
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" < < < 🧐
profile
Do myself first! 🧐

0개의 댓글