[BOOK] 코어 자바스크립트, 데이터 타입

[ 코어 자바스크립트 DAY 2 ]

오늘 읽은 범위 : (데이터 타입) p.20 ~ p.35  

< 책에서 기억하고 싶은 내용 >

• 참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립.
  데이터 자체를 변경하고자 하면 (새로운 데이터를 할당하고자 하면) 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다.
• 불변성을 확보할 수 있는 경우 :
  1. 내부 프로퍼티를 변경할 필요가 있을 때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나
  2. 자동으로 새로운 객체를 만드는 도구를 활용
  3. 불변성을 확보할 필요가 있을 경우에는 불변 객체로 취급, 그렇지 않은 경우네는 기존 방식대로 사용.
• 불변 객체가 필요한 경우 : 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우.
• 얕은 복사(shallow copy) : 바로 아래 단계의 값만 복사하는 방법
  중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미.
  그러면 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키는데,
  사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀜.
  

  var user = {
  	name: 'amy',
      urls: {
      	blog: 'http://blog.com',
          facebook: 'http://facebook.com/abc',
          instagram: 'http://instagram.com/abc'
      }
  };
  
  var user2 = 'David';
  console.log(user.name === user2.name); // false
  
  // 한 단계 더 들어간 urls의 내부 프로퍼티들은 기존 데이터를 그대로 참조한다.
  // 이런 현상이 발생하지 않게 하려면 user.urls 프로퍼티에 대해서도 불변 객체로 만들 필요가 있음.
  user.urls.blog = 'http://velog.com';
  console.log(user.urls.blog === user2.urls.blog); // true
  
  user.urls.facebook = '';
  console.log(user.urls.facebook === user2.urls.facebook); // true​

• 깊은 복사(deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법
  어떤 객체를 복사할 때 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 할 때, 객체의 프로퍼티 중에서 그 값이 기본형 데이터일 경우에는 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 복사해야 한다.
  

  // 객체의 깊은 복사를 수행하는 범용 함수
  
  var copyObjectDeep = function(target) {
  	var result = {};
      if (typeof target === 'object' && target !== null) {
      	for (var prop in target) {
          	result[prop] = copyObjectDeep(target[prop]);
           }
      } else {
      	result = target;
      }
      return result;
  };​

  
  
  
• JS 엔진에서 undefined를 반환하는 경우 :
  1. 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때
  2. 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때
  3. return 문이 없거나 호출되지 않는 함수의 실행 결과
• 값으로써 어딘가에 할당된 undefined는 실존하는 데이터,
  JS 엔진이 반환해주는 undefined는 문자 그대로 값이 없음을 나타낸다.
  
  '비어있는 요소'와 'undefined를 할당한 요소'는 출력 결과부터 다르다.
  '비어있는 요소'는 순회와 관련된 많은 배열 메서드들의 순회 대상에서 제외된다.
  즉, 값이 지정되지 않은 인덱스는 '아직은 존재하지 않는 프로퍼티'에 지나지 않는다.
  
  이러한 혼란을 피할 방법은 둘 중 하나를 사용하지 않는 것.
  직접 undefined를 할당하지 말고, '비어있음'을 명시적으로 나타내고 싶을 때는 undefined가 아닌 null을 쓰면 됨.
  이러한 규칙을 따르는 한, undefined는 오직 '값을 대입하지 않은 변수에 접근하고자 할 때 JS 엔진이 반환해주는 값'으로 존재.
•  null에는 typeof null이 object 라는 JS 자체 버그가 있기에
  어떤 변수의 값이 null인지 여부를 판별하기 위해서는 typeof 대신 일치 연산자 (===)를 써야만 정확히 판별이 가능.
  

  // undefined와 null의 비교
  
  var n = null;
  
  console.log(typeof n); // object
  
  console.log(n == undefined); // true
  console.log(n == null); // true
  
  console.log(n === undefined); // false
  console.log(n === null); // false​

---

< 소감 3줄 요약 >

1. Js 데이터 타입에는 기본형과 참조형이 있다. 기본형은 불변 값, 참조형은 가변 값.
   변수는 변경 가능한 데이터가 담길 수 있는 공간, 식별자는 그 변수의 이름.
2. 참조형 데이터가 여러 개의 프로퍼티(변수)를 모은 '그룹' 이기 때문에,
   '가변 값'으로 여겨야만 하는 상황이 발생하는데, 가변 값으로 여겨야 하는 상황임에도 불변 값으로 사용하는 방법은
   내부 프로퍼티들을 일일이 복사 (깊은 복사) 혹은 라이브러리 사용.
3. '없음'을 나타내는 값은 두 가지가 있는데, undefined는 어떤 변수에 값이 존재하지 않을 경우를 의미.
   null은 사용자가 명시적으로 '없음'을 표현하기 위해 대입한 값.
   사용자가 없음을 표현하기 위해 명시적으로 undefined를 대입하는 것을 지양해야 함.

 

< 오늘 읽은 소감? 떠오르는 생각을 가볍게 적어보기 >

머릿속에서 조오금 애매한 부분들이 있었는데 유튜브 영상을 찾아보고 더 이해가 되었다 :)
비전공자 파이팅 ㅠㅠ
https://www.youtube.com/watch?v=JtrOxaTvOEM

 

[ 출처 : 코어 자바스크립트 ]