자바스크립트 심화강의
-
arguments
- 매개변수 1개 여도 2개 입력 가능하지만 undefiend 가 뜬다.
- 함수로 넘어 온 모든 인수에 접근
- 함수내에서 이용 가능한 지역 변수
- length / index
- Array 형태의 객체
- 배열의 내장 메서드 없음 (forEach, map 등)
-
나머지 매개변수
- 정해지지 않은 개수의 인수를 배열로 나타낼 수 있다.
- 매개변수 앞에 ... 을 붙힌다.
- 배열의 메소드를 사용할 수 있다.
- 나머지 매개변수는 매개변수를 여러개 쓸 때 항상 맨 뒤에 써야한다.
function User(name, age, ...skills) {
this.name = name;
this.age = age;
this.skills = skills;
const user1 = new User("Mike", 30, "html", "css")
const user2 = new User("Tom", 25, "javascript", "react")
const user3 = new User("Jane", 20, "English", "Korean")
console.log(user1) // {name: "Mike", age: 30, skills = ["html", "css"]
console.log(user2) // {name: "Tom", age: 25, skills = ["javascript", "react"]
console.log(user3) // // {name: "Jane", age: 20, skills = ["English", "Korean"]- 전개구문(Spread syntax)
- 배열과 객체에서 사용 가능하다.
- 괄호 안의 값들을 풀어서 쓸 수 있다.
- 복제가 가능해서 원래 쓰던 코드에 영향을 주지 않는다.
forEach문을 사용한 것과 스프레드 연산자를 사용한 것의 값은 같다. > 전개구문이 훨씬 효율적이다.
let user = { name: "Mike" };
let info = { age: 30 };
let fe = ["JS", "React"]
let lang = ["Korean", "English"]
user = {
...user,
...info,
skills : [ ...fe, ...lang, ]
console.log(user); // { name: "Mike", age: 30, skills: ["JS", "React", "Korean", "English"]-
클로저
- 함수와 렉시컬 환경의 조합
- 함수가 생성될 당시의 외부 변수를 기억한다.
- 생성 이후에도 계속 접근 가능
- 외부 함수의 실행이 끝나서 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있다.
-
call, apply, bind
- 함수 호출 방식과 관계없이 this 를 지정할 수 있다.
-
call
- call 메소드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다.
const mike = { name: "mike", };
function showThisName() {
console.log(this.name);
}
showThisName(); // this가 window를 가르키고, window의 name은 ""이기 때문에 ""이 출력된다.
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
update.call(mike, 1999, "singer")
console.log(mike); // { name: "Mike", birthYear: 1999, occupation: "singer" }- apply
- 함수 매개변수를 처리하는 방법을 제외하면 call과 같다.
- 매개변수를 배열로 받는다.
- 두 번째 매개변수로 배열을 전달하면 그 요소들을 차례대로 인수로 사용한다.
- 첫 번째 매개변수는 아무거나 넣어도 괜찮다.
const mike = { name: "mike", };
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
update.apply(mike, [1999, "singer"])
console.log(mike); // { name: "Mike", birthYear: 1999, occupation: "singer" }const nums = [3, 10, 1, 6, 4]
// spread
const minNum = Math.min(...nums) // 1
const maxNum = Math.max(...nums) // 10
const minNumber = Math.min.apply(null, nums); // 1
// = Math.min.apply(null, [3, 10, 1, 6, 4])
const maxNumber = Math.max.call(null, ...nums) // 10- bind
- 함수의 this 값을 영구히 바꿀 수 있다.
const mike = { name: "mike", };
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
const updateMike = update.bind(mike);
updateMike(1999, "singer");
console.log(mike); // { name: "Mike", birthYear: 1999, occupation: "singer" }- 상속 (프로토타입)
- 객체를 상속 받을 수 있다.
- 계속해서 이어서 받을 수 있다.
const car = {
wheels: 4,
drive() {
console.log("drive..");
},
};
const bmw = {
color: "red",
navigation: 1,
};
bmw.__proto__ = car;
const x5 = {
color: "white",
name: "x5",
};
x5.__proto__ = bmw;⭐️ 두 코드는 같은 코드이다.
- class
- new 없이 실행할 수 없어서 에러가 뜬다.
- 상속 받을 때 extends 키워드를 사용한다.
- 동일한 이름으로 메소드를 정의하면 덮어 쓰게 된다.
- 자식 생성자는 무조건 부모 생성자를 호출해 줘야 한다. constructor과 super이 생략되었다.
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
dirve() {
console.log("drive..");
}
stop() {
console.log("STOP!");
}
class Bmw extends Car {
// 생략된 부분이지만 생략을 안해줘도 된다. 대신 알맞은 인자를 전달해줘야 한다.
// consttructor(...args) {
// super(...args);
// )
park() {
console.log("PARK");
}
stop() {
super.stop(); // 덮어 쓰지 않고 Car의 stop를 사용하기 (오버라이딩)
console.log("OFF");
}
}
const z4 = new Bmw("blue")⭐️ 결과
- promise
취준 개발자