국비 지원 개발자 과정_Day41

Javascript 타입

원시형

boolean

null, undefined → false취급

number

bigint

String

Symbol

 

객체 타입

함수→객체취급

 

const

상수, 재할당 불가능

 

let

변수, 재할당 가능

 

var

호이스팅 이슈로 인해 사용 불가!

 

동적타입

느슨한 타입의 동적 언어

JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당) 가능

타입은 초기화할때 결정됨(컴파일, 타입체크를 하지 않음)

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

 

typeof

타입을 판별하는 연산자

// 원시형 데이터

// 변수선언시 var는 사용하지 않는다 - 호이스팅때문에
// const - 상수, 재할당 불가능
// let - 변수, 재할당 가능
// 입력받는 값에대한 유효성 검사도 js로함

const num = 5; // 선언과 초기화
// num = 1 상수이기에 재할당 불가능
let no = 3;
no = 6;
console.log(num); // 5
console.log(no); // 6

const pi = 3.14;
// typeof는 타입을 판별하는 연산자
console.log(typeof pi); // 타입체크 number
// NaN -> Not a Number, 숫자로 표기할 수 없음
console.log(typeof (num + undefined)); // number
console.log(num + undefined); // NaN

const num2 = 1;
console.log(num + 1); // 6
console.log(num + num2); // 6
console.log(num + null); // 5
console.log(num + undefined); // NaN

// 템플릿 리터럴 - 백틱기호
const str1 = `hello`;
const str2 = `${str1} world!`; //${}로 변수사용 가능
console.log(str2); // hello world!

const a = 0.1;
const b = 0.2;
console.log(a + b); // 0.30000000000000004 부동 소수점 오류
console.log((a + b).toFixed(1)); //0.3 고정 소수점 표기법
console.log(typeof (a + b).toFixed(1)); // string
console.log(typeof Number((a + b).toFixed(1))); // number

// undefined 값이 할당되지 않은 상태, 기본적으로 갖는 값
let age = undefined;
console.log(age); // undefined
// 콜백함수, setTimeout은 비동기함수(순서를 뺏길 수 있음)
setTimeout(function () {
  age = 10;
  console.log(age); // 10
}, 2000); // 밀리세크단위, 2초 후에 age를 10으로 초기화

// null 어떠한 값이 존재하지 않음
let age2 = null;
console.log(age2); // null
setTimeout(function () {
  age2 = 10;
  console.log(age2); // 10
}, 2000);

// Boolean
const isOk = true;
const isFalg = false;
if (isOk) {
  console.log("참");
}
if (isFalg) {
} else {
  console.log("거짓");
}

 

// 객체 데이터

// {}로 묶이는 타입을 객체라고 함
// 그 안 내용은 key와 value
const student = {
  name: "이순신",
  age: 45,
  tel: null,
};
console.log(student); // { name: '이순신', age: 45, tel: null }
console.log(student.name); // 이순신
console.log(student.age); // 45
console.log(student["name"]); // 이순신
console.log(student["age"]); // 45
console.log(student.tel); // null
console.log(student.email); // 없는 속성을 출력하려고하면 undefiend 출력

// 배열, JSON

 

// 참 거짓
// 1) false
// 2) 0 - 0이 아닌 건 다 참 {}: Object, []:Array 참
// 3) null
// 4) undefined
// 5) NaN
// 6) ''빈문자열

// 0이아닌 숫자는참
if (500) {
  console.log("참");
}

// 음수도 0이 아니니까 참
if (-500) {
  console.log("참");
}

// 0은 거짓이지만, 0문자열은 참
if ("0") {
  console.log("참");
}

if ("") {
} else {
  console.log("빈 문자열은 false");
}

if (NaN) {
} else {
  console.log("NaN도 false");
}

if (null) {
} else {
  console.log("null도 false");
}

if (undefined) {
} else {
  console.log("undefined도 false");
}

 

// 데이터 타입
const a = 5;
console.log(typeof a); // number
console.log(typeof "이순신" == "string"); // true
console.log(typeof a == "number"); // true
console.log(typeof undefined == "undefined"); // true
console.log(typeof null == "object"); // true
console.log(typeof true == "boolean"); // true
console.log(typeof [] == "object"); // true, []은 배열
console.log(typeof {} == "object"); // true, {}은 객체
console.log(typeof function () {} == "function"); // true

function methodA() {
  console.log("methodA 호출");
}
methodA(); // methodA 호출, methodA함수 호출
console.log(methodA); // [Function: methodA]
// html로 보면 ƒ methodA(){console.log('methodA 호출');}

// ==는 값만 비교
// ===는 값, 타입 모두 비교
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(Object.prototype.toString.call(null).slice(8, -1) === "Null"); // true

function checkType(data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

// ES6, ECMAScript (2016) - arrow function
const checkType2 = (data) => {
  return Object.prototype.toString.call(data).slice(8, -1);
};

console.log(checkType(null)); // Null
console.log(checkType(undefined)); // Undefined
console.log(checkType("강감찬")); // String
console.log(checkType2(null)); // Null
console.log(checkType2(undefined)); // Undefined
console.log(checkType2("강감찬")); // String

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="./main.js"></script>
  </head>
  <body>
    타입확인
  </body>
</html>

 

// Nullish

const a = 1;

if (a < 2) {
  console.log("참");
} else {
  console.log("거짓");
} // 참

// 삼항연산자
// 조건 ? 참 : 거짓
console.log(a < 2 ? "참" : "거짓"); // 참

const 판정 = a < 2 ? "참" : "거짓";
console.log(판정); // 참

// Nullish coalescing operator 널 병합 연산자 (??) 는
// 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고,
// 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
console.log(null ?? 1); // 1
console.log(undefined ?? 2); // 2
console.log(undefined ?? null); // null

console.log(null ?? 1 ?? 3); // 1, 세번째는 있으나마나임
console.log(true ?? 1 ?? 3); // true
console.log(false ?? 1 ?? 3); // false
console.log(0 ?? 1 ?? 3); // 0

// OR연산자인 경우
const no = 0;
const num = no || 7;
console.log(num); // 7, 앞의 0이 false이기에 7이 출력됨

// Nullish 병합 연산자 -> 왼쪽부터 비교하는 것은 OR연산자와 동일
// 그러나 null, undefined는 건너뛰고 나머지 데이터를 처음 만나자마자 반환해줌
const num2 = no ?? 7;
console.log(num2); // 0

 

// 부정
console.log(true); // true
console.log(!true); // false

console.log(!0); // true
console.log(!!0); // false

console.log(!null); // true
console.log(!NaN); // true
console.log(!undefined); // true
console.log(!""); // true

console.log(!{}); // false
console.log(![]); // false

// 비교
const a = 1;
const b = 2;

console.log(a == b); // false
console.log(a != b); // true

// 일치
const x = 1;
const y = 1;
const z = "1";

console.log(x == y); // true
console.log(x == z); // true, 값만 비교
console.log(typeof x); // number
console.log(typeof z); // string
console.log(x === z); // false, 값과 타입까지 비교
console.log(x === y); // true

console.log(a >= b); // false
console.log(a <= b); // true

 

// 객체

const student = {
  name: "이순신",
  age: 55,
};

console.log(student); // { name: '이순신', age: 55 }
console.log(student.name); // 이순신
console.log(student["name"]); // 이순신
let key = "name";
console.log(student[key]); // 이순신

function Student() {
  (this.name = "강감찬"), (this.age = 56);
}

const student2 = new Student();
console.log(student2); // Student { name: '강감찬', age: 56 }
console.log(student2.name); // 강감찬
console.log(student2["name"]); // 강감찬

const student3 = new Object();
student3.name = "김유신";
student3.age = 57;

console.log(student3); // { name: '김유신', age: 57 }
console.log(student3.name); // 김유신
console.log(student3["name"]); // 김유신

const studentA = {
  name: "나신입",
  age: 31,
};

const studentB = {
  name: "나초보",
  age: 29,
  parent: studentA,
};

console.log(studentA); // { name: '나신입', age: 31 }
console.log(studentB); // { name: '나초보', age: 29, parent: { name: '나신입', age: 31 } }

// []대괄호는 배열 Array
const students = [studentA, studentB];
console.log(students[0]); // { name: '나신입', age: 31 }
console.log(students[1]); // { name: '나초보', age: 29, parent: { name: '나신입', age: 31 } }
console.log(students[0].name); // 나신입
console.log(students[0].age); // 31
console.log(students[1]["parent"]["name"]); // 나신입
console.log(students[1].parent.name); // 나신입

 

// Array
// 배열 요소
// 배열 생성 방법
// 1) new Array
// 2) 리터럴 이용

const fruits = new Array("apple", "banana", "kiwi");

const fruits2 = ["cherry", "orange"];

console.log(fruits); // [ 'apple', 'banana', 'kiwi' ]
console.log(fruits2); // [ 'cherry', 'orange' ]

console.log(fruits[1]); // banana
console.log(fruits2[1]); // orange
console.log(fruits.length); // 3
console.log(fruits2.length); // 2
console.log(fruits[fruits.length - 1]); // kiwi, 배열 마지막요소 가져오기
console.log(fruits2[fruits2.length - 1]); // orange

 

// Array
// 배열 요소

const fruits = new Array("apple", "banana", "kiwi");

const fruits2 = ["cherry", "orange"];

console.log(fruits); // [ 'apple', 'banana', 'kiwi' ]
console.log(fruits2); // [ 'cherry', 'orange' ]

console.log(fruits[1]); // banana
console.log(fruits2[1]); // orange
console.log(fruits.length); // 3
console.log(fruits2.length); // 2
console.log(fruits[fruits.length - 1]); // kiwi, 배열 마지막요소 가져오기
console.log(fruits2[fruits2.length - 1]); // orange

 

// 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여
// 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
// 구조분해시 같은 변수(이름) 사용 불가

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: null,
};

const { a, b, d } = obj;
console.log(a); // 1
console.log(b); // 2
console.log(d); // null

const { c } = obj;
console.log(c); // 3

const { e } = obj;
console.log(e); // undefined

// 구조분해 할당시 초기화도 가능
const { f = 5 } = obj;
console.log(f); // 5, obj에 f가 없으니 위에서 초기화된 값이 출력됨

const arr = [1, 2, 3, 4, 5];
const [i, j, ...rest] = arr;
console.log(i); // 1
console.log(j); // 2
console.log(rest); // [ 3, 4, 5 ]

const [i2, j2, ...abc] = arr;
console.log(i2); // 1
console.log(j2); // 2
console.log(abc); // [ 3, 4, 5 ]

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      document.write("<h1>test페이지</h1>");
      document.write("<br />");
      document.write("<button>전송</button>");
    </script>
  </body>
</html>

 

let items = [
  { id: 1, name: "벤치프레스", count: 0 },
  { id: 2, name: "랫풀다운", count: 0 },
  { id: 3, name: "스쿼트", count: 0 },
];

console.log(items);
console.log(items[0].id); // 1
console.log(items[1].id); // 2
console.log(items[2].id); // 3

console.log(items[0].name); // 벤치프레스
console.log(items[0].count); // 0
console.log(++items[0].count); // 1
console.log(++items[0].count); // 2
console.log(items[0].count); // 2

console.log(items[1].name); // 랫풀다운
console.log(items[1].count); // 0

console.log(items[2].name); // 스쿼트

// 운동제목 추가하기 -ES6(ECMAScript2016) arrow function
const handleAdd = () => {
  const workouts = [...items, { id: items.length + 1, name: undefined, count: 0 }];
  console.log(workouts);
  console.log(items);
};
handleAdd();

const handleDelete = (id) => {
  const workouts = items.filter((item) => item.id != id);
  console.log(typeof workouts); // object
  console.log(workouts);
  items = [...workouts]; // 원본도 바꾸기
};
handleDelete(2);
console.log(items); // 원본도 똑같이 바뀜

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Workout 메모</title>
    <link rel="stylesheet" href="./workout.css" />
    <script
      src=""
      crossorigin="anonymous"
    ></script>
    <script>
      let count = 0;
      let items = [
        { id: 1, name: "벤치프레스", count: 0 },
        { id: 2, name: "랫풀다운", count: 0 },
        { id: 3, name: "스쿼트", count: 0 },
      ];

      const handleIncrement = (index) => {
        items[index].count += 1;
        const cnt = document.querySelector(".workout-count" + index);
        // 효과를 주려면 html, 안줘도되면 text
        cnt.innerHTML = items[index].count;
      };

      const handleDecrement = (index) => {
        const count = items[index].count - 1;
        items[index].count = items[index].count <= 0 ? 0 : count;
        // count == 0 ? 0 : (count = count - 1);
        const cnt = document.querySelector(`.workout-count${index}`);
        cnt.innerHTML = items[index].count;
      };

      const handleDelete = (id) => {
        const workouts = items.filter((item) => item.id != id);
        // 스프레드 연산자를 통해 얕은복사됨(주소번지가 넘어감 - 원본이 변경됨)
        items = [...workouts]; // 원본도 바꾸기
        // 만약 filter조건에따라 남은 배열만 출력하면
        console.log(items);
        init();
      };

      const handleAdd = () => {
        const name = document.querySelector(".add-input").value;
        const workouts = [...items, { id: items.length + 1, name, count: 0 }];
        document.querySelector(".add-input").value = "";
        items = [...workouts];
        init();
      };

      const init = () => {
        console.log("init 호출 => " + items.length); // 3
        let lis = "";
        for (let i = 0; i < items.length; i++) {
          lis += `<li class="workout">`;
          lis += `<span class="workout-name">${items[i].name}</span>`;
          lis += `<span class="workout-count${i}">${items[i].count}</span>`;
          lis += `<button class="workout-button workout-increase" onclick="handleIncrement(${i})">`;
          lis += `<i class="fas fa-plus-square"></i>`;
          lis += `</button>`;
          lis += `<button class="workout-button workout-decrease" onClick="handleDecrement('${i}')">`;
          lis += `<i class="fas fa-minus-square"></i>`;
          lis += `</button>`;
          lis += `<button class="workout-button workout-delete" onclick="handleDelete(${items[i].id})">`;
          lis += `<i class="fas fa-trash"></i>`;
          lis += `</button>`;
          lis += `</li>`;
        }
        const ul = document.querySelector(".ul");
        ul.innerHTML = lis;

        const memo = document.querySelector(".h3");
        memo.innerHTML = "운동 메모 " + items.length;
      }; // end of init
    </script>
  </head>
  <body>
    <script>
      window.addEventListener("load", function (event) {
        init();
      });
    </script>
    <h3 class="h3">운동 메모</h3>
    <div class="container">
      <input type="text" class="add-input" placeholder="운동제목" />
      <button class="add-button" onclick="handleAdd()">추가</button>
      <ul class="ul"></ul>
    </div>
  </body>
</html>

 

* {
  box-sizing: border-box;
  /* border: 1px solid red; */
}

button {
  outline: none;
  border: none;
  cursor: pointer;
}

.container {
  padding: 0.5em;
  font-size: 2.5rem; /* 디폴트 16px(루트태그)의 2.5배 -> */
}

.add-input {
  font-size: 2rem;
  margin-right: 0.2em;
}

.add-button {
  height: 100%;
  font-size: 1.5rem;
  padding: 0.3em 0.5em;
  background-color: lightseagreen;
  color: #fff;
}

ul {
  padding-left: 0px;
}

.workout {
  list-style: none;
}

.workout-button {
  font-size: 2.5rem;
  margin: 0 0.1em;
  background-color: transparent;
}

/* 마우스 올렸을 때 hover */
.workout-button:hover {
  opacity: 0.8; /* 투명도 조절 */
}

.workout-increase,
.workout-decrease {
  color: goldenrod;
}

.workout-delete {
  color: darkred;
}

 

let colors = ["red", "green", "blue"]; // 리터널을 이용한 배열 선언 및 초기화

// for in 구문
for (color in colors) {
  console.log(color, ",color :", colors[color]);
}
// 0 ,color : red
// 1 ,color : green
// 2 ,color : blue

// for of 구문
for (color of colors) {
  console.log("color :" + color);
}
// color :red
// color :green
// color :blue

const student = {
  name: "이순신",
  age: 45,
  address: "대전",
};

for (let key in student) {
  console.log(key, ",", student[key]);
  console.log(key + "," + student[key]); // 콤마대신 +를 붙여도 똑같음
}
// name , 이순신
// age , 45
// address , 대전

let items = [
  { id: 1, name: "벤치프레스", count: 0 },
  { id: 2, name: "랫풀다운", count: 0 },
  { id: 3, name: "스쿼트", count: 0 },
];

for (let item of items) {
  console.log("id:", item.id, "name:", item.name, "count:", item.count);
}