[TIL] 240102(화) 2024년 청룡의 해 시작 🐉

오늘의 공부📖

1. JS 문법 종합반 1주차
2. [특강] 학습법
3. TIL 작성

오늘 공부한 내용 정리💁🏻‍♀️

1. 복습한 내용

1) Data Type에서 '문자열'을 확인하는 다양한 방법

(불과 며칠 전에 들은 내용인데 다시 보니 정확하게 기억이 나지 않는 부분이었다.)

// 1️⃣ 문자열 길이 확인하기 : length

console.log(str.length); // 12

// 2️⃣ 문자열 결합하기 : concat

let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2) 
console.log(result); // Hello, World!

// 3️⃣ 문자열 자르기 : substr, slice

let str3 = "Hello, World"
console.log(str3.substr(7,5)); // World
console.log(str3.slice(7, 12)); // World

// 4️⃣ 문자열 검색 : search

let str4 ="Hello, World";
console.log(str4.search("World")); // 7

// 5️⃣ 문자열 대체 : replace

let str5 = "Hello World!";
let result01 = str.replace("World", "Javascript");
console.log(result01); // Hello Javascript!

// 6️⃣ 문자열 분할 : split

let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02);    // ['apple', 'banana', 'kiwi']

2) 명시적 형 변환

( 특히 Boolean (불리언) type 이 어떤 것이 true이고 false인지 기억이 잘 나지 않아 복습을 하였다. )

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
// ▶️ 빈 문자열 -> false 
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

console.log(Boolean("false")); // true
// ▶️ 값이 주어지는 문자열 -> true
console.log(Boolean({})); // true
// ▶ 빈 객체 -> true

3) 논리 연산자

3-1) 논리곱 연산자( && )
: 두 개의 값이 모두 true 일 때만 -> true 반환

3-2) 논리합 연산자( || )
: 두 값 중 하나라도 true 인 경우 true 반환

2. 새롭게 배운 내용

💬 다양한 형태의 객체와 배열 메소드에 대해서 배웠다. 처음보는 메소드들도 많아서 잘 정리해놓고 반복하여 복습하면서 적용해보는 연습을 해 봐야겠다.

1) 객체 & 객체 메소드

📌 객체 생성 방법
중괄호{} : 객체 생성
콜론(:) : key : value 작성
쉼표(,) : key-value pair 구분

let person = {  
  name:'홍길동',  
  age : 30,  
  gender : "남자",  
};

1️⃣ Object.key()
: key를 가져오는 method

2️⃣ Object.values()
: value 값들을 가져오는 method

3️⃣ Object.entries()
: key-value를 묶어서 배열로 만든 배열! (2차원 배열)

4️⃣ Object.assign()
: 객체를 복사한다.

5️⃣ 객체 병합 ... : spread operator (전개 연산자)
: 중괄호를 풀어서 없애고, 그 안의 key-value 값을 모두 적어줘.(= 병합 해줘)

2) 배열 & 배열 메소드

📌 배열 생성 방법
대괄호 [ ] : 배열 생성
쉼표(,) : 이용해서 구분

let fruit = ["사과", "바나나", "오렌지"];  
console.log(fruit.length); // 3

1️⃣ push()
: 배열 마지막(끝)에 요소 추가하기

2️⃣ pop()
: 배열에 있던 마지막 요소 삭제하기

3️⃣ shift()
: 첫 번째 요소 삭제하기

4️⃣ unshift()
: 맨 앞자리에 새로운 것을 추가

5️⃣ splice()
: N 번째 요소부터 M개 만큼 삭제 후 -> NEW name (추가하고자 하는 요소)로 갈아 끼워줘!

fruits.splice(N, M, "NEW name")  // 기본 구조

6️⃣ slice()
: N 번째 요소부터 M 번째 요소 전까지 새로운 배열로 만들어줘!

fruits.slice(N, M)  // 기본 구조

7️⃣ forEach()
: 배열 내 모든 요소에 대하여 콜백 함수 실행

8️⃣ map()
: 기존에 있었던 배열을 가공해서 새로운 배열을 생산해 내는 것.

9️⃣ filter()
: filtering 할 조건이 들어간다. 조건이 true에 해당하는 값만 새로운 배열로 반환.

🔟 find()
: 조건에 맞게 콜백 함수 실행 후, 결과가 true인 첫 번째 요소 반환.

3) switch 문

: 변수의 값에 따라, 여러개의 경우(case) 중 하나를 선택

• default : 모든 경우 맞지 않을 때, 실행.
• break; 를 마지막에 꼭 넣어줘야함!!
  : break가 없으면 다음 조건으로 넘어가게 되므로 중간에 끊어주는 장치가 필요!

let fruit = "바나나2";

switch (fruit){  
    case "사과":  
      console.log('사과입니다.');  
      break;  
    case "바나나":  
      console.log('바나나입니다.');  
      break;  
    case "키위":  
      console.log('키위입니다.');  
      break;  
    default:  
      console.log('아무것도 아닙니다.')  
      break;  
  }

💬 여러 case로 나누는 조건문의 일종인 switch문은 생소한 구조였다. 잘 다루어 조건문에 사용하면 좋을 것 같다.

4) 조건부 실행

: 어떤 특정한 경우에만 실행하도록.

let x =10;

(x > 0) && console.log("x는 양수입니다.")

💬 조건부 실행 또한 조건문에서 처음 배워보는 생소한 개념이었다. 코드를 짤 때, 길게 여러줄을 써야 할 것을 && 논리 연산자를 활용하여 짧고 간결하게 클린한 코드를 짤 수 있을 것이라 생각한다. 잘 정리해서 내 것으로 만들어야겠다.

Javascript 데이터 타입(data type)
Javascript 연산자 (Operators)
Javascript 조건문 (if, else if, else, switch)
Javascript 객체와 객체 메소드 / Object & Object Method
Javascript 배열과 배열 메소드 / Array & Array Method
[강의 정리 노트] JS 문법 종합반 1주차

하루를 마치며...🤔

2023년이 다 지나가고 2024년이 시작되었다. 어쩌면 그저 그렇게 흘러갈지도 몰랐을 졸업 전 마지막 겨울 방학 동안 부트캠프에 참여하여 알차고 열정 가득한 시간으로 가득 채워지기를 바라며 한 해를 시작해 보고자 한다. 어쩌면 어렵고 힘든 시간이 될지도 몰라도 내가 선택한 이 길을 믿고 끝까지 도전해서 꼭 그 결실을 잘 맺을 수 있는 한 해가 되길 기도해본다! 2024년 화이팅~!
하지만 아직도 1주차 강의를 듣고 있는게 아쉬울 따름이다.. 진도를 빠르게 빼야하는가 싶다가도 앞 부분 개념을 잘 정리하고 짚고 넘어가고 싶다는 생각에 자꾸 주춤하다 보니 진도가 잘 나가지 않는 것이 현실이다.. 내일부터는 내용 정리를 하는 시간을 정해 놓고, 나머지 시간에는 강의 진도를 좀 나가보도록 하자. 개인 과제도 시작해야하니 말이다..!

한 줄 회고😎

기초 다지기는 이제 끝났으니 진도를 시원하게 한 번 빼도록 하자!

✅내일 해야 할 일

• JS 문법 종합반 강의 2, 3주차 수강하기 + 정리하기
• 알고리즘 특강