수업일지 36일차 (23/11/9)

---

 

수업내용 정리 (VSCode - JS)

 

1. 산술/할당 연산자

    <script>
        // 산술 연산자
        console.log(1+2);
        console.log(parseInt(10/3));
        console.log(10%3);

        let a;
        a+=1;
        console.log(a); //NaN: 숫자가 아님

        a=2;
        a+=1;
        console.log(a);

        
        // 비교연산자
        const b=1;  // final int b=1;
        const c=3;  // final int c=3;
        console.log(b<c);

        function isEqual(x,y){
            return x==y;
        }
        console.log(isEqual(1,1));
        console.log(isEqual(1,2));
        console.log(isEqual(1,'1'));


        // 삼항연산자
        const d=10, e=20, f=30;
    </script>

 

 

2. 삼항 연산자

  <script>
    const a= 1<2
    if(a){
      console.log('참')
    }else{
      console.log('거짓')
    }
    console.log(a?'참':'거짓')
  </script>

 

 

3. 조건문

  <script>
    function random() {
      return Math.floor(Math.random() * 10)
    }
    const a = random()
    if (a === 0) {
      console.log('a is 0')
    }else if(a===2){
      console.log('a is 2')
    }else{
      console.log('rest...')
    }
  </script>

  <script>
    function random() {
      return Math.floor(Math.random() * 10)
    }
    const a = random()
    switch(a){
     case 0:
      console.log('a is 0')
      break;
    case 2:
      console.log('a is 2')
      break;
    default:
      console.log('rest...')
    }
  </script>

 

 

4. 반복문

  <script>
    const ulEl=document.querySelector('ul')
    for(let i=0; i<10; i++){
      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)
    }
        // 나중에 추가적으로 배울 것
  </script>

 

 

5. 변수 유효범위

  <script>
    //var: 함수레벨 scope, 의도하지 않는 범위에서 사용될수 있다.메모리누수
    //let, const: 블록레벨 scope
    function scope(){
      //console.log(a)  // let,const: not defined에러, var: undefined출력
      if(true){
        //console.log(a)  // let,const: not defined에러, var: undefined출력
        var a =123
        //console.log(a)   //모두 정상
      }
      console.log(a)  //let,const: not defined에러, var: 123
    }
    scope()
  </script>

 

 

6. 형변환

  <script>
    //형변환
    const a=1
    const b='1'
    console.log(a===b)  //일치 연산자
    console.log(a==b)  //동등 연산자시 형변환 일어남(비권장)
    //참 값
    //true, {}, [], 1,2,'false',-12, '3.14'.....
    //거짓 값(암기)
    //false, '', null, undefined, 0,-0, NaN(Not a Number)
    if('false'){  //false
      console.log(123)
    }
   console.log('NaN: ', 1+undefined)   //NaN: 숫자에 더할수 없는 값
  </script>

 

 

7. 함수

    <script>
        // 컴파일 언어(java, c, c++...) <---> 인터프리터 언어(js, 파이썬)
        // 기명 함수
        function sum(x,y){
            return x+y;
        }
        let a=sum(1,3);
        const b=sum(1.3, 2.3);
        console.log(a, b);
        console.log(a+b);
        console.log(sum(10,20)+sum(2.3,4.4));

        // 익명함수 (함수를 sum2 변수에 저장)
        // 함수도 객체
        const sum2 = function(x,y){
            if(x<2){
                return;
            }
            return x+y;
        };
        console.log(sum2);
        console.log(sum2(1,3)); // undefined 값이 없을때
        console.log(sum2(4,3));
        // let ulEl=document.getElementById('ul'); // 이것도 객체임

        function sum3(){
            console.log(arguments); //내장된 매개변수
            return arguments[0]+arguments[1]+arguments[2]
        }
        console.log(sum3(3,7,3));

        // 함수 오버로딩없음
        function sum4(x,y,z){
            console.log(x,y,z);
        }
        sum4(); //undefined undefined undefined
        sum4(10);   //undefined undefined
        sum4(10,20);    //undefined
        sum4(10,20,30); //10 20 30
        sum4(10,20,30,40);  //10 20 30
    </script>

 

 

8. 화살표 함수

    <script>
        // const double=function(x){return x*2}
        // console.log('double: ',double(7));
        // const dbArrow=(x)=>{return x*2}
        // const dbArrow= x=> {return x*2}
        // const dbArrow= x=> {x*2}
        // const dbArrow= x=> x*2
        // const dbArrow= x=>{console.log(x); return x*2}
        // console.log('dbArrow: ',dbArrow(8));
        // const dbArrow= ()=> [1,2,3]
        // console.log('arr: ', dbArrow(), dbArrow().length);
        //const dbArrow= (x)=> {name: 'cha', age: x} // 함수의 중괄호인지 객체의 중괄호인지 구분을 못함
        //console.log('obj: ', dbArrow());
        let person={name:'kim', age:20} // 객체
        console.log(person.name, person.age);
    </script>

 

 

9. 즉시 실행함수

    <script>
        const a = 7; // 전역변수
        function double(){
        console.log(a*2);
        }
        double(); // 밑에 즉시실행함수가 있으면 꼭 세미콜론(;)을 붙여줘야한다.

        // 즉시실행함수
        // IIFE, Immediately-Invoked Function Expression
        (function(){
        console.log(a*3);
        })(); // 두 덩어리

        (function(){
        console.log(a*4);
        }()); // 한 덩어리 (권장)
        </script>

 

 

10. 함수 호이스팅

    <script>
        // 호이스팅(Hoisting): 위로 끌어올리다.
        // 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
        // function double(){}
        const a=7;

        function double(){
            console.log(a*2);
        }
        const square=function(){
            console.log(a*2);
        }
        const square2= ()=> console.log(a*a);
        
        // 익명함수는 호이스팅 불가

        double()
        square()
        square2()
    </script>

 

 

11. 변수 호이스팅

  <script>
    //호이스팅(hoisting)이란
//자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
//자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
//함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
//유효 범위: if,for단위 블록{}내에 변수를 선언해도 유효범위는 function단위 블록 {}이다., 

//호이스팅의 대상
//var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. 함수 표현식은 호이스팅 안됨.
//var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.

//let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
//java처럼 if, for단위 블록{}내에 변수를 선언하면 해당{}이 유효범위다. 
		
	//지역변수>전역변수 
const pi = 3.14; //전역 상수변수(global v)

fct1();
fct2(3,5);

function fct1() {
    //var a,b; 함수의 상단에 호이스팅
    //console.log('a: ',a)  //var:undefined, let,const:error
    //console.log('b: ',b)  //var:undefined 
    let a = 100,b = 200; //지역변수(local variable)

    if (1) {
        let a = 30,b = 40; //java error, 위의 const와 let을 var로 변경해 보자.
        console.log("1=" + a);
        console.log("1=" + b);
    }
    console.log(a);  //var는 마지막에 선언된 변수가 위의 변수를 덮어버린다.
    console.log(b);  //let,const는 100, 200
    
    console.log('전역변수:' + pi)
}

function fct2(a, b) { //함수정의부
  console.log('fct2 call:', a, b)  
  console.log('gv:' + pi);
    
}
//메소드 오버로딩은 없지만 유연하다.
fct2()   
fct2(10)
fct2(10,20,30)

//함수선언부는 호이스팅 되지 않음
//    const fct=function(){  //익명 함수
//        console.log("함수 출력");
//    };
//    fct();
//    console.log(typeof fct);

function test(show) {
    show();
}
//ES6 화살표함수=> , 자바 람다(lambda) ->

test(() => {
    console.log('function call');
    console.log('second line');
});
// test(function() {
//      console.log('function call');
//      console.log('second line');
// });
  </script>

 

 

12. 타이머 함수

  <script>
    //타이머 함수: JS 전역함수(어디서든 호출가능한 함수)
    //setTimeout(함수, 시간): 일정 시간 후 함수실행
    //setInterval(함수, 시간): 시간 간격바다 함수 실행
    //clearTimeout(): 설정된 Timeout 함수를 종료
    //clearInterval(): 설정된 Interval 함수를 종료
    // setTimeout(function(){
    //   console.log('hello!')
    // }, 3000)
    // const timer=setTimeout(()=>{
    //   console.log('hello!')
    // }, 3000)
    console.log('비동기 처리')

    const timer = setInterval(() => {
      console.log('hello!')
    }, 3000)

    //h1태그를 클릭하면 
    const h1El = document.querySelector('h1')
    h1El.addEventListener('click', () => {
      //clearTimeout(timer) //setTimeout함수가 작동하지 않음
      clearInterval(timer) //setInterval함수가 작동하지 않음
    })
  </script>

 

 

13. 콜백

<script>
//콜백(Callback)
//함수의 인수로 사용되는 함수
//setTimeout(함수, 시간)
// function timeout(){
//   setTimeout(()=>{
//     console.log('hello!')
//   },3000)
// }
// timeout()
// console.log('Done!') //Done먼저 출력후 3초뒤 hello출력
function timeout(cb){
  //아래 익명함수는 setTimeout의 콜백함수임
  setTimeout(()=>{  
    console.log('hello!')
    cb()   
  },3000)
}
//콜백 함수 사용 목적
//1.익명함수가 timeout의 인자로 사용됨
//2.timeout실행시 특정 위치 실행 보장하기 위해
timeout(()=>{    
  console.log('Done!') 
})
</script>

 

 

14. 생성자 함수

  <script>
    //리터럴({},[],"") 방식의 객체 생성
    // const kim={
    //   //필드
    //   //property
    //   firstName: 'kim',
    //   lastName: 'dong',
    //   //method
    //   getFullName: function(){  //=>함수 금지(this가 상위객체를 의미함)
    //     //this: 현재 소속된 객체데이터를 의미
    //     return `${this.firstName} ${this.lastName}`
    //     //return `${kim.firstName} ${kim.lastName}`
    //   }
    // }
    // console.log(kim.getFullName())
    // const lee={
    //   firstName: 'lee',
    //   lastName: 'na',
    //   getFullName: function(){
    //     return `${this.firstName} ${this.lastName}`    
    //   }
    // }
    // console.log(lee.getFullName())
    //생성자 함수를 이용한 객체 생성
    //java의 클래스와 유사(?)
    //new와 사용하는 생성자함수는 대문자로 지정
    function User(first, last) {
      this.firstName = first //this생략 안됨
      this.lastName = last
      //메모리 비효율적(객체마다 함수객체를 생성함)
      // this.getFullName=function(){  
      //   return `${this.firstName} ${this.lastName}`
      // }
    }
    //메모리 효율적
    //함수객체를 user함수의 prototype에 1번만 생성한다.
    User.prototype.getFullName = function () {
      return `${this.firstName} ${this.lastName}`
    }
    //생성자 함수를 통한 kim인스턴스 생성  
    const kim = new User('kim', 'dong')
    const lee = new User('lee', 'na')
    console.log(kim)
    console.log(lee)
    console.log(kim.getFullName())
    console.log(lee.getFullName());

    //javaScript는 prototype(원형)기반 언어임
    const arr = [1, 2, 3];
    console.log(arr)
    //배열객체의 prototype의 includes메소드 확인
    console.log(arr.includes(4)) //false
    console.log(arr.includes(2)) //true
  </script>

 

 

15. this

  <script>
    //this
    //일반 함수는 (호출 위치!)에서 따라 this정의!
    //화살표 함수는 자신이 (선언된 함수 범위!)에서 this정의!
    const kim={
      name: 'kim',
      normal: function(){
        console.log(this.name)
        console.log(this)  //kim객체
      },
      arrow:()=>{  //특정 함수범위에 선언되고 있지 않음
        console.log(this.name)
        console.log(this)  //window객체
      }
    }
    kim.normal()  //kim 
    kim.arrow()   //'' or undefined
    
    const lee={
      name: 'lee',
      normal:kim.normal,
      arrow: kim.arrow
    }
    //호출위치가 여기! 그래서 this는 lee객체 참조함
    lee.normal();
    //선언된 위치(범위)는 그대로임! this는 window객체 참조함
    lee.arrow();

    // 생성자 함수에서 getFullName을 화살표함수로
    // 만들어서 this값을 확인해보자

    const timer={
      name: 'kim',
      timeout: function(){
        //setTimeout의 내부에서 콜백을 호출중이라서 name출력안됨
        //setTimeout(function(){
        //  console.log('t:', this.name)  //window 객체
        //}, 2000)
        //timer객체의 timeout메소드에 선언되었으므로 name출력됨        
        //setTimeout함수에서는 화살표함수를 쓰는것이 좋다.
        setTimeout(()=>{
          console.log('t:', this.name) //timer객체
        }, 2000)
      }
    }
    timer.timeout()
  </script>

 

 

16. ES6 Classes

  <script>
    const hong = {
      name: 'hong',
      //normal: function(){
      //   console.log(this.name)
      // },
      //위 메소드의 간소화 표현
      normal() {
        console.log(this.name)
      },
	  //화살표함수 간소화 안됨
      arrow: () => {
        console.log(this.name)
      }
    }
    hong.normal()
    hong.arrow()

    ////ES6 Classes
    //생성자 함수활용을 class로 간소화 할 수 있음
    //class는 react에서 많이 활용함
    class User {
      constructor(first, last) {
        this.firstName = first //this생략 안됨
        this.lastName = last
      }
      //prototype에 1번만 생성한다.
      getFullName() {
        return `${this.firstName} ${this.lastName}`
      }
    } //end class
    //생성자 함수를 통한 kim인스턴스 생성  
    const kim = new User('kim', 'dong')
    const lee = new User('lee', 'na')
    console.log(kim)
    console.log(lee)
    console.log(kim.getFullName())
    console.log(lee.getFullName());
  </script>

 

 

17. 상속(확장)

  <script>
    //java class와 아주 유사함
	//생성자 및 메소드객체가 prototype에 1번 생성됨
    class Car{
      constructor(gasoline){
        //super()에러
        this.gasoline=gasoline
      }
      showGuageInfo(){
        console.log('gas: ', this.gasoline)
      }
    }
    class HybridCar extends Car{
      constructor(gasoline, electric){
        super(gasoline)
        this.electric=electric
      }
      showGuageInfo(){
      super.showGuageInfo()
        //console.log('gas: ', this.gasoline)  //가능
        console.log('elec: ', this.electric)
      }
    }
    class HybridWaterCar extends HybridCar{
      constructor(gasoline, electric, water){
        super(gasoline,electric)
        this.water=water
      }
      showGuageInfo(){
        super.showGuageInfo()
        //console.log('gas: ', this.gasoline) //가능
        //console.log('elec: ', this.electric) //가능
        console.log('water: ', this.water)
      }
    }
  const car1=new HybridWaterCar(50,1000,30)
  const car2=new HybridCar(40,500)
  console.log(car1)
  car1.showGuageInfo()
  console.log(car2)
  car2.showGuageInfo()
  </script>

 

 

18. 문자

  <script>
    //JS 데이터
    //String: "", '', ``
    //Number:
    //Boolena: true, false
    //underfinde:
    //null:
    //Array: []
    //Object: {}
    //String.prototype.indexOf() 메소드는 String객체 모두 사용할 수 있다.
    let result='Hello world!'.indexOf('world')
    console.log(result)  //첫글자index는 0부터
    result='Hello world!'.indexOf('kim')
    console.log(result)  //검색실패 -1
    
    const str='대한민국 최고'  //문자열 리터럴 객체 
    //const str=new String('대한민국') //문자열 정식 객체
    console.log(str.length) //7
    console.log(str.indexOf('만세') != -1)  //false
    console.log(str.slice(0,3))  //대한민(idx:0~2)
    console.log(str.slice(5,7))  //최고(idx:5~6)
    console.log(str.slice(2, -1))  //민국 최(idx:2~뒤쪽 1문자미만) 
    console.log(str.replace('대한민국','한국' ))  //한국 최고
    console.log(str.replace(' 최고','' ))  //삭제효과, 대한민국
    const email='surecha@nuri.com'
    console.log(email.match(/.+(?=@)/))  //정규표현식:@앞쪽 문자열 찾아줘 
    console.log(email.match(/.+(?=@)/)[0]) 
    const str2='    Hello world  '
    console.log(str2.trim()) //문자열 앞뒤 공백제거 
  </script>

 

 

19. 숫자와 수학

  <script>
    const pi=3.141592
    console.log(pi)

    const str=pi.toFixed(2)  //'3.14'문자열 반환
    console.log(str)
    console.log(typeof str);
    //window객체 전역함수 parseInt, parseFloat(권장)
    const integer = parseInt(str)
    const float = parseFloat(str)
	//number객체 static 함수: parseInt, parseFloat(비권장)
	//const integer=Number.parseInt(str)
    //const float= Number.parseFloat(str)
    console.log(integer)  //3
    console.log(float)    //3.14 
    console.log(typeof integer, typeof float) //number  number
    //Math: 수학관련 객체
    console.log('abs: ', Math.abs(-12))  //12
    console.log('min: ', Math.min(2,8,5,6))  //2
    console.log('max: ', Math.max(2,8,5,6))  //8
    console.log('ceil: ', Math.ceil(3.14)) //4, 올림함수
    console.log('floor: ', Math.floor(3.14)) //3, 절삭함수
    console.log('round: ', Math.round(3.14)) //3, 반올림함수
    console.log('random: ', Math.random())   //0.0~1.0미만 랜덤함수
    const rand=Math.floor(Math.random() * 10)
    console.log(rand)  //0~9사이 난수 발생
  </script>

 

---