[UMC]JavaScript

Web 3주차 워크북

UMC notion

📝 실습 체크리스트

• [ ]

🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)

• 트러블 슈팅 양식 [ 문제 원인 ] [ 해결 방안 ] [ 참고 자료 ]

핵심 키워드 🎯

• JavaScript
  • ES6 ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다. ES6는 아래의 새로운 기능들을 포함하고 있습니다.
    • const and let
    • Arrow functions(화살표 함수)
    • Template Literals(템플릿 리터럴)
    • Default parameters(기본 매개 변수)
    • Array and object destructing(배열 및 객체 비구조화)
    • Import and export(가져오기 및 내보내기)
    • Promises(프로미스)
    • Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
    • Classes(클래스)

• JavaScript 문법

  • 변수 : 선언, 초기화, 재할당 let은 변수에 재할당이 가능 const는 변수 재선언, 재할당 모두 불가능

  • 데이터 타입

    1. string : 문자열
    2. number : 숫자
    3. bigInt : 큰 값이 숫자
    4. boolean : true, false
    5. symbol : 중복되지 않은 고유값
    6. null : 수동(개발자가 의도적으로 =null을 선언해야함)
    7. undefined : 자동(변수에 값을 넣지 않았을 때)
    8. object : 객체 - 함수, 배열, 객체

  • 연산자

    1. 산술연산자 : +, -, /, *, %, **
    2. 할당 연산자 : =
    3. 문자열 연산자 : +
    4. 비교 연산자 : ==, ===(데이터 타입까지 맞는지), !=, !==, >, >=, <, <=
    5. 논리 연산자 : &&, ||, !
  • 배열
    • 선언
      1. const travel_spot = [‘방콕’, ‘뉴욕’, ‘파리’];
      2. const travel_spot = new Array(‘방콕’, ‘뉴욕’, ‘파리’);
      3. const travel_spot = new Array();
         travel_spot[0] = ‘방콕’;
         travel_spot[1] = ‘뉴욕’;
         travel_spot[2] = ‘파리’;
    • 접근
      const paris = travel_spot[2];
    • 추가 및 삭제
      1. 뒤에서 추가
         travel_spot.push(‘토론토’, ‘퀘백’);
      2. 앞에서 추가
         travel_spot.unshift(‘바르셀로나’);
      3. 원하는 지점에 추가 및 삭제
         splice(시작 index, 삭제하고 싶은 원소의 개수, 추가하고 싶은 원소들)
         travel_spot.splice(4, 0, ‘멜버른’, ‘아테네’);
      4. 뒤에서 원소 삭제
         travel_spot.pop();
      5. 앞에서 원소 삭제
         travel_spot.shift();
      6. 원하는 원소 삭제
         splice(시작 index, 삭제하고 싶은 원소의 개수)
         travel_spot.splice(3, 3);

  • 객체

    • 선언

    const obj = new Object({ name: "dwell" });
    
    const pooh = {
      name: "pooh",
      species: "bear",
      job: "disney character",
      gender: "boy",
      "say-Hi": function () {
        console.log("I'm winnie the pooh, What's your name?");
      },
    };
    

    • 접근

      1. pooh.species;
      2. pooh[‘species’];
      3. pooh[ ‘say-Hi’ ] ();

    • 추가 및 삭제

      1. 추가 : pooh.favorites = [‘honey’, ‘friends’, ‘cake’];
         pooh[‘say-Bye’] = function() {console.log(“I’m winnie the pooh, See you later”);};
      2. 삭제 : delete pooh.favorites;
    • 생성자 함수

      function Character(name, species, job, gender) {
        this.name = name;
        this.species = species;
        this.job = job;
        this.gender = gender;
        this[say - Hi] = function () {
          console.log("I'm " + [this.name] + ", What's your name?");
        };
        this["say-Bye"] = function () {
          console.log("I'm $(this.name), See you later");
        };
      }
      

    • 객체 생성

      const winnie_the_pooh = new Character(
        "winnie the pooh",
        "bear",
        "disney character",
        "boy"
      );
      const snoopy = new Character(
        "snoopy",
        "dog",
        "comic book character",
        "boy"
      );
      const pikachu = new Character(
        "pikachu",
        "squirrel",
        "pokemon character",
        "boy"
      );
      

  • 함수
    • 일반 함수

      function multiply10(num) {
        const result = num * 10;
        return result;
      }
      multyply10(10);
      

    • arrow function

      function multiply10 = num => num * 10;
      

  • 조건문
    • if문

      if (age > 19) {
        console.log("성인");
      } else {
        console.log("미성년자");
      }
      

    • 삼항연산자

      age > 19 ? console.log("성인") : console.log("미성년자");
      

    • switch문

      switch (age) {
        case 10:
          console.log("10대");
          break;
        case 20:
          console.log("20대");
          break;
        default:
          console.log("어른");
      }
      

  • 반복문
    • for문

      const numArr = [45, 32, 11, 98, 22];
      for (let i = 0; i < numArr.length; i++) {
        numArr[i] += 10;
      }
      

    • while문

      let i = 0;
      while (i < numArr.length) {
        numArr[i] += 10;
        i++;
      }
      

    • do-while문

      let i = 0;
      do {
        numArr[i] += 10;
        i++;
      } while (i < numArr.length);
      

3주차 수업 후기 📢

• 3주차 수업을 듣고 서로 느낀 점을 이야기해주세요! 4/02 (토요일)
  [과제 1] : 메가박스 클론 실습
  ( https://stonefree.tistory.com/93
  해당 링크에서 “사이트 만들기” 참고)
  -> 4/13 (수) 까지 (배너까지 구현 목표)
  -> 깃허브 주소를 활용할 예정이니 각자의 깃헙 주소를 올려주시면 감사하겠습니다:)

---

[공지 1] : 시험기간 전까지는 디스코드로 스터디가 진행되고 시험 기간 이후 오프라인 스터디 예정

---

[공지 2] : 차후 스터디는 수요일로 예정이며 다음주 수요일(4/6)만 13시에 스터디 진행 (다음 주차 강의 - DOM - 에 대한 스터디 진행)

!주의사항

1. 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
2. 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다

논의해보면 좋은 것들 🔥

• JavaScript를 이용한 서비스들에 대해 알아보세요! (Web, App, Blockchain etc)
• JavaScript의 장점과 단점
  • 더 알고 싶다면 TypeScript의 등장에 대해서 얘기 나눠보세요!