JavaScript 문법 종합반 - 최선의(= 최악의) TIL

캠프에서 추천하는것은 4일동안 10시간 분량의 강의를 2회독하라고 권장했었다.
오늘이 3일째이고, 이제 내일 12시간만 남았다.
현 시점에서 강의를 실습하면서 TIL에 쓸 내용도 정리하고 그렇게 하기에는 너무 시간적으로 촉박하여, 일단 실습했던 것 위주로 오늘의 TIL로 올린다.

이번 자바스크립트 문법반의 강의로 철저하게 '무능'한걸 깨달아버려서 아주 아주 치욕적이다. 고작 이걸 못해서 이렇게 쩔쩔매는게 한심할 뿐, 지금도 열심히 안한건 아니지만, 정말, 강철부대의 대원들처럼 진짜, 죽자는 생각으로 해봐야겠다.

난 오늘 이날을 결코 잊지 않을 것이고, 늘 그랬듯이 기적을 만들 것이다.

var obj1 = {
	outer: function() {
		console.log("first" + this); // (1) outer

		// AS-IS
		var innerFunc1 = function() {
			console.log("second" + this); // (2) 전역객체
		}
		innerFunc1();

		// TO-BE
		var self = this;
		var innerFunc2 = function() {
      console.log("third" + this);
			console.log(self); // (3) outer
		};
		innerFunc2();
	}
};

// 메서드 호출 부분
obj1.outer();

☞ 출력값
first[object Object]
second[object global]
third[object global]
{ outer: [Function: outer] }

최대값 최소값

var numbers = [10, 20, 3, 4, 15, 40];

var max = (min = numbers[0]); // 10

numbers.forEach(function (숫자){ //숫자는 매개변수 
  if (숫자 > max) {
    max = 숫자;
  }

  if (숫자 < min){
    min = 숫자;
  }
})
console.log(max, min);

☞ 출력값 40, 3

var numbers = [10, 20, 3, 4, 15, 40];
/*
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max ,min);
*/

//spread operator
//console.log(numbers);
//console.log(...numbers); // 배열풀기 

var max = Math.max(...numbers)
var min = Math.min(...numbers)
console.log(max ,min);


console.log('*********************');

numbers.forEach(function(number, 인덱스){
  console.log(인덱스 + '번째 값' + number);
})

☞ 출력값
0번째 값10
1번째 값20
2번째 값3
3번째 값4
4번째 값15
5번째 값40

//call, apply는 바로 호출
//bind는 this를 바인딩하는 메소드
//[목적 = 기능]
//1. 함수에 this를 미리적용
//2. 부분 적용 함수

var 함수 = function (a, b, c, d) {
	console.log(this, a, b, c, d);
};
함수(1, 2, 3, 4); // node에서는 global 

// 함수에 this 미리 적용
var 바인딩1 = 함수.bind({ x: 1 }); // 바로 호출되지는 않아요! 그 외에는 같아요.
바인딩1(5, 6, 7, 8); // { x: 1 } 5 6 7 8

// 부분 적용 함수 구현
var 바인딩2 = 함수.bind({ x: 1 }, 4, 5); // 4와 5를 미리 적용
바인딩2(6, 7); // { x: 1 } 4 5 6 7
바인딩2(8, 9); // { x: 1 } 4 5 8 9

console.log(함수.name);
console.log(바인딩1.name);
console.log(바인딩2.name);

☞ 출력값

<ref 1> Object [global] {
global: [Circular 1],
queueMicrotask: [Function: queueMicrotask],
clearImmediate: [Function: clearImmediate],
setImmediate: [Function: setImmediate] {
[Symbol(nodejs.util.promisify.custom)]: [Getter]
},
structuredClone: [Function: structuredClone],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Getter]
},
atob: [Function: atob],
btoa: [Function: btoa],
performance: Performance {
nodeTiming: PerformanceNodeTiming {
name: 'node',
entryType: 'node',
startTime: 0,
duration: 43.09399998188019,
nodeStart: 2.9639999866485596,
v8Start: 6.4151999950408936,
bootstrapComplete: 28.200999975204468,
environment: 16.080699920654297,
loopStart: -1,
loopExit: -1,
idleTime: 0
},
timeOrigin: 1697457374698.485
},
fetch: [AsyncFunction: fetch]
} 1 2 3 4
{ x: 1 } 5 6 7 8
{ x: 1 } 4 5 6 7
{ x: 1 } 4 5 8 9
함수
bound 함수
bound 함수

class Person{
  constructor (name, age){
    this.name = name;
    this.age = age;
  }
  sayHello(){
    console.log(`${this.name}님 안녕하세요!`);
  }

  sayAge(){
    console.log(`${this.name}의 나이는 ${this.age}살이에요!`);
  }
}

const Person1 = new Person('홍길동', '30');
const Person2 = new Person('홍길순', '25');

Person1.sayHello();
Person2.sayHello();

Person1.sayAge();
Person2.sayAge();

☞ 출력값
홍길동님 안녕하세요!
홍길순님 안녕하세요!
홍길동의 나이는 30살이에요!
홍길순의 나이는 25살이에요!

class 자동차 {
  constructor(모델명, 출시년도, 종류, 가격){
    this.모델명 = 모델명;
    this.출시년도 = 출시년도;
    this.종류 = 종류;
    this.가격 = 가격;
  }

//클락션 울리는 메소드
  클락션(){
    console.log(`${this.모델명} 뛰뛰빵빵!`);
  }

  몇년도모델(){
    console.log(`${this.모델명}는 ${this.출시년도}년에 출시되었어요!`);
  }
}

// 차 만들기
const 첫째차 = new 자동차('소나타', '2077', '가솔린', 5000)
첫째차.클락션();
첫째차.몇년도모델();
const 둘째차 = new 자동차('제네시스', '2080', '가솔린', 7000);
const 셋째차 = new 자동차('아반떼', '2099', '가솔린', 6000);

둘째차.클락션();
둘째차.몇년도모델();
셋째차.클락션();
셋째차.몇년도모델();

☞ 출력값
소나타 뛰뛰빵빵!
소나타는 2077년에 출시되었어요!
제네시스 뛰뛰빵빵!
제네시스는 2080년에 출시되었어요!
아반떼 뛰뛰빵빵!
아반떼는 2099년에 출시되었어요!

class 사각형 {
  constructor(세로, 가로) {
    this._세로 = 세로;
    this._가로 = 가로;
  }

  get 가로() {
    return this._가로;
  }

  set 가로(값) {
    if (값 <= 0) {
      console.log('[오류] 가로길이는 0보다 커야 합니다.');
      return;
    } else if (typeof 값 !== 'number') {
      console.log('[오류] 가로길이로 입력된 값이 숫자타입이 아닙니다.');
      return;
    }
    this._가로 = 값;
  }
  get 세로() {
    return this_.세로;
  }

  set 세로(값) {
    if (값 <= 0) {
      console.log('[오류] 세로길이는 0보다 커야 합니다.');
      return;
    } else if (typeof 값 !== 'number') {
      console.log('[오류] 세로길이로 입력된 값이 숫자타입이 아닙니다.');
      return;
    }
    this._세로 = 값;
  }

  넓이() {
    const 계산 = this._가로 * this._세로
    console.log(`넓이는 ${계산}입니다.`);
  }

}
const 사각형인스턴스1 = new 사각형(10, 20)
사각형인스턴스1.넓이();

const 사각형인스턴스2 = new 사각형(10, 7)
사각형인스턴스2.넓이();
const 사각형인스턴스3 = new 사각형(15, 20)
사각형인스턴스3.넓이();

☞ 출력값
넓이는 200입니다.
넓이는 70입니다.
넓이는 300입니다.

class 자동차 {
  constructor(모델명, 출시년도, 종류, 가격){
    this._모델명 = 모델명;
    this._출시년도 = 출시년도;
    this._종류 = 종류;
    this._가격 = 가격;
  }

  get 모델명() {
    return this._모델명;
  }

  set 모델명(수치){
    //유효성검사가 필요함
    if(수치.length <= 0){
      console.log('[오류] 모델명이 입력되지 않았습니다.');
      return;
    } else if(typeof 수치 !== 'string'){
      console.log('[오류] 입력된 모델명이 문자형이 아닙니다.');
      return;
    }
    this._모델명 = 수치;
  }

  get 출시년도() {
    return this._출시년도;
  }

  set 출시년도(수치){
    //유효성검사가 필요함
    if(수치.length !== 4){
      console.log('[오류] 입력된 년도가 4자리가 아닙니다.');
      return;
    } else if(typeof 수치 !== 'number'){
      return;
    }
    this._출시년도 = 수치;
  }

  get 종류() {
    return this._종류;
  }

  set 종류(수치){
    if(수치.length <= 0){
      console.log('[오류] 종류가 입력되지 않았습니다.');
      return;
    } else if (수치 !== '가솔린' && 수치 !== '디젤' && 수치 !== '전기' ){
      console.log('[오류] 입력된 종류가 잘못되었습니다. ');
      return;
    }
    this._종류 = 수치;
  }

  get 가격() {
    return this._가격;
  }

  set 가격(수치){
    if(typeof 수치 !== 'number'){
      console.log('[오류] 입력된 가격이 숫자가 아닙니다.');
      return;
    } else if(수치 < '1000000'){
      console.log('[오류] 가격은 100만원보다 작을 수 없습니다.');
      return;
    }

    this._가격 = 수치;

  }



//클락션 울리는 메소드
  클락션(){
    console.log(`${this.모델명} 뛰뛰빵빵!`);
  }

  몇년도모델(){
    console.log(`${this.모델명}는 ${this.출시년도}년에 출시되었어요!`);
  }
}




// 차 만들기
const 첫째차 = new 자동차('소나타', '2077', '가솔린', 5000)
첫째차.클락션();
첫째차.몇년도모델();
const 둘째차 = new 자동차('제네시스', '2080', '가솔린', 7000);
const 셋째차 = new 자동차('아반떼', '2099', '가솔린', 6000);

둘째차.클락션();
둘째차.몇년도모델();
셋째차.클락션();
셋째차.몇년도모델();

console.log('**********');
console.log(첫째차.모델명);

첫째차.모델명 = '비틀';

console.log(첫째차.모델명);

☞ 출력값
소나타 뛰뛰빵빵!
소나타는 2077년에 출시되었어요!
제네시스 뛰뛰빵빵!
제네시스는 2080년에 출시되었어요!
아반떼 뛰뛰빵빵!
아반떼는 2099년에 출시되었어요!

소나타
비틀

class 자동차 {
  constructor(모델명, 출시년도, 종류, 가격){
    this.모델명 = 모델명;
    this.출시년도 = 출시년도;
    this.종류 = 종류;
    this.가격 = 가격;
  }

//클락션 울리는 메소드
  클락션(){
    console.log(`${this.모델명} 뛰뛰빵빵!`);
  }

  몇년도모델(){
    console.log(`${this.모델명}는 ${this.출시년도}년에 출시되었어요!`);
  }
}


class 전기차 extends 자동차{
  constructor(모델명, 출시년도, 가격, 충전시간){
    super(모델명, 출시년도, 'e', 가격)
    this._충전시간 = 충전시간;
  }
  set 충전시간(시간){
    this._충전시간 = 시간;
  }
  get 충전시간(){
    return this._충전시간; 
  }

}
const 전기차생산 = new 전기차('BMW', '2099', 9000, 60);
전기차생산.클락션();
전기차생산.몇년도모델();

console.log('********************');
console.log(전기차생산._충전시간);
전기차생산.충전시간 = 20; //20으로 바꿈
console.log(전기차생산._충전시간);

☞ 출력값
BMW 뛰뛰빵빵!
BMW는 2099년에 출시되었어요!

60
20

오늘의 한줄평 : 나 자신에게 실망한 하루, 진짜 다시는 겪고싶지 않은 패배감...