TIL 작성 2021 9/9

Jelkov Ahn·2021년 9월 9일
0

TIL

목록 보기
13/29
post-thumbnail
  • 변수를 선언하고 함수실행식을 담아도, 그 즉시 함수가 실행이 됩니다.
    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]
profile
끝까지 ... 가면 된다.

0개의 댓글