TIL 작성 2021 9/9

• 변수를 선언하고 함수실행식을 담아도, 그 즉시 함수가 실행이 됩니다.
  const innerFn = outerFn()
  관련링크Koans-04_Scope

• 객체의 길이를 length로 구할경우 undefined가 된다.

  • emptyObj.length //undefined
  • 객체의 길이를 구할때: Object.keys(obj)를 통해 key의 값들만 배열로 만들어주고 길이를 구하면 됩니다.

• 매개변수(parameter)와 전달인자(argument)

  • 매개변수(parameter)
    매개변수는 함수의 정의부분에 나열되어 있는 변수들
    f(x) = x*x와 같은 함수 정의 부분에서 변수 ‘x’
  • 전달인자(argument)
    전달인자는 함수를 호출할때 전달되는 실제 값
    f(2)와 같은 함수 호출 부분에서 값 ‘2’

    참고 : https://wayhome25.github.io/etc/2017/12/31/parameter-argument/

• Object.assign()

  • 문법: Object.assign(target, ...sources).
    target(목표 객체) - 출처 객체의 속성을 받아 반영된 목표 객체를 반환합니다.
    sources(출처 객체(들)) - 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체입니다.

  const target = { a: 1, b: 2 };
  const source = { b: 4, c: 5 };
  
  const returnedTarget = Object.assign(target, source);
  
  console.log(target);
  // expected output: Object { a: 1, b: 4, c: 5 }
  
  console.log(returnedTarget);
  // expected output: Object { a: 1, b: 4, c: 5 }

  • 객체 복제

  const obj = { a: 1 };
  const copy = Object.assign({}, obj);
  console.log(copy); // { a: 1 }

  1차원 객체는 깊은 복사가 된다고 생각할수 있지만, 깊은 복사를 위해서는, 다른 방법을 사용해야 합니다.
  왜냐하면 Object.assign() 은 결국에는 속성 값을 복사하기 때문입니다.

  Object.assign()는 2차원 객체는 깊은 복사가이루어지지 않는다

  function test() {
  
  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(obj2); // { a: 0, b: { c: 0}}
  
  obj1.a = 1;
  console.log(obj1); // { a: 1, b: { c: 0}}
  console.log(obj2); // { a: 0, b: { c: 0}}
  
  obj2.a = 2;
  console.log(obj1); // { a: 1, b: { c: 0}}
  console.log(obj2); // { a: 2, b: { c: 0}}
  
  obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌 (이중객체는 참조값만 복사해옴)
  console.log(obj1); // { a: 1, b: { c: 3}}
  console.log(obj2); // { a: 2, b: { c: 3}}
  
  // JSON 객체 메소드를 이용한 깊은 복사
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
  }

  • JSON 객체 매소드 문법
    JSON.stringify() 메소드는 인수로 객체를 받으며 받은 객체는 문자열로 치환되며,
    JSON.parse() 메소드는 문자열을 인수로 받으며, 받은 문자열을 객체로 치환한다.

  출처: (1) mdn (2) 얕은-복사Shallow-Copy와-깊은-복사Deep-Copy

• 얕은복사(shallow copy) 깊은복사(deep copy)

  • (1) 얕은 복사
    얖은 복사는 참조(주소)값의 복사를 나타낸다.

    const obj = { vaule: 1 }
    const newObj = obj; // 참조할당
    
    newObj.vaule = 2; 2로 변경하였다.
    
    console.log(obj.vaule); // 2 newObj/obj 두개 동시에 변함.
    console.log(obj === newObj); // true

    이렇게 자바스크립트의 참조 타입은 얕은 복사가 된것이고, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 메모리 주소를 전달해서 하나의 데이터로 공유한다.
    

  • (2) 깊은 복사
    깊은 복사는 값 자체의 복사를 나타낸다.

    let a = 1;
    let b = a;
    
    b = 2;
    
    console.log(a); // 1
    console.log(b); // 2
    console.log(a === b); // false

    변수 a의 값과 변수 b의 값은 다르게 존재한다.
    이렇게 자바스크립트의 원시 타입은 깊은 복사가 되며, 이는 독립적인 메모리에 값 자체를 할당하여 생성하는 것이라 볼 수 있다.

• Array.from()
  정의: Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]