[코드스테이츠 FE 45기] _2023.04.27 _ Day 13

---

오늘은 마지막 라이브 수업 빼고는 페어가 없고 개인 자습 시간인 날이다.

밀어뒀던 정리도 좀 하고 새로운 참조 자료형, 스코프, 클로저도 정리 하면서 공부하는 시간을 가져야 겠다.

---

참조 자료형

참조 자료형(Reference Type)은 변수가 값의 메모리 위치를 참조하는 방식으로 데이터를 저장하는 자료형입니다.

 

자바스크립트에서는 객체, 배열, 함수 등이 참조 자료형에 속합니다. 참조 자료형의 변수는 실제 데이터를 포함하지 않으며, 대신 메모리에 저장된 데이터의 위치를 가리킵니다.

 

참조 자료형의 변수에 값을 할당하면, 할당된 값은 메모리에 저장되며, 변수는 해당 값의 메모리 위치를 참조합니다. 이때 변수와 값 간의 관계는 다음과 같이 표현할 수 있습니다.

 

변수 -------------> 메모리 위치 -------------> 값

 

즉, 변수는 메모리 위치를 참조하며, 해당 메모리 위치에 저장된 값에 접근할 수 있습니다. 참조 자료형의 변수를 다른 변수에 할당하면, 두 변수는 같은 메모리 위치를 참조하므로, 한 변수의 값을 변경하면 다른 변수의 값도 변경됩니다.

 

---

예를 들어, 다음과 같은 객체가 있다고 가정해 봅시다.

 

const person = { name: 'John', age: 30 };

 

이 객체는 메모리에 저장되고, person 변수는 해당 객체의 메모리 위치를 참조합니다. 따라서, person 변수에 값을 할당하는 것은 객체의 속성 값을 변경하는 것과 같습니다.

 

person.age = 40;
console.log(person); // { name: 'John', age: 40 }

이제 새로운 변수에 person 변수를 할당해 보겠습니다.

 

const person2 = person;

 

이렇게 하면 person2 변수도 person 변수와 같은 객체를 참조하게 됩니다. 따라서, person2 변수를 사용하여 객체의 속성 값을 변경하면 person 변수에도 동일한 변경 사항이 반영됩니다.

 

person2.age = 50;
console.log(person); // { name: 'John', age: 50 }

 

이처럼, 참조 자료형의 변수는 값이 아니라 메모리 위치를 참조하므로, 변수 간의 관계에 주의해야 합니다.

 

---

원시 자료형

원시 자료형(primitive data type)은 컴퓨터 프로그래밍에서 사용되는 기본적인 데이터 타입으로, 간단한 데이터를 나타내는 데 사용됩니다. 원시 자료형은 불변(immutable)하며, 다른 데이터 타입으로 변환할 수 없습니다. 즉, 원시 자료형은 자신의 값을 직접 저장하고 관리합니다.

 

 

자바스크립트의 원시 자료형(primitive data type)은 다음과 같습니다.

1. 숫자(Number) - 정수, 부동소수점 숫자를 포함합니다.
2. 문자열(String) - 문자나 문자열을 나타냅니다.
3. 불리언(Boolean) - true 또는 false 값을 가집니다.
4. undefined - 값이 할당되지 않은 변수를 나타냅니다.
5. null - 값이 없음을 나타냅니다.
6. 심볼(Symbol) - 고유하고 변경 불가능한 값입니다.

이러한 원시 자료형은 객체가 아니므로, 속성과 메서드를 가질 수 없습니다. 그러나 문자열, 숫자, 불리언과 같은 원시 값에 대해서도 객체처럼 동작할 수 있도록 원시 값 래퍼 객체를 사용할 수 있습니다. 예를 들어, 문자열 값에 대해서는 String 객체의 속성과 메서드를 사용할 수 있습니다.

 

원시 자료형은 객체(object)와는 다릅니다. 객체는 여러 개의 속성과 메서드를 포함하며, 복합적인 데이터를 처리하기 위해 사용됩니다. 객체는 참조(reference)로 전달되기 때문에, 동일한 객체를 가리키는 여러 개의 변수가 존재할 수 있습니다.

 

반면, 원시 자료형은 값(value)로 전달되기 때문에, 원시 자료형 값을 가진 변수는 각자 고유한 값을 가지게 됩니다. 또한, 원시 자료형은 불변하므로, 값을 변경하려면 새로운 값을 할당해야 합니다.

 

---

얕은 복사 &  깊은 복사

얕은 복사와 깊은 복사는 자바스크립트에서 객체와 배열 등의 참조 타입 데이터를 복사할 때 사용되는 개념입니다.

 

얕은 복사(shallow copy)는 원본 객체나 배열의 주소를 참조하는 새로운 변수를 만드는 것입니다. 이 경우, 원본 객체나 배열의 내부 객체나 배열은 새로운 변수에서도 같은 주소를 참조하게 됩니다. 따라서, 원본 객체나 배열의 내부 객체나 배열이 변경되면, 새로운 변수에서도 변경된 내용이 반영됩니다.

 

예를 들어, 다음과 같은 코드에서 copy는 obj의 주소를 참조하게 됩니다.

const obj = {a: 1, b: [2, 3]};
const copy = obj;

따라서, obj의 내부 배열 b를 변경하면 copy에서도 변경된 내용이 반영됩니다.

깊은 복사(deep copy)는 원본 객체나 배열과 내부 객체나 배열까지 모두 복사하는 것입니다.

이 경우, 원본 객체나 배열과는 별도의 메모리 공간을 사용하게 됩니다.

따라서, 원본 객체나 배열의 내부 객체나 배열이 변경되어도, 복사된 객체나 배열에는 영향을 미치지 않습니다.

깊은 복사를 수행하기 위해서는 복사할 객체나 배열의 모든 속성을 순회하면서 내부 객체나 배열까지 모두 복사해야 합니다.

이를 수동으로 구현하기는 번거롭고 복잡하기 때문에, 보통 라이브러리나 함수를 사용하여 깊은 복사를 수행합니다.

예를 들어, Lodash 라이브러리에서는 _.cloneDeep() 함수를 사용하여 깊은 복사를 수행할 수 있습니다.

 

---

스코프

스코프(scope)는 변수와 함수가 유효한 영역을 말합니다.

즉, 변수나 함수를 선언한 위치에 따라서 해당 변수나 함수가 어디까지 유효한지 결정됩니다.

 

스코프(scope)는 변수와 함수가 유효한 영역을 말하며, 전역 스코프와 지역 스코프로 나뉩니다. 자바스크립트에서는 함수 레벨 스코프와 블록 레벨 스코프의 개념이 있으며, ES6에서는 let과 const 키워드를 사용하여 블록 스코프를 생성할 수 있습니다. 변수나 함수가 선언된 스코프에서는 해당 변수나 함수에 접근할 수 있으며, 스코프 체인을 따라 검색합니다.

 

let 키워드를 사용하여 블록 스코프를 생성하는 예제

 

function foo() {
  if (true) {
    let x = 10;
    console.log(x); // 10
  }
  console.log(x); // ReferenceError: x is not defined
}

foo();

위 코드에서 x 변수는 if문 블록 내부에서만 유효한 블록 스코프를 갖습니다. if문 블록을 벗어나면 x 변수에 접근할 수 없습니다. 따라서 foo() 함수의 두번째 console.log(x)에서 ReferenceError가 발생합니다.

---

클로저

자바스크립트 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합입니다. 클로저는 함수가 선언될 당시의 렉시컬 환경을 기억하고, 함수가 이 환경에서 벗어나 호출되어도 그 환경에 대한 참조를 유지합니다.

클로저는 외부 함수의 변수를 참조하거나, 함수를 리턴하는 등의 용도로 사용됩니다. 예를 들어, 다음과 같은 코드에서는 외부 함수인 makeCounter가 실행될 때마다 내부 함수인 counter가 생성되고, 이 함수는 외부 함수의 변수 count를 참조합니다. 이때 counter 함수는 클로저입니다.

 

function makeCounter() {
  let count = 0;
  function counter() {
    return count++;
  }
  return counter;
}

const counter1 = makeCounter();
console.log(counter1()); // 0
console.log(counter1()); // 1

const counter2 = makeCounter();
console.log(counter2()); // 0

위 예시에서 counter1과 counter2는 각각 makeCounter 함수를 호출한 결과물인 함수입니다. 하지만 counter1과 counter2는 서로 다른 클로저를 갖습니다. counter1은 makeCounter 함수가 실행될 때 만들어진 렉시컬 환경을 참조하고, counter2는 makeCounter 함수가 실행될 때 만들어진 다른 렉시컬 환경을 참조합니다.

클로저는 함수형 프로그래밍에서 매우 중요한 개념이며, 상태를 관리하거나 정보를 은닉하는 등의 용도로 사용됩니다.