</ 5주차 복습 및 정리>

JavaScript 시작하기

• ECMA스크립트란?

  • Ecma International이 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말하며, 자바스크립트를 표준화하기 위해 만들어졌다.

• 데이터 타입 확인

  • typeof를 통해 특정 데이터들이 무슨 타입인지를 알 수 있음. 단 null, object, array객체는 다 object로 정의되서 정확하지는않음.

    console.log(typeof true); // boolean 데이터로 나옴. 

  • getType은 typeof에 비해 더 자세한 타입을 알 수 있음.

    console.log(getType(null)); // null로 표시됨.

• 연산자

  • 산술 연산자

    • 더하기(+), 뺴기(-), 곱하기(*), 나누기(/), 나머지(%)

      ex) console.log(7 % 5) // 나머지 2가 출력됨.

  • 할당 연산자

    let a = 2;

  • 비교 연산자

    • == : '같다'라는 뜻으로 변수 타입과 상관없이 값이 같으면 참이라는 뜻.

      5 == 5 // true
      '5' == 5 // true

    • != : '같지않다'라는 뜻.
    • === : '같다'라는 뜻으로 ==와 달리 변수의 값뿐만 아니라 변수의 타입까지 같아야 참이라는 뜻이다.

      5 === 5 // true
      '5' === 5 // false

    • !== : '같지않다'라는 뜻으로 !=와 달리 변수의 값뿐만 아니라 변수의 타입도 달라야 참이라는 뜻.
    • <(작다), >(크다)
    • <=(작거나 같다), >=(크거나 같다) : =표시는 무조건 꺽쇠 뒤에 와야지 오류가 나지않음.

  • 논리 연산자

    • &&(and연산자): 하나라도 false가 있으면 true가 나올 수 없다.
    • ||(or연산자): 값중에 true가 하나라도 있으면 true가 나옴.
    • !(not연산자): 원하는 값에 반대값이 나옴.

  • 삼항 연산자

    • ? 와 :을 기준으로 3개에 항이 있는 연산자를 뜻한다.

      const j = 1 < 2;
       
       if (a) {
          console.log('참');
       } else {
         console.log('거짓');
       }
      
      console.log(j ? '참' : '거짓');     
      // (조건문 ? '선택문1' : '선택문2');
      조건문은 ? 앞에 적고 
      참일 경우는 :에 앞쪽 선택문이 거짓을 경우는 뒤쪽 선택문이 결과로 나옴.

• 조건문

  • if else: 조건이 두가지일 때 사용.

    const a = random()
    if (a === 0) {
    	console.log('a is 0')
    } else {
    	console.log('rest...')
    }

  • else if: 조건이 여러가지일 때 사용.

    const a = random()
    if (a === 0) {
    console.log('a is 0')
    } else if (a === 2) {
    console.log('a is 2')
    } else if (a === 4) {
    console.log('a is 4')
    } else {
    console.log('rest...')
    }

  • switch: 어떤 값을 가진 대상을 두고 조건값과 일치하는지를 확인하고 동작을 수행할 때 사용.

    const a = random()
    
    switch (a) {
    case 0:
      console.log('a is 0')
      break
    case 2:
      console.log('a is 2')
      break
    case 4:
      console.log('a is 4')
      break
    default: 
      console.log('rest...')
    }

    ※ 하나에 case가 끝나면 꼭 break를 넣어줘야하며 default 뒤에는 break를 안 써도된다.
    

• 반복문

  • for (시작조건; 종료조건(조건이 false가 되는 순간 종료.); 변화조건) {}

  const ulEl = document.querySelector('ul')
  
    for (let i = 0; i < 10; i += 1) {
      const li = document.createElement('li')
          li.textContent = `list-${i + 1}`
          if ((i + 1) % 2 === 0) {
          li.addEventListener('click', function () {
            console.log(li.textContent)
         })
      }
     ulEl.appendChild(li)
    }

• 변수 유효범위(var, let, const)

  • var 사용을 권장하지 않는 이유는 함수레벨 유효범위에 있어서 의도하지않은 범위에서도 사용가능하기때문에 메모리누수가 발생하기 때문이다.

• 형(데이터타입을 의미) 변환

  • Truthy(참과 같은 값): true, {}, [], 1, 2, 'false', -12, '3.14' ...
  • Falsy(거짓과 같은 값): false, '', null, undefined, 0, -0, NaN

  const a = 1;
  const b = '1';
  
  console.log(a === b);
  // 값은 false가 나온다.

  ※ truthy값은 너무 많기 때문에 falsy값을 외워두는게 좋음.

• 함수

  • 화살표함수: () => {}에 형태로 작성한다. 일부 내용들을 축약해서 작성하는것이기 때문에 일반함수보다 간단하게 작성이 가능하다.

    const dobleArrow = x => true
    console.log('doubleArrow', doubleArrow())
    // 결과로 true가 나온다.

    • 만약 화살표함수로 객체데이터를 적고싶다면 소괄호를 넣어서 작성하면된다.

      const doubleArrow = x => ({name: 'Hello world!'})
      console.log('doubleArrow', doubleArrow())
      // {name: 'Hello World!'}가 출력됨.

  • 즉시 실행 함수(IIFE): 함수를 정의하자마자 바로 호출하는 함수를 뜻한다.

    // 기명 즉시 실행 함수
    (function a(x) {
    	console.log(x * x);
    })(2);
    
    (function a(x) {
    	console.log(x * x)
    }(2)); // 두번째 방법을 더 선호함.

    // 익명 즉시 실행 함수
    (function (x) {
    	console.log(x * x);
    })(2);
    
    (function (x) {
    	console.log(x * x);
    }(2));

    ※ 즉시 실행 함수를 사용할 때 앞쪽에 함수가 있다면 꼭 세미클론을 넣어줘야함!

  • 호이스팅: 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 말한다.

    • var 변수 선언과 함수선언문에서만 호이스팅이 발생한다.

  • 타이머 함수

    • setTimeout(함수, 시간): 일정 시간 후 함수 실행

    • setInterval(함수, 시간): 시간 간격마다 함수 실행

    • clearTimeout(): 설정된 Timeout 함수를 종료

    • clearInterval(): 설정된 Interval 함수를 종료
      => setTimeout이나 setInterval은 화살표함수를 사용하는게 좋음.

      // 예시
      const timer = setInterval(() => {
      	console.log('Heropy!')
      }, 3000)
      
      const h1El = document.querySelector('h1')
      h1El.addEventListener('click', () => {
      	clearInterval(timer)
      })

  • 콜백(Callback): 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수, 함수의 인수로 사용되는 함수를 뜻한다.

• Class(클래스)

  • 생성자 함수(prototype): 객체의 인스턴스를 생성하는 함수를 말한다

    function User(name) {
    	this.name = name 
    }
    User.prototype.normal = function () {
    	console.log(this.name)
    }
    User.prototype.arrow = () => {
    	console.log(this.arrow)
    }
    
    const heropy = new User('Heropy')
    
    heropy.normal()
    heropy.arrow()

    ※ 생성자함수를 만들때는 암묵적으로 함수이름을 파스칼케이스(앞쪽이 대문자인거)로 만드는경우가 많다.

  • this

    • 일반함수는 호출위치에 따라 this를 정의
    • 화살표함수는 자신이 선언된 함수 범위에서 this를 정의

  • class 상속(확장): 생성된 class의 메소드 등의 기능을 유지하면서 새로운 기능을 추가할 때 새로운 클래스를 생성하면서 이전 클래스의 기능을 가져오는 개념을 말한다.
    => class 클래스명 extends 부모클래스명 {}

    class Vehicle {
       constructor(name, wheel) {
       this.name = name
       this.wheel = wheel
      }
    }
    const myVehicle = new Vehicle('운송수단', 2)
    console.log(myVehicle)
    
    class Bicycle extends Vehicle { // extends는 확장(=상속)이라는 의미
    	constructor(name, wheel) {
        super(name, wheel) // super는 Vehicle을 의미
     }
    }
    const myBicycle = new Bicycle('삼천리', 2)
    const daughtersBicycle = new Bicycle('세발', 3)
    console.log(myBicycle)
    console.log(daughtersBicycle)

</ 5주차를 마치며>

국비교육수업을 받을때 듣지못해던 개념들을 알 수 있어서 좋았고 쉽게 자세히 설명해주셔서 좋았다. 하지만 역시 자바스크립트는 HTML과 CSS랑 너무 다르다는 것을 느꼈다. 열심히 복습을 하고 공부를 해야할 것 같다.