처음 맛보는 알고리즘 문제(2024. 4. 24.)

0. 기본정보

#스파르타코딩클럽 #부트캠프 #경과훈련일_9일/94일
- 학습주제: 「자바스크립트 종합반」 (2주차~3주차)
- 학습내용: Map, Set, 데이터 타입 심화
- 필기노트: (링크 첨부)
- 특별사항: [특강] 알고리즘, [특강] 학습법
- 학습일: 2024. 4. 24.

 

자종반('자바스크팁트종합반' 약칭) 강의를 시작하면서 진도 속도가 현저하게 떨어지고 있다.

그 말은 뭐다? 내용이 어렵다는 것은 본격적으로 배움을 시작했다는 뜻!

 

그러나 나만 좌절한 것은 아니었나보다.

분명 하루 늦게 시작했는데 강의 하나를 마칠 때마다 내 순위가 눈에띄게 올라가는 것을 경험했다.

 

금일 최종으로 확인한 랭킹보드 (나는 68등 - 좋아할 게 아니다. 숙련자들은 이 강의를 골라 듣는다더라.)

 

중략! 

오늘도 정리가 필요하다. 왜?

문제 풀 때 코드 하나라도 쳐보고 싶기 때문!

(간절하다... 정말 잘 하고 싶다...🥹)

생각을 코드로 빠르게 도출하기 위해 머릿 속 데이터저장소를 정리해보고자 한다.

(머리야.. 두야... 가비지 컬렉터는 알아서 처리해주길 바라...🤯)

---

1. 배운 내용 요약

2) Map

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

#반복문(for... of...)

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
    console.log(key);
}

for (const value of myMap.values()) {
    console.log(value);
}

for (const entry of myMap.entries()) {
    console.log(entry);
}

console.log(myMap.size); //출력 결과: 3
console.log(myMap.has("two"));  //출력 결과: true`

2) Set

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

#반복문

const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value5");
mySet.add("value8");

console.log(mySet.size); // 출력: 5
console.log(mySet.has("value1")); // 출력: true
console.log(mySet.has("value2")); // 출력: true
console.log(mySet.has("value4")); // 출력: false

// Iterator, 반복문
for (const value of mySet.values()) {
    console.log(value);
} // 출력: value1, value2, value3, value5, value8

	Map	Set
생성자	const myMap = new Map();	const mySet = new Set();
추가	myMap.set('key', 'value');	mySet.add('value1');
검색	console.log(myMap.get('key'));  // 'value' 출력	console.log(mySet.has('value1'));  // true 출력
삭제	map.delete(key)	set.delete(value)
제거	map.clear()	set.clear()
크기 확인	console.log(myMap.size);  // 3 출력	console.log(mySet.size); // 3 출력
존재여부 확인	console.log(myMap.has('two'));  // true 출력	console.log(mySet.has('value1'));  // true 출력
차이점	* 키-값 쌍을 저장 * 객체와 비슷함	* 중복 요소는 자동 제거 * 유일한 값들의 집합O

 

3) 데이터 타입 심화

(1) 데이터 타입의 종류 : 기본형(불변성 O), 참조형(객체, Object => 불변성 x)

이미지 출처 : https://velog.io/@imjkim49/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85-%EC%A0%95%EB%A6%AC

 

(2) 불변 객체의 필요성 (얕은 복사 vs. 깊은 복사)

• 객체 복사 후 변한 데이터값이 원본 객체에도 영향을 끼친다 => 해결점: 얕은 복사, 깊은 복사

var user = {
	name: 'wonjang',
	gender: 'male',
};

var changeName = function (user, newName) {
	var newUser = user;
	newUser.name = newName;
	return newUser;
};

var user2 = changeName(user, 'twojang');

if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

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

 

• 얕은 복사: 위와 같은 오류를 막기 위해 생긴 방법 => 참조데이터가 있을 경우 오류 발생 => 해결방법: 깊은 복사

// #중첩된 얕은 복사 예시

var copyObject = function (target) {
	var result = {};

	for (var prop in target) {
		result[prop] = target[prop];
	}
	return result;
}

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

 

• 깊은 복사: 얕은 복사의 오류를 해결하기 위해 고안된 방법 => n차 복사를 해야 하는 번거로움 있음 => 해결방법: 재귀적 수행(recursive) (이건 후반부에 다시 배웁니다😉)

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);

---

2. 오류일지

 

3. 해결방법
4. 오늘의 회고