데이터 타입과 변수

변수

 

- 값이 위치한 메모리상의 주소에 접근하기 위해 인간이 알아들을 수 있는 언어로 정의한 식별자(identifier)이다. 

 

 

 

데이터 타입 

 

- 원시 타입(primitive data type)

- boolean

- null

- undefined

- number

- string

- symbol

 

- 객체 타입(object/reference type)

- object

 

 

 

원시 타입(Primitive Data Type) 

 

- 원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달)이다.

 

 

 

Immutablility(변경 불가성)

 

- 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴. 

 

- JS는 object를 제외한 모든 타입이 imuutable 하다. 

 

var statement = "I am an immutable value";
 
var part = statement.slice(8, 17);
 
console.log(part);
console.log(statement);

var arr = [];
console.log(arr.length); // 0
 
var arr2 = arr.push(2);
console.log(arr.length); // 1
console.log(arr2.length); // undefined
console.log(arr2); // 1

- arr에 push()를 하면 arr에 2를 넣게되고, arr2는 arr의 새로운 길이가 저장된다. 

 

- 처리 후 결과의 복사본을 리턴하는 문자열 메소드 slice()와 달리 배열(객체)의 메소드 push()는 직접 대상 배열을 변경한다. 그 이유는 배열은 객체이므로 mutable하여 변경 가능하기 때문이다.

 

var user = {
    name: 'Lee',
    address: {
      city: 'Seoul'
    }
  };
  
  var myName = user.name; // 변수 myName은 string 타입이다.
  
  user.name = 'Kim';
  console.log(myName); // Lee
  
  myName = user.name;  // 재할당
  console.log(myName); // Kim

 

- line 10에서 user.name을 변경하면 user.name이 재할당되지만 myName은 변화가 없다. myName은 얇은 복사로 user.name의 주소값을 복사하는게 아니라(참조를 할당하는 것이 아니라) immutable한 값 'Lee'가 메모리에 새로 생성되고 myName이 이 새로 생성된 값을 참조하기 때문이다.  

 

 

 

Pass by value

 

- 원시 타입은 값(value)으로 전달된다. 즉, 값이 복사되어 전달된다. 주소를 참조하는 것이 아니다. 원시 타입은 값이 한번 정해지면 변경될 수 없다(immutable). 또한 이들 값은 런타임(변수 할당 시점)에 메모리의 스택 영역(Stack Segment)에 고정된 메모리 영역을 점유하고 저장된다. 

 

 

 

Pass by reference

 

- object type을 객체 타입 또는 참조 타입이라 한다. 참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도의 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다.

 

// Pass-by-reference
var foo = {
  val: 10
}
 
var bar = foo;
console.log(foo.val, bar.val); // 10 10
console.log(foo === bar);      // true
 
bar.val = 20;
console.log(foo.val, bar.val); // 20 20
console.log(foo === bar);      // true

 

 

 

 

slice() vs substring() 

 

var str = 'string';
str1 = str.substring(0,3);
str2 = str.slice(0,3);

 

slice(start, stop) vs substring(start, stop) 

 

공통점 

- start와 stop이 같으면 empty string을 반환

- 자를 때 stop index는 제외한다.

- start, stop 둘 중 하나가 string의 length보다 크면, 대신 string의 length를 사용한다.

 

차이점

slice

- start가 stop보다 크면 empty string 반환

- start가 음수이면 string의 가장 뒤에서 음수만큼 내려온 index로 취급한다.

- stop이 음수이면 역시 string의 가장 뒤에서 음수만큼 내려온 index로 취급한다.

(음수만큼 내려왔다는 표현이 추상적이다. 예를들어 'abcde'에서 'abcde'.slice(-3) 이면 'cde'이다.)

- Array의 slice와 string의 slice가 다른 점은, Array의 slice에서는 begin은 생략해도 된다. 생략하거나 undefined를 넣으면 자동으로 0에서 시작한다. string에서는 optional이 아니다.

 

substring

- start가 stop보다 크면 자리를 바꾼다.

- start나 stop이 음수이거나 NaN이면 0을 사용한다.

 

 

 

null 

 

- JS에서 변수의 value가 정해지지 않으면 JS 엔진은 해당 변수를 undefined로 설정한다. 만약 개발자가 의도적으로 변수의 값을 지정하지 않을 계획이라면 undefined로 선언하는게 아니라 null로 선언해야한다. undefined로 두면 애초 undefined의 취지에 맞지 않는다. 문제는 null값을  typeof 해보면 null이 아닌 object가 나오는데 이는 JS의 설계상의 오류이다. 그래서 null 타입을 확인할 때에는 typeof가 아니라 일치연산자(===)로 확인해야한다. 

 

 

 

symbol

 

- 심볼(symbol)은 ES6에 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 property key를 만들기 위해 사용한다. 심볼은 Symbol 함수를 호출해 생성한다.

 

var key = Symbol('key');
console.log(typeof key); // symbol
 
var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

 

 

출처 : poiemaweb.com/js-data-type-variable