[중급 자바스크립트] 객체 참초, 객체 복사, 배열 컨트롤 심화

 

https://youtu.be/4_WLS9Lj6n4

https://youtu.be/9tbjjZb65ng

**

객체에서 사용할 수 있는 몇가지 메소드들(코딩앙마님 유튜브 강좌 캡처)

코딩앙마님 영상 캡처 : 위와 같이 객체를 복제해야 한다.

const user = {

     name:'Mike',

     age:30

}

위와 같이 user라는 객체가 있을 때,

복제(깊은 복사)를 하기 위해서

const cloneUser = user; 

위와 같이 작성하면 기대했던 효과(객체를 복사해서 넣는다)를 얻을 수 없다.(원인: 아래 캡처 참고)

아래 캡처를 참고하면 알 수 있듯이

cloneUser는 힙에 담긴 user를 래퍼런스하는 래퍼런스 변수가 된다.(얕은 복사)(객체를 참조하는 값이 들어간다)

따라서 

cloneUser.age=44; 식으로 cloneUser의 프로퍼티 값을 바꾸어버리면 user.age의 나이도 동기화되어 변경되는 것을 아래 예제를 통해 확인하였다.

      let a = "age";
      let user = {
        name: "Jane",
        [a]: 20,
        [1 + 2]: 3,
        ["안녕" + "하세요"]: "hello",
        sayHello: function () {
          console.log(this.안녕하세요, " ", this.name);
        },
      };
      console.log(user.name, "의 나이는 ", user.age); //Jane 의 나이는  20
      const cloneUser = user;
      cloneUser.age = 44;
      console.log(cloneUser.name, "의 나이는 ", cloneUser.age); //Jane 의 나이는  44
      console.log(user.name, "의 나이는 ", user.age); //Jane 의 나이는  44

 

 

윤인성님 유튜브 강좌 중에서 캡처

 

 

      let a = "age";
      let user = {
        name: "Jane",
        [a]: 20,
      };
      const newUser = Object.assign({}, user);
      newUser.name = "Tom";
      console.log(JSON.stringify(user)); //{"name":"Jane","age":20}
      console.log(JSON.stringify(newUser)); //{"name":"Tom","age":20}

변수 a는 객체 user 안에서 computed property(계산된 프로퍼티)가 된다.

심지어 이런 것도 된다.

      let a = "age";
      let user = {
        name: "Jane",
        [a]: 20,
        [1 + 2]: 3,
      };
      const newUser = Object.assign({}, user);
      newUser.name = "Tom";
      console.log(JSON.stringify(user)); //{"3":3,"name":"Jane","age":20}
      console.log(JSON.stringify(newUser)); //{"3":3,"name":"Tom","age":20}

[1+2] 처럼 식을 넣는 것도 가능하다.

 

지금까지 배운 것들로 실습

      let a = "age";
      let user = {
        name: "Jane",
        [a]: 20,
        [1 + 2]: 3,
        ["안녕" + "하세요"]: "hello",
        sayHello: function () {
          console.log(this.안녕하세요, " ", this.name);
        },
      };
      const newUser = Object.assign({}, user);
      newUser.name = "Tom";
      console.log(JSON.stringify(user));
      console.log(JSON.stringify(newUser));
      user.sayHello();

 

 

코딩앙마님 캡처

 

      let a = "age";
      let user = {
        name: "Jane",
        [a]: 20,
        [1 + 2]: 3,
        ["안녕" + "하세요"]: "hello",
        sayHello: function () {
          console.log(this.안녕하세요, " ", this.name);
        },
      };
      console.log(user.name, "의 나이는 ", user.age); //Jane 의 나이는  20
      const cloneUser = user;
      cloneUser.age = 44;
      console.log(cloneUser.name, "의 나이는 ", cloneUser.age); //Jane 의 나이는  44
      console.log(user.name, "의 나이는 ", user.age); //Jane 의 나이는  44
      const newUser = Object.assign({}, user);
      newUser.name = "Tom";
      console.log(JSON.stringify(user)); //{"3":3,"name":"Jane","age":44,"안녕하세요":"hello"}
      console.log(JSON.stringify(newUser)); //{"3":3,"name":"Tom","age":44,"안녕하세요":"hello"}
      user.sayHello(); //hello   Jane
      const exUser = Object.assign({}, cloneUser);
      console.log(JSON.stringify(exUser)); //{"3":3,"name":"Jane","age":44,"안녕하세요":"hello"}
      exUser.name = "황태자";
      console.log(JSON.stringify(cloneUser.name)); //"Jane"
      console.log(JSON.stringify(exUser.name)); //"황태자"
      let specialK = {
        school: "SeoulUniv",
      };
      console.log(JSON.stringify(specialK)); //{"school":"SeoulUniv"}
      const specialPerson = Object.assign(specialK, user);
      console.log(JSON.stringify(specialK)); //{"3":3,"school":"SeoulUniv","name":"Jane","age":44,"안녕하세요":"hello"}

그리하여.. 위와 같이 실습을 해보았다(결과는 주석에!)

 

병합하는 느낌인 것이다

 

첫번째 인자객체와 두번째 인자 객체 기존 프로퍼티 키가 같다면

두번째 객체 인자(객체) 속 키의 값으로 덮어씌워진다.

두개 이상의 객체도 합칠 수 있다.

let info1 = {
        menu: "대개정식",
      };

      let info2 = {
        후식: "coffee",
      };

      let 회식 = {
        people: 9,
        date: "2022/02/24",
      };

      Object.assign(회식, info1, info2);
      console.log(JSON.stringify(회식)); //{"people":9,"date":"2022/02/24","menu":"대개","후식":"coffee"}

객체의 키를 배열로 반환!

let info1 = {
        menu: "대개정식",
      };

      let info2 = {
        후식: "coffee",
      };

      let 회식 = {
        people: 9,
        date: "2022/02/24",
      };

      Object.assign(회식, info1, info2);
      console.log(JSON.stringify(회식)); //{"people":9,"date":"2022/02/24","menu":"대개","후식":"coffee"}
      console.log(JSON.stringify(Object.keys(회식))); //["people","date","menu","후식"]

let info1 = {
        menu: "대개정식",
      };

      let info2 = {
        후식: "coffee",
      };

      let 회식 = {
        people: 9,
        date: "2022/02/24",
      };

      Object.assign(회식, info1, info2);
      console.log(JSON.stringify(회식)); //{"people":9,"date":"2022/02/24","menu":"대개","후식":"coffee"}
      console.log(JSON.stringify(Object.keys(회식))); //["people","date","menu","후식"]
      console.log(JSON.stringify(Object.values(회식))); //[9,"2022/02/24","대개정식","coffee"]

키와 값을 쌍으로 묶어서 배열로 반환해줌

let info1 = {
        menu: "대개정식",
      };

      let info2 = {
        후식: "coffee",
      };

      let 회식 = {
        people: 9,
        date: "2022/02/24",
      };

      Object.assign(회식, info1, info2);
      console.log(JSON.stringify(회식)); //{"people":9,"date":"2022/02/24","menu":"대개","후식":"coffee"}
      console.log(JSON.stringify(Object.keys(회식))); //["people","date","menu","후식"]
      console.log(JSON.stringify(Object.values(회식))); //[9,"2022/02/24","대개정식","coffee"]
      console.log(JSON.stringify(Object.entries(회식))); //[["people",9],["date","2022/02/24"],["menu","대개정식"],["후식","coffee"]]

  const array = [
        ["name", "Hong GilDong"],
        ["gender", "man"],
        ["job", "programmer"],
      ];
      const employee = Object.fromEntries(array);

      console.log(JSON.stringify(employee));//{"name":"Hong GilDong","gender":"man","job":"programmer"}

      function makeObj(key, val) {
        return { [key]: val };
      }

      const staff = makeObj("gender", "female");

      const information1 = {
        name: "yumi",
      };

      const information2 = {
        age: 22,
      };
      console.log(
        JSON.stringify(Object.assign(staff, information1, information2))
      ); //{"gender":"female","name":"yumi","age":22}

<비파괴적 처리, 파괴척 처리>

초기 자바스크립트가 태동될 시점에는 하드웨어 발전이 미미했기 때문에 메모리 관리 차원에서 메서드들의 특징이 '파괴적 처리'였다.

하지만 근래 와서는 메모리가 넘쳐나며, 프로그램상 복합자료형들이 원본을 유지하고 있어야 안전한 경우가 많으므로 2010년 이후의 자바스크립에 추가된 메서드들은 '비파괴적 처리'를 지원한다.

...아쉽게도 함수와 메서드 이름만 보고 처리의 특징이 파괴적인지 비파괴적인지 알 수 없다.

초기부터 있었던 push()는 파괴적 처리이다.🥲

 

<const의 컨셉은 스택영역(값형식)에서만 적용된다>

      const choiceNum = 7;
      choiceNum = 777;//Uncaught TypeError: Assignment to constant variable
      const numbers = [1, 2, 3];
      numbers.push(4);
      console.log(JSON.stringify(numbers)); //[1,2,3,4]

const로 선언한 스택에 적용된 값자료형은 변경 시도가 차단된다.

배열은 const로 선언했다면 변수명은 힙에 선언된 배열의 주소일 뿐이고 실제 값은 힙에 있다.

배열의 이름은 배열의 시작 주소이다!의 개념을 떠올리면 쉽다.

---

//main 언어가 C#이기 때문에, 잠시 비교하려고 c# 기준 양질의 블로그글들을 참고해서 확인

https://glassnabi.tistory.com/8

http://daplus.net/c-%EB%B0%B0%EC%97%B4-%ED%9E%99-%EB%B0%8F-%EC%8A%A4%ED%83%9D-%EB%B0%8F-%EA%B0%92-%EC%9C%A0%ED%98%95/ 

배열의 이름은 배열의 시작 주소이다!

https://www.sysnet.pe.kr/2/0/12624

.NET Framework: 1055. C# - struct/class가 스택/힙에 할당되는 사례 정리

 

	값형식	참조형식
저장위치	스택	힙 메모리
할당된 곳에 저장되는 데이터	입력한 데이터	데이터가 위치한곳의 참조
특징	해당 메소드 실행이 종료되면 사라짐 int a = 1; int b = a; 위의 a,b의 값중 어느 하나의 값을 수정해도 다른쪽에는 영향을 끼치지 않는다	GC에 의해 정리됨. 서로 다른 두 변수가 같은 데이터를 참조한다면 한개의 변수값을 변경하면 다른 변수도 영향을 받는다.
변환	값형식 -> 참조형식 Boxing	참조형식 -> 값형식 UnBoxing
복사	얕은복사	깊은복사
예	구조체(숫자(부동소수점,decimal),bool, 사용자정의구조체), 열거형: bool, char, byte, decimal, double, enum, float, int long, short, sbyte, struct, uint, ulong, ushort	class, interface, delegate, object, string

C#에는 값 형식과 참조 형식이라는 두 가지 데이터 형식이 있습니다. 응용 프로그램의 성능이 중요하거나 C#의 데이터 및 메모리 관리 방식에 관심이 있는 경우에는 두 형식의 차이점을 알아야 합니다. 차이점은 이들 형식이 복사되는 방식에 따라 나뉘게 된다.

값형식의 데이터는 항상 값으로 복사되지만, 참조형식 데이터는 항상 참조로 복사된다.

 

값 형식 (Value Type)

값 형식을 기반으로 한 변수에는 값이 직접 포함됩니다. 값 형식 변수 하나를 다른 변수에 대입하면 변수에 포함된 값이 복사됩니다. 모든 값 형식은 암시적으로 System.ValueType에서 파생.

 

값 형식은 기본적으로 구조체와 열거형으로 구분할 수 있습니다.

또 여기서 구조체는 숫자(정수 , 부동 소수점 , decimal ) , bool , 사용자 정의 구조체로 구분 할 수 있습니다.

 

값 형식은 스택에 할당된 메모리에 내용을 저장합니다. 

아래 경우에는 스택이라는 메모리 영역에 값 7이 저장됩니다.

 

변수가 정의된 메서드의 실행이 종료되어 변수가 범위를 벗어나면 값이 스택에서 삭제됩니다.

 

참조 형식 ( Reference Type)

참조 형식 변수의 경우 개체 자체가 아니라 개체에 대한 참조가 복사됩니다. 참조 형식에서는 두 가지 변수가 같은 개체를 참조할 수 있으므로 한 변수에 대한 작업이 다른 변수에서 참조하는 개체에 영향을 미칠 수 있습니다. 값 형식에서는 각 변수에 데이터의 자체 사본이 들어 있으며 한 변수의 작업이 다른 변수에 영향을 미칠 수 없습니다

 

참조 형식으로는 클래스 , 인터페이스 , 델리게이트가 있으며,

기본적으로 다이나믹 , 오브젝트 , 스트링의 기본 참조 형식도 제공하고 있습니다.

 

스택을 사용하면 효율적이지만 값 형식의 수명이 제한되므로 서로 다른 클래스 간에 데이터를 공유하는 데는 적합하지 않다.

반대로 클래스 또는 배열의 인스턴스와 같은 참조 형식은 힙이라는 다른 메모리 영역에 할당된다. 

아래 배열을 구성하는 10개의 정수에 필요한 공간이 힙에 할당됩니다.

 

1

int[] numbers = new int[10];

cs

 

이 메모리는 메서드가 종료되어도 힙에 반환되지 않으며, C#의 가비지 수집 시스템에서 이 메모리가 더 이상 필요하지 않다고 판단할 때에만 회수된다. 참조 형식을 선언하면 오버헤드가 커지지만 참조 형식은 다른 클래스에서 액세스할 수 있다는 장점이 있다.

 

데이터를 값 형식 매개 변수로 메서드에 전달하면 스택에 각 매개 변수의 복사본이 만들어진다. 따라서 해당 매개 변수가 많은 요소가 있는 사용자 정의 구조체와 같은 큰 데이터 형식이거나 메서드가 여러 번 실행되는 경우 성능에 영향을 줄 수 있다.

출처: https://cho22.tistory.com/56 [게임 개발자]

https://parksh86.tistory.com/114

---

  const choiceNum = 7;
      choiceNum = 777; //Uncaught TypeError: Assignment to constant variable
      const numbers = [1, 2, 3];
      numbers.push(4);
      console.log(JSON.stringify(numbers)); //[1,2,3,4]
      const numbers = [4, 5, 6];//Uncaught SyntaxError: Identifier 'numbers' has already been declared

const로 초기화한 배열 객체에 아예 다른 배열 객체를 덮어씌우는 행위는 막히지만,

힙에 있는 객체 내용을 지지고 볶고 자르고 하는 함수들은 const로 박혀있어도 파괴적 처리가 잘 이루어진다.

 

 

<배열 내부에서 특정 값을 가진 요소 모두 제거하기>

      const 생존자 = ["수진", "경수", "zombie", "혜미", "zombie"];
      const 인류 = 생존자.filter((item) => item !== "zombie");
      console.log(JSON.stringify(생존자));//["수진","경수","zombie","혜미","zombie"]
      console.log(JSON.stringify(인류)); //["수진","경수","혜미"]

<최종 정리>

윤인성님 유튜브 무료 강좌 캡처

      const dieUser = {
        blood: "A",
      };
      const kei = dieUser;
      console.log(JSON.stringify(kei));//{"blood":"A"}
      const sumi = { blood: "B" };