TIL 20241023

이번 주 목표  Weekly Plan

짧은 산책 기획

오늘 목표  Daily Plan

짧은 산책 기획

수업 : javascript 복습

오늘 한 것  Done Today

수업 : javascript 복습

1.  console.log

// javascript에서는 console.log로 디버깅
console.log("Hello World");
console.log("Hello World");

// 백틱을 사용하면 문자열 안에 변수를 넣을 수 있음
var world = "world";
console.log(`Hello ${world}`);

 

2.  문자열

console.log(23 + 45);
console.log('this is "string"'); // \를 사용하여 따옴표 출력 가능

// 템플릿 문자열
console.log(`52 + 45 = ${52 + 45}`);

console.log("Hello" + "javascript");

// 줄바꿈
console.log("Hello \n World");
// 탭
console.log("Hello \t World");

3.  변수와 상수 

let pi; // 변수 선언
// 변수는 재할당이 가능하다.
// 상수는 재할당이 불가능하다.
console.log(pi); // undefined
pi = 3.14; // 재할당
console.log(pi); // 3.14

// 상수
const PI = 3.141592; // 상수는 재할당이 불가능
console.log(PI); // 3.141592
PI = 2.78;
console.log(PI); // TypeError: Assignment to constant variable.

 

4.  비교 연산자

console.log(52 > 52); // false
console.log(52 >= 52); // true
console.log(45 == 52); // false
console.log(45 != 52); // true

 

5.  논리 연산자 

console.log(52 >= 52 && 52 > 52) // true & false => false
console.log(52 >= 52 || 52 > 52) // true || false => true

 

6.  증감 연산자

// 증감 연산자
let num = 1;
console.log(num); // 1
num++; // num = num + 1
console.log(num); // 2
num--; // num = num - 1
console.log(num); // 1

 

7.  타입 검사 

console.log(typeof 10); // number
console.log(typeof "Hello"); // string
console.log(typeof true); // boolean
console.log(typeof function () {}); // function
console.log(typeof {}); // object

let a = 2.4444;
console.log(typeof a); // number

 

8. 문자열로 바꾸기

console.log(String(52));
console.log(typeof String(52)); // string
console.log(typeof (52 + "")); // string
console.log(typeof `${52}`); // string

 

9.형변환

// 형변환
console.log(typeof Number("45")); // number
console.log(typeof parseInt("45")); // number
console.log(typeof parseFloat("45.23")); // number

 

 

10. isNaN

console.log(isNaN(Number("Hello"))); // true

 

 

11. 동등연산자 일치연산자

console.log(`50 == "50" : ${50 == "50"}`); // true 동등연산자
console.log(`50 == "50" : ${50 === "50"}`); // false 일치연산자

 

 

12. if문

const date = new Date();

if (date.getHours() < 12) {
  console.log(`오전입니다 : ${date.getHours()}시`);
} else if (date.getHours() >= 12) {
  console.log(`오후입니다 : ${date.getHours()}시`);
} else {
  console.log(`나머지 : ${date.getHours()}시`);
}

 

const date = new Date();
const hour = date.getHours();

if (hour < 11) {
  console.log(`아침 : 오늘 날짜는 ${date} 현재 시간은 ${hour}시 입니다.`);
} else {
  if (hour < 15) {
    console.log(`점심 : 오늘 날짜는 ${date} 현재 시간은 ${hour}시 입니다.`);
  } else {
    console.log(`저녁 : 오늘 날짜는 ${date} 현재 시간은 ${hour}시 입니다.`);
  }
}

 

13. 객체의 특성

const aa = {};
aa["hour"] = hour;
console.log(aa);
const bb = { name: "lee" };
aa = bb;
// TypeError: Assignment to constant variable.

 

 

14. switch case 문

const input = 12;

switch (input % 2) {
  case 0:
    console.log(`짝수`);
    break;
  case 1:
    console.log(`홀수`);
    break;
  default:
    console.log(`숫자`);
}

 

 

15. 삼항연산자

let test;
console.log(typeof test);

test = typeof test != "undefined" ? test : "initial";
console.log(test);

 

16. while문

let arr = [5, 23, "hello", true, "world", -9];
let i = 0;
while (i < arr.length) {
  console.log(` ${i} => ${arr[i]}`);
  i++;
}

 

17. for문

 let arr = [5, 23, "hello", true, "world", -9];

for (let i = 0; i < arr.length; i++) {
  console.log(`${i} => ${arr[i]}`);
}

 

18. for in 문

let arr = [5, 23, "hello", true, "world", -9];
for (i in arr) {
  console.log(`${i} => ${arr[i]}`);
}

 

19. for of 문

let arr = [5, 23, "hello", true, "world", -9];
for (element of arr) {
  console.log(`${element}`);
}

 

20. break문

멈추기

let arr = [5, 23, "hello", true, "world", -9];
for (i in arr) {
  if (typeof arr[i] == "string") {
    break;
  }
  console.log(`${arr[i]}`); // 5. 23
}

 

21. continue문

건너뛰기

for (i in arr) {
  if (typeof arr[i] == "string") {
    continue;
  }
  console.log(`${arr[i]}`);

 

22. map 함수

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const arr2 = arr.map((num) => num * 2);
const arr3 = arr.map(function (num) {
  return num * 2;
});

 

 

23. filter 함수

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr2 = arr.filter((x) => x % 2 == 0);
console.log(arr2);

 

24. forEach 함수

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach((num, i) => {
  console.log(`${num} ${i}`);
})

 

 

25. push 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.push(11);
arr.push(12);
arr.push(13);

arr.forEach((num, i) => {
  console.log(`${num} ${i}`);
});

 

26. 익명함수 

function add1(x, y) {
  console.log(`${x} ${y}`);
  const r = x + y;
  return r;
}

console.log(`add result => ${add1(11, 22)}`);
const add2 = function (x, y) {
  console.log(`add2 x : ${x} y: ${y}`);
  const r = x + y;
  return r;
}; // 익명 함수

console.log(`add2 result => ${add2(11, 22)}`);

const add3 = (x, y) => {
  console.log(`add3 x : ${x} y: ${y}`);
  const r = x + y;
  return r;
}; // 익명 함수
console.log(`add3 result => ${add2(11, 22)}`);

27. 콜백 함수 

function tentimes(cb) {
  for (let i = 0; i < 10; i++) {
    cb(i);
  }
}

tentimes(function (i) {
  console.log(`call this function [${i}]`);
});

 

 

28. setTimeout setInterval

console.log("begin");
setTimeout(() => {
  console.log("1초뒤에 호출");
}, 1000); // ms 단위
console.log("end");
setInterval(() => {
  console.log("0.5초 간격으로 호출");
}, 500);

 

 

29. 객체 

let personInfo = {
  name: "lee",
  age: 55,
  address: "서울 금천구 독산동 123",
  hobby: ["독서", "등산", "낚시", "넷플릭스"],
};

console.log(personInfo);
console.log(JSON.stringify(personInfo["name"]));
console.log(personInfo.age);
console.log("---------------");
personInfo["gender"] = "M";
console.log(personInfo);
personInfo["address"] = "서울 양천구 신정동"; // 객체 value 업데이트

// 기존 키에 값을 할당하면 update
// 기존에 없는 키를 추가하는 경우 insert

 

30. 객체 순회

let personInfo = {
  name: "lee",
  age: 55,
  address: "서울 금천구 독산동 123",
  hobby: ["독서", "등산", "낚시", "넷플릭스"],
};

for (let key in personInfo) {
  console.log(`${key} => ${personInfo[key]}`);
}
console.log("----------");
console.log(`key list : ${Object.keys(personInfo)}`);

Object.keys(personInfo).forEach((key) => {
  console.log(`${key} => ${personInfo[key]}`);
});

const posts = [
  {
    title: "Test Title",
    content: "Test Content",
    author: { name: "lee", id: 1, age: 25 },
  },
  {
    title: "Test Title2",
    content: "Test Content2",
    author: { name: "hong" },
  },
  {
    title: "Test Title3",
    content: "Test Content3",
  },
];

posts["data"].forEach((item) => {
  if ("author" in item) {
    console.log(item[author][name]);
  }
  console.log("====================");
});

 

 

31. try-catch

const posts = [
  {
    title: "Test Title",
    content: "Test Content",
    author: { name: "lee", id: 1, age: 25 },
  },
  {
    title: "Test Title2",
    content: "Test Content2",
    author: { name: "hong" },
  },
  {
    title: "Test Title3",
    content: "Test Content3",
  },
];

posts["data"].forEach((item) => {
  try {
    if ("author" in item) {
      console.log(item[author][name]);
    }
    console.log("====================");
  } catch (error) {
    console.log(error);
  } finally {
    console.log("function closed");
  }
});

 

32. callback

let data;

// from remote mock
const fetchData = (cb) => {
  // cb : handleData
  setTimeout(() => {
    data = {
      name: "lee",
      age: 15,
    };
    cb(data);
  }, 2000);
};

const handleData = (data) => {
  // callback function
  console.log(`form callback : ${JSON.stringify(data)}`);
};

fetchData(handleData);

 

33. Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = false;
      const data = {
        name: "lee",
        age: 15,
      };
      const error = {
        message: "error 505",
      };
      if (success) {
        resolve(data);
      } else {
        reject(error);
      }
    }, 2000);
  });
};

const result = fetchData();
result
  .then((data) => {
    // resolve
    console.log("resolve", data);
  })
  .catch((error) => {
    // reject
    console.log("reject", error);
  });

 

 

34. async await

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      const data = {
        name: "lee",
        age: 15,
      };
      const error = {
        message: "error 505",
      };
      if (success) {
        resolve(data);
      } else {
        reject(error);
      }
    }, 2000);
  });
};

async function getData() {
  try {
    const data = await fetchData();
    console.log(`fetchData result => ${data}`);
  } catch (error) {
    console.log(error);
  }
}

getData();

---

KPT

Keep

열심히 하였다

Problem

집에서는 열심히 못하는 것

Try

집에서도 열심히 하기

소감  Diary

조금씩 나아지고 있다 힘내자