과제1
자바스크립트에서 == 와 === 가 어떻게 다른지 설명해 주세요.
자바스크립트에서 ==와 ===는 어떠한 값의 비교하는 연산자로 사용합니다
'=='과 '==='은 값을 비교 하는 방법에 차이가있습니다.
== (동등 연산자):
== 은 두 값이 동등 한지 비교할때 쓰입니다.
이때 형변환이 일어날수 있습니다.
1. 만약 둘 중 하나가 객체이고 기본값인 경우, 객체를 기본값으로 변환하여 동등비교를 실시한다..
let objectValue = { key: "value" };
let stringValue = "value";
console.log(objectValue == stringValue);
true2. 두 피연산자가 문자열과 숫자인 경우, 문자열을 숫자로 변환합니다.
let stringNumber = "5";
let numericValue = 5;
console.log(stringNumber == numericValue);
true3. 불리언과 다른 자료형을 비교할 때, 불리언을 숫자로 변환합니다.
불리언 true는 숫자형 변환시 1의 값을 반환합니다.
let booleanValue = true;
let numericValue = 1;
console.log(booleanValue == numericValue);
true4.객체와 null 또는 undefined를 비교할 때, 객체를 null 또는 undefined로 변환합니다.
const objectValue = { key: "value" };
const nullValue = null;
console.log(objectValue == nullValue);
false=== (일치 연산자):
=== 연산자는 엄격한 비교를 수행하며, 형 변환이 없습니다. 비교대상의 값과 자료형 모두를 만족해야 true 값을 출력합니다.
let stringNumber = '1';
let numberNumber = 1
console.log(stringNumber === numberNumber);동등 비교일때는 true의 값을 출려하지만 일치 비교일때는 false를 반환합니다.
예를 들어, 1 === 1는 true를 반환하고, 1 === "1"은 false를 반환합니다.
==동등비교 보다 ===일치 비교를 사용을 더 권장하고 있습니다.
값의 비교에 있어 예기치 않은 결과를 피하기 위해서 입니다.
상황에 따라 ==동등비교를 사용해야 할 때도 있을수 있기 때문에 상황에 맞게 잘 선택하여 사용하고 비교의 개념 형변환에 대한 개념을 충분히 알고 있어야겠습니다.
과제2
자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요.
얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)는 객체나 배열을 복사할 때 사용되는 개념입니다.
객체와 배열을 복사할때 다르게 복사 되므로 어떻게 복사되는지 알아야합니다.
얕은 복사(Shallow Copy):
얕은 복사는 원본 객체나 배열의 최상위 요소를 복사하는 것을 의미합니다. 그러면 복사된 객체나 배열의 요소들은 원본과 동일한 참조를 가집니다. 따라서, 만약 복사된 객체나 배열 안에 객체나 배열이 포함되어 있다면, 이 내부 객체나 배열은 동일한 메모리 위치를 참조하게 됩니다.
얕은 복사는 Object.assign(), 스프레드 연산자(...), 배열의 slice() 메서드 등을 사용하여 수행할 수 있습니다.
const originalArray = [1, 2, [3, 4]];
const shallowCopy = [...originalArray];
shallowCopy[2][0] = 99;
console.log(originalArray); // [1, 2, [99, 4]]
console.log(shallowCopy); // [1, 2, [99, 4]]얕은 복사를 사용하면 복사된 객체나 배열 내부의 객체나 배열이 원본과 공유됩니다.
주소값을 복사하여 참조하며 복사한 구조에 자료값을 바꾸면 원본 값도 바뀝니다.
깊은 복사(Deep Copy):
깊은 복사는 원본 객체나 배열의 모든 요소를 재귀적으로 복사하여 새로운 객체나 배열을 생성합니다. 따라서 복사된 객체나 배열은 완전히 독립적이며, 내부 객체나 배열도 모두 복사됩니다.
깊은 복사를 수행하려면 일반적으로 외부 라이브러리나 함수를 사용해야 합니다.
복사를 하지만 얕은 복사처럼 주소값을 참조하여 값을 공유하지 않고 완전한 독립체로 복사를 합니다.
const originalArray = [1, 2, [3, 4]];
const deepCopy = JSON.parse(JSON.stringify(originalArray));
deepCopy[2][0] = 99;
console.log(originalArray); // [1, 2, [3, 4]]
console.log(deepCopy); // [1, 2, [99, 4]]위 예시에서는 JSON.stringify()를 사용하여 객체를 문자열로 변환하고, JSON.parse()를 사용하여 다시 객체로 변환하여 깊은 복사를 수행합니다. 이 방법은 단순한 데이터 구조의 복사에 적합합니다. 하지만 함수나 더 복잡한 객체의 깊은 복사에는 적합하지 않을 수 있습니다.
재귀적 복사
재귀적으로 복사(Deep Copy)는 객체나 배열 내에 중첩된 다른 객체나 배열을 완전히 복사하는 과정을 의미합니다. 다시 말해, 원본 객체나 배열의 모든 요소를 반복하며, 해당 요소가 객체나 배열인 경우에도 그 내부 요소까지 복사합니다. 이것은 중첩된 구조를 가진 데이터를 완벽하게 복제하는 방법입니다.
예를 들어, 원본 객체에 다른 객체가 중첩되어 있다면, 재귀적 복사를 사용하면 모든 중첩 객체도 새로운 객체로 복사되며, 중첩된 객체 안에 또 다른 중첩 객체가 있는 경우에도 계속해서 복사가 이어집니다. 이렇게 복사된 객체는 원본 객체와 완전히 독립적입니다.
재귀적 복사는 복잡한 데이터 구조나 객체 지향적인 프로그래밍에서 매우 중요한 개념입니다. 이것을 사용하면 데이터의 변경이 원본과 복사본 간에 상호 영향을 미치지 않도록 보장할 수 있습니다. 그런데, 자바스크립트는 이러한 기능을 기본으로 제공하지 않으므로 복사 작업을 직접 구현하거나 외부 라이브러리를 사용해야 합니다. 대표적인 깊은 복사 방법 중 하나는 JSON.stringify()와 JSON.parse()를 이용한 방법입니다.
JSON.stringify()와 JSON.parse()를 사용하여 객체나 배열을 JSON 문자열로 변환한 후, 다시 JSON 문자열을 객체나 배열로 파싱하여 복사를 수행합니다. 이 때, 중첩된 객체나 배열 내부의 모든 요소도 재귀적으로 복사됩니다.
const originalObject = {
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "Anytown"
}
};
// 객체를 깊은 복사하는 함수
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
const copiedObject = deepCopy(originalObject);
// 원본 객체 수정
originalObject.age = 31;
originalObject.address.city = "Newtown";
console.log(originalObject);
console.log(copiedObject);
originalObject는 수정된 값이 반영되었고, copiedObject는 원본과 독립적인 값을 가지고 있습니다.
이 예시에서 deepCopy() 함수는 JSON.stringify()를 사용하여 원본 객체를 JSON 문자열로 변환하고, 다시 JSON.parse()를 사용하여 JSON 문자열을 객체로 파싱함으로써 깊은 복사를 수행합니다. 이를 통해 copiedObject는 originalObject와 완전히 독립적으로 복사됩니다.
주의할 점은 이 방법은 일부 특별한 객체나 배열 (예: 함수, 정규 표현식, undefined 등)에 대해서는 동작하지 않을 수 있으며, JSON 표현식으로 변환할 수 없는 데이터는 복사되지 않을 수 있습니다. 또한, 성능 면에서 큰 객체나 배열의 경우 다른 복사 방법보다 비효율적일 수 있습니다.
