패스트캠퍼스 챌린지 19일차

🍣

19일차

 

Part 3. JavaScript Essentials

Ch 3. JS 함수

ch 4. JS 클래스

 

---

 

Ch 3. JS 함수

 

 

주제

 

• 함수 기본 문법

 

 

주요 내용

 

함수가 호출되는 횟수를 최대한 줄인다.

 

 🔗 화살표 함수  => 함수 최소화!

const double = function (x) {
  return x * 2;
};
console.log("double", double(7));

// const doubleArrow = (x) => {
//   return x * 2;
// };

const doubleArrow = x => x * 2;

// const doubleArrow = x => ({
//   name: "yujin",
// });

console.log("doubleArrow", doubleArrow(7));

 

 🔗 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression) 

// (x)()
(function () {
  console.log(a * 2);
})();

// (x())
(function () {
  console.log(a * 2);
}());

 

 🔗 호이스팅(Hoisting) : 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

https://devjindev.tistory.com/52?category=926283

[JavaScript] 호이스팅(Hoisting) 이란?

=> 하단에서 모든 함수를 선언하고, 상단에서 함수를 호출할 때 이와 같은 원리를 사용 => 보기 좋다

 

 🔗 타이머 함수 

• setTimeout(함수, 시간): 일정 시간 후 함수 실행
• setInterval(함수, 시간): 시간 간격마다 함수 실행
• clearTimeout(): 설정된 Timeout 함수를 종료
• clearInterval(): 설정된 Interval 함수를 종료

 

 🔗 콜백(Callback) : 함수의 인수로 사용되는 함수

'특정한 실행 위치를 보장해준다'

콜백함수

 

 

새롭게 알게 된 내용

 

 

 🔗 arguments 

 

 

---

 

 

Ch 4. 클래스

 

 

주제

 

• 클래스 기본 문법

 

 

주요 내용

 

for 코드(함수) 중복 방지, 효율적인 메모리 사용

 

 🔗 생성자 함수(prototype) 

 prototype을 통해 지정한 메소드는 메모리에 한 번만 만들어 지고, 이것을 앞에 있는 생성자가 언제든지 활용할 수 있다.

function User(first, last) {
  this.firstName = first;
  this.lastName = last;
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`;
};

const heropy1 = new User("Yujin1", "Hong1");
const heropy2 = new User("Yujin2", "Hong2");
const heropy3 = new User("Yujin3", "Hong3");

console.log(heropy1.getFullName());
console.log(heropy2.getFullName());
console.log(heropy3.getFullName());

 

prototype

https://devjindev.tistory.com/58?category=926283 

[JavaScript] 프로토타입(prototype) 이란

 

 🔗 this 

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

https://devjindev.tistory.com/54?category=926283

[JavaScript] this란? / call, apply, bind 차이점

const heropy = {
  name: "Yujin",
  normal: function () {
    console.log(this.name);
  },
  arrow: () => {
    console.log(this.name);
  },
};
heropy.normal(); // Yujin
heropy.arrow(); // undefined

const amy = {
  name: "amy",
  normal: heropy.normal,
  arrow: heropy.arrow,
};
amy.normal(); // Amy
amy.arrow(); // undefined

 

this

 

 🔗 ES6 Classes 

// function User(first, last) {
//   this.firstName = first;
//   this.lastName = last;
// }
// User.prototype.getFullName = function () {
//   return `${this.firstName} ${this.lastName}`;
// };

class User {
  constructor(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const heropy1 = new User("Yujin1", "Hong1");
const heropy2 = new User("Yujin2", "Hong2");
const heropy3 = new User("Yujin3", "Hong3");

console.log(heropy1.getFullName());
console.log(heropy2.getFullName());
console.log(heropy3.getFullName());

 

 

 🔗 상속(확장) 

class Vehicle {
  constructor(name, wheel) {
    this.name = name;
    this.wheel = wheel;
  }
}
const myVehicle = new Vehicle("운송수단", 2);
console.log(myVehicle);

class Bicycle extends Vehicle {
  constructor(name, wheel) {
    super(name, wheel);
  }
}
const myBicycle = new Bicycle("삼천리", 2);
const daughtersBicycle = new Bicycle("세발", 3);
console.log(myBicycle);
console.log(daughtersBicycle);

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel);
    this.license = license;
  }
}
const myCar = new Car("벤츠", 4, true);
const daughtersCars = new Car("포르쉐", 4, false);
console.log(myCar);
console.log(daughtersCars);

 

 

 

새롭게 알게 된 내용

 

 와 화살표 함수에서 this가 상위 스코프를 가리킨다는 개념이 잘 이해가 안 됐었는데

const timer = {
  name: "Heropy!!",
  timeout: function () {
    setTimeout(function () {
      console.log(this.name);
    }, 2000);
  },
};
timer.timeout();

 이 상태에서는 undefined가 출력된다. 콜백(일반)함수에서 this는 호출 위치에 따라 결정되는데, 그 위치가 timeout이 아닌 setTimeout 내부에 있기 때문에 undefined를 가리킨다.

const timer = {
  name: "Heropy!!",
  timeoue: function () {
    setTimeout(() => {
      console.log(this.name);
    }, 2000);
  },
};
timer.timeout();

 일반함수 말고 화살표 함수를 써주면 비로소 Heropy!! 가 출력된다. 화살표 함수에서 this는 자신이 선언된 함수 범위에서 결정되기 때문에, setTimeout 범위인 timer를 가리킬 수 있는 것이다. 그래서 상위 스코프를 가리킨다고 말 할 수 있었던 것이다!!!!!

 

 

느낀점

 

 기술 면접 공부하느라 그동안 블로그에 정리 해둔 것들이 많이 도움됐던 강의였다 (뿌듯)

 블로그에 정리하면서 공부할 때도 그렇고, '모던 자바스크립트 Deep Dive' 라는 책으로 JS 스터디를 한 적이 있는데 이 책에서 prototype을 굉장히 길고 깊게 설명해줘서 너무 어려웠었다😢 근데 오늘 강의 들으면서 직접 음성으로 듣고 예시도 보고 코딩도 직접 해봐서 그런건지 사이다 먹은 것처럼 이해가 됐던 것들이 많았다. 그래서 오늘 챌린지 글도 열심히 정성 들여 쓴 것 같다ㅋㅋㅋㅋㅋㅋㅋㅋ (역대급으로 길게 쓴 듯)

 학교 수업에서 자바를 재밌게 했었는데 안 써 버릇 하다 보니 클래스가 항상 낯설게 느껴진다.... 우리 친해지자

 

---

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스

#패캠챌린지

#직장인인강

#직장인자기계발

#패스트캠퍼스후기

#한_번에_끝내는_프론트엔드_개발_초격차_패키지_Online

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]