얌생

Set은 원시 값이나 객체 참조 값 등 모든 유형의 고유 값을 저장할 때 사용하는 객체다.

선언

let mySet = new Set();

add ( 데이터 넣기 )

Set에 데이터를 넣는다. 해당 값이 중복되면 데이터가 저장되지 않는다.

let mySet = new Set();

// 데이터 넣기
mySet.add(1);
mySet.add(2);
mySet.add(2); // 데이터가 중복되므로 저장되지 않는다.

delete ( 데이터 삭제 )

Set에서 데이터를 삭제한다. 데이터 삭제에 성공하면 true를 반환하고 실패하면 false를 반환한다.

let mySet = new Set();

// 데이터 넣기
mySet.add(1);
mySet.add(2);

// 데이터 삭제하기
mySet.delete(1); // true
mySet.delete(3); // false

clear ( 데이터 모두 삭제 )

Set에 저장되어 있는 데이터 전부를 삭제한다. 삭제에 성공하면 true, 실패하면 false를 반환한다.

let mySet = new Set();

// 데이터 넣기
mySet.add(1);
mySet.add(2);

// 데이터 모두 삭제하기
mySet.clear(); // true

Set 순회하기

let mySet = new Set();

mySet2.add(1);
mySet2.add(2);

// 데이터 순회하기
for (let item of mySet) {
  console.log(item);
}

for (let item of mySet.values()) {
  console.log(item);
}

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

Map은 키와 값으로 데이터를 저장하고 관리하는 객체다.

key에는 어떤 데이터타입도 다 들어올 수 있다.

Map은 키가 정렬된 순서로 저장된다.

// 기본 형태
let MyMap = new Map();

// set(키,값) 데이터를 저장
MyMap.set("one",1);
MyMap.set("two",2);
MyMap.set("three",3);

// 키로 값 출력
// MyMap.get("one"); // 1

// 키로 데이터 삭제
// MyMap.delete("two");

// 키 출력
console.log(MyMap.keys());
for (key of MyMap.keys()) {
    console.log(key);
}

// 값 출력
console.log(MyMap.values());
for (value of MyMap.values()) {
    console.log(value);
}

// 키, 값 출력
console.log(MyMap.entries());
for (entri of MyMap.entries()) {
    console.log(entri);
}

// 길이 (= 크기) 출력
console.log(MyMap.size); // 2
// 키 찾기
console.log(MyMap.has("three")); // true

// 모든 데이터 삭제
MyMap.clear();

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

join ( 배열을 문자열로 변환 )

배열의 모든 요소들을 연결한 문자열을 반환한다.

각각의 요소들 사이에 매개변수로 입력한 구분자가 들어간다.

구분자를 입력하지 않으면 기본값으로 , 가 들어간다.

let fruits = ["사과", "배", "수박"];

let str1 = fruits.join();
let str2 = fruits.join('-');
let str3 = fruits.join('');

console.log(str1); // 사과,배,수박
console.log(str2); // 사과-배-수박
console.log(str3); // 사과배수박

Array.from ( 문자열을 배열로 변환 )

문자열을 배열로 변환해 반환한다.

let number1 = "123";
console.log(Array.from(number)); // ['1','2','3']

let str = "abc";
console.log(Array.from(str)); // ['a','b','c']

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

sort ( 정렬 함수 )

array.sort([compareFunction])

매개변수

 - compareFunction

   - 정렬 순서를 정의하는 함수.

     생략하면 배열은 각 요소의 문자열 반환에 따라 각 문자의 유니코드 포인트 값에 따라 정렬된다.

   - 해당 함수는 2개의 요소 ( a, b )를 입력 받는다.

   - 해당 함수가 반환하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고,

     해당 함수가 반환하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

     해당 함수가 0을 반환하면, a와 b의 순서를 변경하지 않는다.

파라미터 함수를 입력하지 않고 정렬

let numbers = [2,1,3,10];

arr.sort();

console.log(numbers); // 1 10 2 3

파라미터 함수를 입력하지 않고 정렬하면 위처럼 유니코드 포인트 값에 따라 정렬한다.

오름차순으로 정렬

let numbers = [ 9, 8, 7, 6];

numbers.sort((a, b) => a - b); 

console.log(numbers); // 6 7 8 9

내림차순으로 정렬

let numbers = [6, 7, 8, 9];

numbers.sort((a, b) => b - a));

console.log(numbers); // 9 8 7 6

reverse ( 배열 뒤집기 )

let numbers = [1,2,3,4,5];

numbers.reverse();

console.log(numbers); // 5 4 3 2 1

원본 배열 유지하고 뒤집기

let number = [1,2,3,4,5];

let reverseNumber = [...number].reverse();

console.log(number);
console.log(reverseNumber);

전개 구문인 ...을 이용해 복사본을 뒤집어서 reverseNumber에 저장한다.

이렇게 하면 원본 배열을 유지할 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

splice 

시작 위치부터 지정한 개수를 삭제하고, 시작 위치에 데이터를 넣는다.

let fruits = ["배", "감", "귤", "두리안"];

 // [1] 위치 : '감' 부터 2개( 감, 귤 )를 삭제하고 [1] 위치에 자두를 넣는다. 
fruits.splice(1, 2, "자두");

console.log(fruits); // 배 자두 두리안

slice

시작 위치부터 끝 위치 전까지 잘라서 배열로 반환한다.

let fruits = ["토마토", "브로콜리", "고추"];

// [1] 위치부터 [2] 위치 전까지 잘라서 배열로 반환
let slicedFruits = fruits.slice(1, 2);
let slicedFruits2 = fruits.slice(1, 3);

console.log(slicedFruits);  // 브로콜리
console.log(slicedFruits2); // 브로콜리 고추

Array ( 배열 )

기본 생성

// 기본 생성
let fruits = ["사과", "바나나", "오렌지"];

// 배열 요소 접근
console.log(fruits[0]); // "사과"

크기를 지정해 생성

let number = new Array(5);

push ( 데이터를 맨뒤에 넣기 )

let fruits = ["사과", "바나나", "오렌지"];

fruits.push("수박");

console.log(fruits); // 사과, 바나나, 오렌지, 수박

pop ( 데이터 맨뒤 삭제 )

let fruits = ["키위", "자몽"];

fruits.pop();

console.log(fruits); // 키위

unshfit( 데이터를 맨앞에 넣기 )

let fruits = ["망고", "파인애플"];

fruits.unshift("포도");

console.log(fruits); // 포도 망고 파인애플

shift ( 데이터 맨앞 삭제 )

let fruits4 = ["딸기", "메론", "참외"];

fruits4.shift();

console.log(fruits4); // 메론 참외

올림 ( Math.ceil() )

소수점 여부와 상관없이 올림 처리 한다.

입력받은 수보다 크거나 같은 정수 중 가장 작은 정수를 반환한다.

// 양수
let ceil_1 = Math.ceil(1);       // 1
let ceil_2 = Math.ceil(1.22);    // 2
let ceil_3 = Math.ceil(1.5);     // 2
let ceil_4 = Math.ceil(1.6666);  // 2

// 음수
let ceil_5 = Math.ceil(-1);      // -1
let ceil_6 = Math.ceil(-1.22);   // -1
let ceil_7 = Math.ceil(-1.5);    // -1
let ceil_8 = Math.ceil(-1.6666); // -1

자릿수 지정해서 올리기

let ceil_1 = Math.ceil(1.22 * 10) / 10;    // 1.3
let ceil_2 = Math.ceil(1.222 * 100) / 100; // 1.23

내림 ( Math.floor() )

소수점 여부와 상관없이 내림 처리 한다.

입력받은 수보다 작거나 같은 정수 중 가장 큰 정수를 반환한다.

// 양수
const floor_1 = Math.floor(1);     // 1
const floor_2 = Math.floor(1.22);  // 1
const floor_3 = Math.floor(1.5);   // 1
const floor_4 = Math.floor(1.666); // 1

// 음수
const floor_5 = Math.floor(-1);      // -1
const floor_6 = Math.floor(-1.22);   // -2
const floor_7 = Math.floor(-1.5);    // -2
const floor_8 = Math.floor(-1.666);  // -2

자릿수 지정해서 내리기

let floor_1 = Math.floor(1.222 * 10) / 10;   // 1.2
let floor_2 = Math.floor(1.222 * 100) / 100; // 1.22

반올림 ( Math.round() )

0.5 이상일 경우 올리고, 0.5 미만이면 내린다.

입력받은 수의

소수점 이하의 값이 0.5보다 크면, 입력받은 수보다 다음으로 높은 절대값을 가지는 정수를 반환한다.

소수점 이하의 값이 0.5보다 작으면, 입력받은 수보다 절대값이 더 낮은 정수를 반환한다.

소수점 이하의 값이 0.5와 같으면, 입력받은 수보다 큰 다음 정수를 반환한다.

// 양수
const round_1 = Math.round(1);     // 1
const round_2 = Math.round(1.22);  // 1
const round_3 = Math.round(1.5);   // 2
const round_4 = Math.round(1.666); // 2

// 음수
const round_5 = Math.round(-1);     // -1
const round_6 = Math.round(-1.22);  // -1
const round_7 = Math.round(-1.5);   // -1
const round_8 = Math.round(-1.666); // -2

자릿수 지정해서 반올림하기

let round_1 = Math.round(1.5  * 10) / 10;    // 1.5
let round_2 = Math.round(1.55 * 10) / 10;    // 1.6
let round_3 = Math.round(1.555 * 10) / 10;   // 1.6

let round_4 = Math.round(1.555 * 100) / 100; // 1.56

문자 집합

컴퓨터가 인식하고 표현할 수 있는 문자의 모음을 말한다.

컴퓨터는 문자집합에 있는 문자를 이해하고,

문자집합에 없는 문자는 이해하지 못한다.

당연히 문자집합에 있는 문자를 바로 이해하지는 못하고 기계어로 변환해주어야 한다.

문자 인코딩

문자 집합에 속해 있는 문자를 0과 1로 변환하는 과정을 말한다.

문자 디코딩

0과 1로 이루어진 문자 코드를 사람이 이해할 수 있는 문자로 변환하는 과정을 말한다.

아스키 코드

초창기 문자 집합 중 하나로 영어 알파벳, 아라비아 숫자, 일부 특수 문자를 포함한다.

각각 7비트로 표현해 총 128개의 문자를 표현할 수 있다.

* 실제로는 8비트를 사용한다. 8비트 중 1비트는 패리티 비트라고 해서 오류 검출을 위해 사용하는 비트로

실질적으로 사용되는 비트는 7비트다.

문자 인코딩에서 글자에 부여된 고유한 값을 코드 포인트라 한다.

예 ) 아스키 문자 A의 코드 포인트는 65

유니코드

모든 나라 언어의 문자 집합이다.

유니코드는 글자에 부여된 값 자체를 인코딩 된 값으로 삼지 않는다.

글자에 부여된 값 자체를 다양한 방법으로 인코딩 하여 사용한다.

UTF-8, UTF-16, UTF-32 등 ( 유니코드 문자에 부여된 값을 인코딩 하는 방식 )

UTF - 8

위 표를 살펴보자.

유니코드에 부여된 값의 범위가 0 부터 007F 까지는 1바이트로 표현한다.

유니코드에 부여된 값의 범위가 0080 부터 07FF 까지는 2바이트로 표현한다.

유니코드에 부여된 값의 범위가 0800 부터 FFFF 까지는 3바이트로 표현한다.

유니코드에 부여된 값의 범위가 10000 부터 10FFFF 까지는 4바이트로 표현한다.

예를 들어 '한글' 이라는 글자는 몇 바이트로 표현되는지 알아보자.

유니코드에 따르면 '한'은 'D55C' '글'은 'AE00' 이다.

위 표를 보면 '한' 과 '글'은 둘다 0800 ~ FFFF 사이에 속하는 것을 확인할 수 있고

따라서 '한'과 '글'을 UTF-8로 인코딩 하면 각각 3바이트로 표현될 것이라고 예상할 수 있다.

한 ( D55C) : 1101 0101 0101 1100 -> UTF8 인코딩 11101101 10010101 10011100

글 ( AE00 ) : 1010 1110 0000 0000 -> UTF8 인코딩 11101010 10111000 10000000

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 12:00 - 프로그래머스 코딩 문제 풀기

12:00 ~ 21:00 - 자바스크립트 강의 3주차, 4주차 복습

📜 프로그래머스 코딩 문제 풀기

9:00 ~ 12:00 - 프로그래머스 코딩 문제 풀기

1. 두개 뽑아서 더하기

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/68644.%E2%80%85%EB%91%90%E2%80%85%EA%B0%9C%E2%80%85%EB%BD%91%EC%95%84%EC%84%9C%E2%80%85%EB%8D%94%ED%95%98%EA%B8%B0

2. 가장 가까운 같은 글자

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/142086.%E2%80%85%EA%B0%80%EC%9E%A5%E2%80%85%EA%B0%80%EA%B9%8C%EC%9A%B4%E2%80%85%EA%B0%99%EC%9D%80%E2%80%85%EA%B8%80%EC%9E%90

3. 푸드 파이터 대회

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/134240.%E2%80%85%ED%91%B8%EB%93%9C%E2%80%85%ED%8C%8C%EC%9D%B4%ED%8A%B8%E2%80%85%EB%8C%80%ED%9A%8C

4. 콜라 문제

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/132267.%E2%80%85%EC%BD%9C%EB%9D%BC%E2%80%85%EB%AC%B8%EC%A0%9C

📜 프로그래머스 코딩 문제 풀기

12:00 ~ 21:00 - 자바스크립트 강의 3주차, 4주차 복습

오늘은 캠프에서 제공받은 자바스크립트 3주차 강의와 4주차 강의를 복습했다.

다음주 수요일에 자바스크립트에 관한 개인 과제를 받는다고 공지를 받았다.

주말 기간 동안 5주차 수업을 들어서 완강하고 한번 더 복습하는 시간을 가져야겠다.

그나저나.. 알고리즘 강의도 들어야하는데 ㅠㅠ..

오늘의 목표

⏱️ 오늘의 일정

9:00 ~ 10:00 - 프로그래머스 코테 문제 풀기
10:00 ~ 21:00 - 자바스크립트 4주차 강의

📜 프로그래머스 코테 문제 풀기

9:00 ~ 10:00 - 프로그래머스 코테 문제 풀기

1. 핸드폰 별 가리기

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/12948.%E2%80%85%ED%95%B8%EB%93%9C%ED%8F%B0%E2%80%85%EB%B2%88%ED%98%B8%E2%80%85%EA%B0%80%EB%A6%AC%EA%B8%B0

2. 음양 더하기

https://github.com/YamSaeng/AlgorithmCodingTest/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/1/76501.%E2%80%85%EC%9D%8C%EC%96%91%E2%80%85%EB%8D%94%ED%95%98%EA%B8%B0

📜 자바스크립트 4주차 강의

10:00 ~ 21:00 - 자바스크립트 4주차 강의

다행히도 4주차 강의까지는 완강했다. 

3주차 ~ 4주차까지는 이론 수업이라 그런지 낯설은 개념들이 많이 등장했다.

특히, 3주차에서 Javascript에서의 this가 너무 헷갈렸는데, 튜터님에게 물어봐서 어느정도는 해소 되었다.

2024.08.14 - [Javascript] - [Javascript] this

따로 정리하긴 했는데, 구글링 및 책으로 내용을 계속 보충해야할듯!

🌙 하루를 마치며

내일은 광복절이라 캠프 수업은 따로 없다.

자바스크립트 강의 3 ~ 4주차를 한번 더 듣고, 한번 더 정리 한 후

가능하다면 5주차 강의를 들을 수 있도록 해봐야겠다.