끄적

2022.04.28

While문과 For문

loop(반복문)을 사용하면 동일한 코드를 여러번 반복할 수 있음

while문

while(condition) {
  // 코드
  // '반복문 본문(body)'라 불림
  // condition이 truthy면 코드가 실행됨
  // 조건이 falsy가 되면 반복문은 멈춤
}

let i = 0;
while (i < 3) {
  console.log(i) //0 1 2 출력
  i++
}
조건문이 한줄이면 대괄호{} 생략가능
while (i < 3) console.log(i++)

반복문 안에는 비교뿐만 아니라 모든 종료의 표현식, 변수가 올 수 있음

do.. while 반복문

do {
  반복문 본문
} while (condition);
본문이 먼저!(truthy여부와 상관없이 최소한 한번이라도 실행하고 싶을때만 사용

let i = 0;
do {
  console.log( i ) //0 1 2 출력
  i++
} while(i < 3)

for 반복문

for(초기화; 종료; 변화)
초기화: 반복문 진입할때 단 한 번 실행
종료: 반복마다 해당 조건확인. false면 멈춤
변화: 각 반복의 body부분이 실행된 이후 실행됨

• for of배열 데이터를 반복할때 쓴다 (Object 해당 x)
• for in객체 (key값에는 접근 가능, value값에는 직접접근불가능, 배열에서는 index값
  for in문은 순서 보장되지 않음, legnth연산자 사용불가, value값은 string이라 연산 불가능

for (let i = 0; i < 3; i++) {
  console.log(i) //0 1 2 출력
}
'카운터'변수 `i`를 반복문 안에서 선언= 인라인 변수 선언으로 선언한 변수는 반복문 안에서만 접근가능
인라인 변수 선언 대신, 정의되어있는 변수를 사용할 수 있음
let i = 0;
for (i = 0; i < 3; i++) {
  console.log(i) // 0 1 2
}
console.log(i) // 3
for문 begin(초기화)부분, (step)변화부분 생략가능 단, 생략시 세미콜론(;) 꼭 넣어줘야함

반복문 빠져나오기

반복문은 대개 falsy가 되면 종료
break를 쓰면 언제든 빠져나올 수 있음(본문 가운데 똔느 본문 여려곳에서 조건을 확인해야 하는 경우, '무한반복문+break'조합사용)

다음 반복문 넘어가기

countinue는 전체 반복문을 멈추지는 않지만 현재 실행중인 iteration을 멈추고 다음 iteration을 강제 실행(조건을 통과할 시)

!break, continue는 삼항 연산자에는 사용 할 수 없다

!break, continue는 반목문 안에서만 사용 가능, 레이블은 반드시 break, continue 위에 있어야 함

중첩 반목문을 한번에 빠져나와야 할때

레이블(lable): for(...) {...}
레이블로 시작해 break(lableName)을 붙여주면 헤이블에 해당하는 반복문을 빠져나올 수 있음

let num;

do {
  num = prompt('100을 초과하는 숫자를 입력하세요', 0)
} while (num <= 100 && num)

(num <= 100 && num) num가 <= 100인지 확인. num가 null이나 빈 문자열이면 && num이 거짓이 되므로 while반복문 종료

2022.04.27

Javascript Date

const date = new Date()
console.log(date.getFullYear())
console.log(date.getMonth()) // +1
console.log(date.getDate()) 
console.log(date.getHours()) 
console.log(date.getMinutes()) 
console.log(date.getSeconds())

// 날짜출력방법
const res = `${year}.${month}.${day}`; //년.원.일 변수 res로
const today = document.querySelector('.date'); //data클래스
today.textContent = res;

2022.04.22

JavaScript 화살표함수와 this

화살표 함수

일반함수
const hello = function () {}
화살표함수
const hello() = {} => {}
// 화살표함수 is 익명함수
// 함수표현식(어딘가할당하고있기때문에)이기때문에 호이스팅 발생 안해요

화살표 함수가 왜 나왔을까??

1. 간소화가능 (패턴3가지)

   1. return키워드로 먼저시작할때 중괄호와 return 생략가능
      반환할데이터 어떤것이든 쓸 수 있다(원시형, 참조형)

      const hello = () => {  
       return 'Hello'
      }
      
      const hello = () => 'Hello'
      console.log(hello())

      단, 객체타입은 const hello = () => {}
      객체리터럴 중괄호와 기존 코드블록과 겹치기 때문에 소괄호로 감싸준다

      const hello = () => ({})  
      console.log(hello()) //undefined
      
      function hello(a, b) {
      return {
         a: a,
         b: b
         //key:a와 value:a에 사용된 변수이름이 같으면
         a,
         b
         }
      }
      
      function hello(a, b) {
      return {a, b} 
      }
      
      const hello = (a, b) => ({a, b})

   2. const hello = () => {
       console.log('Hello')
      }
      //콘솔이라는 객체안에 로그라는 함수가 있는데 
      //콘솔이라는 객체를 통해 실행되는 함수를 '메소드'라부름
      const hello = () => console.log('Hello')
      hello()

   3. //매개변수가 하나일때 소괄호를 생략할 수 있다(두개이상일때는 소괄호 필수)
      function hello(hi) {
      return `Hello ${hi)`
      }
      const hello = (hi) => `Hello ${hi}`
      
      const hello = hi => `Hello ${hi}`

2. this
   가장큰이유! 바로 this 때문에

   console.log(this) //Window ......
   윈도우객체는 전역개체(Global 어디서든지 접근가능한)이자 최상위 객체

   var sunny = 'SUNNY' // console창에 sunny쳐야 나옴
   전역변수

   런타임 runtime 브라우저가 동작하는. 실제로 뭔가 돌아가고있는환경
   스코프(scope): 유효하게 동작하는범위

일반 또는 화살표 함수에서 정의가 다르다

const user = {
  name: 'Sunny',
  age: 92,
  email: 'ababab@gmail.com',
  phone: '01011112222',
  // 객체데이터에 property(속성)=key+value
  //메소드 속성에 함수가 있어? 그러면 메소드라불러요
  getName: function () {
    return [user.name, user.age]
}

console.log(user.getName()) // ['Sunny', 92]

객체이름을 직접참조를 하면은 객체이름이 바뀔때마다
문제가 생기가 되기때문에 유연한 `this`로바꿔준다
const user = {
  name: 'Sunny',
  age: 92,
  getName: function () {
    return [this.name, this.age]
}

• 일반 함수에서 this키워드는 호출되는 위치에서 정의됨

//일반함수 this는 호출할때 적용된다
const jessi = {
  name: 'Jessi',
  age: 35
}
console.log(user.getName.call(jessi))

const userA = {
  name: 'A',
  age: 92,
  getAge: function () {
    return this.age
  }
}

const userB = {
  name: 'B',
  age: 83,
  getAge: function () {
    return this.age
  }
}

console.log(userA.getAge) //92
console.log(userB.getAge) //83
//call, apply = 호출용
//call은 앞에기능을 빌려줘, 특정객체가 가지고있지 않은 기능을 빌려서 씀
console.log(userB.getAge.call(userA)) //92
console.log(userB.getAge.apply(userA)) //92

• 화살표 함수에서 this키워드는 자신이 선언된 함수(렉시컬) 범위에서 정의된다
  콜백에서 this를 쓴다면 화살표 함수를

const userA = {
  isValid: true,
  age: 92,
  getAge: function () {
    setTimeout(function () {
      console.log(this.age)
    }, 1000)
  }
}
userA.getAge() // undefined seTimeout안에서 호출됐기때문에

const userA = {
  isValid: true,
  age: 92,
  getAge: function () {
    setTimeout( () => {
      console.log(this.age)
    }, 1000)
  }
}
userA.getAge() // 92

끄적...

함수
function hello() {
//무언가를 호출할때는 항상 흔적을 남긴다
//hello()를 호출할건데 return키워드가 없으면 undefined 나온다
//'hello'라는 문자데이터을 반환할건데 호출할곳에 흔적데이터로 남게된다
//이제 데이터로 출력만 하면 된다!
}
hello()`

22.04.20

export(내보내기)

함수, 객체 원시 값을 내보낼 때 사용.
HTML안에 작성한 script에서는 사용할 수 없음
use strict의 존재 유무와 상관없이 무조건 엄격 모드

// 배열
export let fruits = ['apple','banana', 'orange']
// 상수
export const year = 2022

// 선언부와 export가 떨어져 있어도 내보내기 가능
export{fruits, year}
// fruits를 hi로 year을 hello로 이름을 바꿔서 가져오고 싶을때
export {fruits as hi, year as hello}

export default: 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타냄

// getRandom.js
export default function random () {
  return Math.floor( Math.random() * 10 )
}

import(가져오기)

export로 내보낸 값을 가져올때 사용. 무언갈 가져오고 싶다면 import {...} 안에 적어주면 됨

// main.js파일에 가져오고싶을때
import {fruits. year} from './main.js';
// fruits를 hi로 year을 hello로 이름을 바꿔서 가져오고 싶을때
import {fruits as hi, year as hello} from './main.js';

// export default로 가져오기
// getRandom.js에서 main.js로
import random from './getRandom'

2022.04.07

표기법

1. dash-case(kebab-case): 대시기호를 사용해 띄어쓰기를 대신함. 주로 html, css에서 사용
2. snake_case: 언더바로 구분 주로 html, css에서 사용
3. camelCase(낙타표기법): 주로 js에서 사용
4. PascalCase: 가장 앞에있는단어도 대문자. 주로 js
5. Zero-based Numbering: 0기반 번호 매기기. 특수한 경우를 제외하고 0부터 숫자시작

• 데이터 종류(자료형)

  • String(문자 데이터). 따옴표를 사용

    let myName = "SUNNY"; --> 큰따옴표 사용 
    let email = 'email@email.com'; --> 따옴표 사용 
    let hello = `Hello ${myName}-->보간법!`; --> 백틱을 사용하게 되면 보간법 사용 가능 
    console.log(hello); --> Hello SUNNY!

  • Number(숫자 데이터). 정수 및 부동소수점 숫자를 나타냄

    let number = 123; 
    let opacity = 1.57 --> 부동 소수점

  • Boolean(불린 데이터). true, false 두가지값에 없는 논리 데이터
  • Undefined(값이 할당되지 않은 상태)

    let undef; --> js는 undefined라는 하나의 값이 있는 상태로 인식함 
    let obj = { abc: 123 }; -->객체 데이터. abc라는 속성안에 123라는 값을 넣어줌

  • null(어떤 값이 의도적으로 비어있음을 의미함)

    null과 undefined : 무언가가 없다는건 같지만 의도적이냐 아니냐에 따라 구분되어진다

  • Object(객체 데이터). 여러 데이터를 Key:Value 형태로 저장 {} 중괄호 사용

    let user = { 
    //key: Value, 
    name: 'Sunny', 
    age: 92, 
    isValid: true }; 
    console.log(user.age); //92

  • Array(배열 데이터). 여러 데이터를 순차적으로 저장 [] 대괄호 사용

• 변수
  데이터를 저장하고 참조(사용)하는 데이터의 이름
  let, const, var
  변수는 재사용 가능
  let = 값(데이터)의 재할당 가능
  const = 값(데이터)의 재할당 불가능

• 예약어
  특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
  this, if, break ... --> SyntaxError

• 함수
  특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
  function

  1.  // 함수 선언
      function hellFunc() { 
      // 실행 코드 
      } 
      // 함수 호출 
      hellFunc();
  
  2.  // returnFunc()라는 함수가 return 123을 반환하고, 
      // a라는 변수가 returnFunc()함수를 호출(실행)해서 console.log를 출력함
      function returnFunc() { 
      return 123; 
      } 
      let a = returnFunc(); //console.log(a);
  
  3.  // 함수 선언!
      function sum(a, b) { //a와 b는 매개변수 (Parameters) 
      return a + b; 
      } 
      //재사용 
      let a = sum(1, 2) // 1과 2는 인수 (Arguments) 
  
      console.log(a); // 3
  
  4.  // 기명(이름이 있는)함수
      //함수 선언
      function hello() {
        console.log(123);
      }
      hello(); // 123
  
  5.  //익명(이름이 없는)함수. 이름은 선언하지 않았기 때문에 호출을 할 수 없어서 변수와 함께 사용
      //함수 표현
      let num = function () {
        console.log(456);
      }
      num(); // 456
  
  6.  //객체 데이터
      const sunny { 
        name: 'Yu', 
        age: 92, 
        //메소드(method) 
        //객체데이더 내부의 속성에 함수가 할당되어 있는것. 
        //함수를 데이터 처럼 표현할 수 있다 
        getName: function () { 
        return this.name; 
        // this란 this가 소속되 있는 객체데이터 
        } 
      }; 
      console.log(sunny.getName()); // Yu

• 조건문
  조건의 결과에 따라 다른 코드를 실행하는 구문

  if, else 
  let isShow = true; 
  let checked = false; 
  //if 
  if(isShow) { 
  console.log('wow'); // wow 
  } 
  if(checked) {
  console.log('yeah'); // 
  } 
  //else 
  if(checked) { 
  console.log('wow'); 
  } else { 
  console.log('yeah'); 
  } //yeah

• DOM API
  자바스크립트에서 HTML을 제어하기위한 명령들
  Document Object Model(HTML의 div, span, input ...),
  Application Programming Interface(애플리캐이션이 동작하기 위한 명령)

  // HTML 요소 (Element) 1개 검색/찾기
  const boxEl = document.querySelector('.box');
  // HTML 요소에 적용할 수 있는 메소드
  boxEl.addEventListener(); --> 인수(Arguments) 추가 가능
  // 핸들러(handler, 실행할 함수)
  -> boxEl.addEventListener('click', function(){
    console.log('wow');
  })
  // 요소의 클래스 정보 객체 활용
  boxEl.classList.add('active');
  let isContains = boxEl.classList.contains('active');
  console.log(isContains); // true
  boxEl.classList.remove('active');
  let isContains = boxEl.classList.contains('remove');
  console.log(isContains); // false
  
  // HTML 요소(Element) 모두 검색/찾기
  const boxEls = document.querySelectorAll('.box');
  // forEach 찾은 요소들 반복해서 함수 실행
  // 익명 함수를 인수로 추가
  // boxEls --> 유사배열
  // boxEl: 반복 중인 요소, index: 반복 중인 번호
  boxEls.forEach(function (boxEl, index){
    boxEl.classList.add(`order-${index + 1}`);
    console.log(index, boxEl);
  }) 
  
  const boxEl = document.querySelector('.box');
  // Getter, 값을 얻는 용도
  console.log(boxEl.textContent);
  // Setter, 값을 지정하는 용도
  boxEl.textContent = 'Sunny';
  console.log(boxEl.textContent);

• 메소드 체이닝
  여러 메소드를 이어서 호출하는 문법
  코드가 간결해져 하나의 문장처럼 읽히게 할 수 있고, 유지보수에 도움이 됨

  const a = 'hell'; 
  const b = a.split('').reverse().join(''); 
  // 메소드 체이닝 
  // split: 문자를 인수 기준으로 쪼개서 배열로 변환 
  // reverse: 배열을 뒤집기 
  // join: 배열을 인수 기준으로 문자로 병합해 반환 
  console.log(b) // lleh