동적타입

javascript는 느슨한 동적언어이다.

자바스크립트의 변수는 어떤 특정한 타입과 연결되지않으며 모든타입의 값으로 할당 가능합니다.

컴파일을 하지않는다.

컴파일을 한다는것은 타입체크를 한다는 뜻이다.

자바스크립트는 타입체크를 하지 않는다.

어떤 타입을 넣어도 다 들어간다.

함수도 객체취급을 받는다.

변수선언시에 함수도 객체취급을 받는다.

const(변수선언하는거)

자바스크립트에서 함수는 객체이다.

var는 쓰지마라. const나 let으로 바꾸어서 사용한다.

JavaScript 의 타입

Boolean 타입

Null 타입

Undefined타입

Number

BigInt

String

Symbol

원시형 타입에서 문자열이면 트루이다.

//참 거짓
//<<<<<거짓6가지>>>>>>>>
//1)false
//2)0---0은 거짓이다.{}:Object=>true,[]:Array=>true
//3)null
//4)undefined
//5)NaN-->not a number
//6)"빈문자열"

instanceOf 자바에서처럼

저버스크립트는 typeof로 타입을 확인한다.

유효성 검사할때 사용한다.

const 는 상수이다. java의

nodemon사용하기

nodemon은 자동으로 재시작해주는 모듈이다.

    npm install -g nodemon
    설치하기
    :--save-dev옵션붙이면 로컬에서만 가능함

cd week2/1.원시형

node run start

node main

경로 바꾸기

메인에서 결과값이 터미널에 찍힌다.

setTimeout()

자바스크립트에서 값만 비교하고싶으면 ==

타입도 같이 비교하고 싶으면 === 세개를 쓴다.

자바스크립트에서는 메소드 오버로딩 오버라이딩 없다.

//데이터 타입

const a = 5;

console.log(typeof a);

console.log(typeof "이순신" == "string");
console.log(typeof a == "number");
console.log(typeof undefined == "undefined");
console.log(typeof null == "object");
console.log(typeof true == "boolean");
console.log(typeof [] == "object"); //대괄호- 배열
console.log(typeof {} == "object"); //좌중괄호 우중괄호-객체
console.log(typeof function () {} == "function"); //좌중괄호 우중괄호-객체

function methodA() {
  console.log("methodA");
}
methodA();
console.log(methodA);

console.log([].constructor === Array); //배열을 .constructor로 생성한것이다.
console.log({}.constructor === Object);
// console.log(null.constructor === Object); null로 체크할 수 없어
console.log(Object.prototype.toString.call(null).slice(8, -1) === "Null");

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

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

console.log(checkType(null));
console.log(checkType(undefined));
console.log(checkType("강감찬"));
console.log(checkType2(null));
console.log(checkType2(undefined));
console.log(checkType2("강감찬"));

삼항연산자

단순한 if문일 경우 라인수를 획기적으로 줄여주는 방식이 있습니다. 바로 삼항 연산자라는 것인데요. 이번 포스팅에서는 삼항 연산자의 사용법에 대해 알아보도록 하겠습니다.

삼항 연산자의 예를 가볍게 들어보겠습니다. 위와 같은 경우 괄호 안의 조건문이 참일 경우 int a에 50이 담기게 되고 거짓일 경우에는 40이 담기게 되는 코드입니다. 삼항 연산자는 (조건문) : ? 참 : 거짓이라는 문법을 가지게 됩니다.

출처 : https://coding-factory.tistory.com/266

[Java] 삼항연산자 사용법 & 예제

if문을 사용하여 코딩을 할 경우 코드 라인이 의미 없이 길어지는 경우들이 종종 생깁니다. if(){ }else if(){ } 이렇게만 해도 벌써 5라인이죠. 하지만 단순한 if문일 경우 라인수를 획기적으로 줄여

coding-factory.tistory.com

※ 주의사항

1. 삼항 연산자를 사용하여 코드의 라인이 줄어들었다고 컴파일 속도가 빨라지는 것은 아닙니다.

2. 삼항 연산자를 중복해서 처리할 경우. 가독성이 떨어질 수 있으므로 중복처리는 피하는 것이 좋습니다.

Nullish coalescing operator

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

이는 왼쪽 피연산자가 null 또는 undefined 뿐만 아니라 *falsy *값에 해당할 경우 오른쪽 피연산자를 반환하는 논리 연산자 OR (||)와는 대조된다. 다시 말해 만약 어떤 변수 foo에게 *falsy *값( '' 또는 0)을 포함한 값을 제공하기 위해 ||을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

Nullish coalescing operator - JavaScript | MDN

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

developer.mozilla.org

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

해체하는것

react에서 쓸것이다.

배열이나 개체의 속성을 해체해야한다.

개별변수에 담을 수 있도록 한다.

자주 등장하는 문법이다.

Workout Tracker 만들기

WorkOut Tracker

운동메모

<!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 Tracker</title>
    <script
      src="https://kit.fontawesome.com/15ade8f86a.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="./workout.css" />
  </head>
  <script> //자바스크립트를 넣어준거다....
    /* +,-아이콘 눌렀을때 숫자가 올라가게 만들고 싶다. */
    let count = 0;
    let items = [
      { id: 1, name: "벤치프레스", count: 0 },
      { id: 2, name: "렛풀다운", count: 0 },
      { id: 3, name: "스쿼트", count: 0 },
    ];

    const handleIncrement = (index) => {
      //arrow function
      items[index].count += 1;
      // count = items[index].count + 1;
      const cnt = document.querySelector(`.workout-count${index}`);
      cnt.innerHTML = items[index].count;
    };
    const handleDecrement = (index) => {
      const count = items[index].count - 1;
      items[index].count = count <= 0 ? 0 : count;
      const cnt = document.querySelector(`.workout-count${index}`);
      cnt.innerHTML = items[index].count;
    };
    const handleDelete = (id) => {
      const workouts = items.filter((item) => item.id != id);
      console.log(workouts);
      //스프레드 연산자를 통해 얕은 복사됨-주소번지-원본이 변경된다.
      items = [...workouts];
      //만일 필터조건에 따라 남은 배열만 출력하면
      console.log(items);
      init();
    };

    const handleAdd = () => {
      // const workouts = [
      //   ...items,
      //   {
      //     id: items.length + 1,
      //     name: document.querySelector(".add-input").value,
      //     /* document라는 애 안에 querySelector가 있어
      //     화면의 요소 하나를 가져오는애다.
      //     ()안에 반드시 ''을 찍어줘야한다. */
      //     count: 0,
      //   },
      // ];

      const name = document.querySelector(".add-input").value;
      const workouts = [
        ...items,
        { id: items.length + 1, name: name, count: 0 },
      ];
      document.querySelector(".add-input").value = ""; //추가 후 텍스필드 초기화
      items = [...workouts];
      console.log(workouts); //초기화를 해줌
      console.log(items);
      init();
    };

    const init = () => {
      console.log("init 호출=>" + items.length); //3
      let lis = "";
      for (let i = 0; i < items.length; i++) {
        let count = i;
        lis += "<button>" + i + "</button>";
        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(".memo");
      memo.innerHTML = "운동메모 : " + items.length;
    };
  </script>
  <body>
    <script>
      <!-- 처음 열때 로드해라 -->
      window.addEventListener("load", function (event) {
        init();
        console.log("all resource");
      });
    </script>
    <h3 class="memo">운동메모</h3>
    <div class="container">
      <input type="text" class="add-input" />
      <button class="add-button" onclick="handleAdd()">추가</button>
      <ul class="ul"></ul>
    </div>
  </body>
</html>

* {
  box-sizing: border-box; /* 전체 크기계산 용이하다 */
  /* border: 1px solid #ff0000; */
}
ul {
  padding-left: 0;
}
button {
  /* outline: none; */
  border: none;
  cursor: pointer;
}

.container {
  padding: 0.5em;
  font-size: 2.5rem; /* 디폴트가 16이다 */
}

.add-input {
  font-size: 2rem; /* 32px 디폴트가 16*/
  margin-right: 0.2em; /* 시계방향 */
}

.add-button {
  height: 100%;
  font-size: 1.5rem;
  padding:0.3em 0.5em;
  background-color: cornflowerblue;
  color: aliceblue;

}

.workout {
  list-style: none;
}

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

.workout-button:hover {
  /*갖다댔을때 투명해지기*/
  opacity: 0.5;
}

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

.workout-delete {
  color: darkred;
}

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

...

스프레드 연산자.

Spread Operator 기본 문법

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다.

https://paperblock.tistory.com/62

[ES6] Spread Operator (스프레드 연산자)

ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내

paperblock.tistory.com

스프레드 연산자는 얕은 복사 할때 쓴다.

얕은 복사는 원본을 바꾼다.

깊은 복사는 새로운 객체를 생성한다.

✅ 배열 복사 (Copying Arrays)

JavaScript에서 배열을 새로운 변수에 할당하는 경우 새로운 배열은 기존 배열을 참조합니다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경됩니다.

// 단순 변수 할당
var arr1 = ['철수','영희']; 
var arr2 = arr1; 

arr2.push('바둑이'); 
console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열도 변경됩니다.
console.log(arr1); // [ "철수", "영희", "바둑이" ]

JavaScript

https://yong-nyong.tistory.com/9

[JavaScript] 자바스크립트 반복문 for문의 종류(for, for in, for of, forEach)

📖 들어가며 이렇게 자바스크립트의 for문의 종류에 대한 글을 정리하는 이유는 현재 나중에 취업을 위한 코딩 테스트 알고리즘을 자바스크립트로 준비하면서 for문을 작성할 때가 많은데, 공부

yong-nyong.tistory.com

'학원수업 > 1월' 카테고리의 다른 글

01/27 국비학원 43회차 JavaScript수업 (DOM모델, This ) (1)	2023.01.27
01/26 국비학원 42회차수업 JavaScript (호이스팅, 함수, css) (1)	2023.01.26
01/20 국비학원 40회차 수업 MyBatist, Tomcat, Gson (0)	2023.01.22
01/19 국비학원 39회차 HTML, CSS, JS (1)	2023.01.19
01/18 국비학원 38회차 HTML수업 (0)	2023.01.18

시작이 좋아

01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자)

동적타입

JavaScript 의 타입

nodemon사용하기

삼항연산자

Nullish coalescing operator

구조 분해 할당

Workout Tracker 만들기

운동메모

Array.prototype.filter()

Spread Operator 기본 문법

✅ 배열 복사 (Copying Arrays)

'학원수업 > 1월' 카테고리의 다른 글

댓글

티스토리툴바

01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자)

동적타입

JavaScript 의 타입

nodemon사용하기

삼항연산자

Nullish coalescing operator

구조 분해 할당

Workout Tracker 만들기

운동메모

Array.prototype.filter()

Spread Operator 기본 문법

✅ 배열 복사 (Copying Arrays)

'학원수업 > 1월' 카테고리의 다른 글

관련글

댓글

티스토리툴바