카테고리 없음

본캠프 11/06 TIL

parkcw0325 2024. 11. 6. 21:02

배운 내용: JAVA스크립트 강의 3주차

 

1. 메모리와 데이터에 관한 배경지식

  1. 메모리, 데이터
    1. 비트
      1. 컴퓨터가 이해할 수 있는 가장 작은 단위
      2. 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미
      3. 이 작은 조각들이 모여서 여러분들이 흔히 들으시는 **‘메모리’**가 만들어진다.
    2. 바이트
      1. 0과 1만 표현하는 비트를 모두 찾기는 부담
      2. 1개 → 2개 → … → 8개(새로운 단위 : byte)

 

2. 불변객체 

 

// user 객체를 생성
var user = {
name: 'wonjang',
gender: 'male',
};

// 이름을 변경하는 함수, 'changeName'을 정의
// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름
// 출력값 : 새로운 user 객체
// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경했네요! -> 가변
var changeName = function (user, newName) {
var newUser = user;
newUser.name = newName;
return newUser;
};

// 변경한 user정보를 user2 변수에 할당하겠습니다.
// 가변이기 때문에 user1도 영향을 받게 될거에요.
var user2 = changeName(user, 'twojang');

// 결국 아래 로직은 skip하게 될겁니다.
if (user !== user2) {
console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name); // twojang twojang
console.log(user === user2); // true

 

 

3. 얕은 복사 VS 깊은 복사

var user = {
name: 'wonjang',
urls: {
portfolio: 'http://github.com/abc',
blog: 'http://blog.com',
facebook: 'http://facebook.com/abc',
}
};

var user2 = copyObject(user);

user2.name = 'twojang';

// 바로 아래 단계에 대해서는 불변성을 유지하기 때문에 값이 달라지죠.
console.log(user.name === user2.name); // false

// 더 깊은 단계에 대해서는 불변성을 유지하지 못하기 때문에 값이 같아요.
// 더 혼란스러워 지는거죠 ㅠㅠ
user.urls.portfolio = 'http://portfolio.com';
console.log(user.urls.portfolio === user2.urls.portfolio); // true

// 아래 예도 똑같아요.
user2.urls.blog = '';
console.log(user.urls.blog === user2.urls.blog); // true

 

깊은복사 

 

var user = {
name: 'wonjang',
urls: {
portfolio: 'http://github.com/abc',
blog: 'http://blog.com',
facebook: 'http://facebook.com/abc',
}
};

// 1차 copy
var user2 = copyObject(user);

// 2차 copy -> 이렇게까지 해줘야만 해요..!!
user2.urls = copyObject(user.urls);

user.urls.portfolio = 'http://portfolio.com';
console.log(user.urls.portfolio === user2.urls.portfolio);

user2.urls.blog = '';
console.log(user.urls.blog === user2.urls.blog);

 

그 외 

실행 컨택스트와 THIS에 대한 문법을 학습하였다.