이머시브 과정 4일차가 지나가고 있다. 오늘은 어제부터 배우기 시작한 최신 자바스크립트의 문법에 대해 더 알아보고 koans 문제들을 풀면서 공부하는 시간을 가졌다. 오늘도 배운 것 을 바탕으로 블로깅 하면 되짚어보는 시간을 가져보자 !
🔥Today Lesson🔥
- Spread/Rest 문법과 구조분해할당
- 객체 review
- 클래스와 인스턴스
- this
Spread/Rest 문법과 구조분해할당✅
먼저 Spread/Rest 문법에 대해서 알아보자.
Spread연산자는 배열을 펼쳐주는 역활을 한다.
let arr = ["a", "b", "c"];
console.log(...arr) // -> "a", "b", "c"
// 두 배열을 하나로 합칠때도 사용한다.
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr1, ...arr2]) // -> [1, 2, 3, 4, 5, 6]
// 배열을 복사할 수 도 있다.
let arr = ["a", "b", "c"];
let copyArr = [...arr];
console.log(copyArr) // -> ["a", "b", "c"]
// Spread연산자는 객체에서도 사용 할 수 있다.
let obj1 = {a: 1, b: 2};
let obj2 = {a: 3, c: 4};
let copyObj = {...obj1};
console.log(copyObj) // -> {a: 1, b: 2}
console.log({...obj1, ...obj2}) // -> {a: 3, b: 2, c: 4} 동일한 키 가 있다면 뒤에있는 값 이 된다.Rest파라미터는 파라미터를 배열의 형태로 받아와 사용 할 수 있다.
function foo(...rest) {
console.log(Array.isArray(rest)) // -> true
console.log(rest) // -> [1, 2, 3]
}
foo(1, 2, 3);
// 함수에서 나머지 파라미터 받아오기
function foo(a, b, ...rest) {
console.log(a) // -> 1
console.log(b) // -> 2
console.log(rest) // -> [3, 4, 5]
}
foo(1, 2, 3, 4, 5);구조분해할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
배열에서의 구조분해할당
let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a) // 1
console.log(b) // 2
console.log(rest) // [3, 4, 5]
// 배열은 무조건 순서대로 할당됩니다.객체에서의 구조분해할당
let [a, b, ...rest] = {a: 1, b: 2, c: 3, d: 4, e: 5}
console.log(a) // 1
console.log(b) // 2
console.log(rest) // {c: 3, d: 4, e: 5}유용한 함수에서의 객체 구조분해
let user = {
name: "홍길동",
identity: {
job: "student",
age: 26,
gender: "male"
},
id: 10
}
let changeUser = {
...user,
name: "짱구",
id: 20
}
console.log(changeUser)
// -> {
// name: "짱구",
// identity: {
// job: "student",
// age: 26,
// gender: "male"
// },
// id: 20
// }
// 만약 ...user가 맨 뒤에 나왔다면 값 이 바뀌지 않는다.
let changeAge = {
...user,
identity: {
...user.age,
age: 27
}
}
console.log(changeAge)
// -> {
// name: "홍길동",
// identity: {
// job: "student",
// age: 25,
// gender: "male"
// },
// id: 10
// }
// identity안에 age값만 바꿔주었다.객체 review✅
객체의 메소드를 호출시키는 방법은 객체.메소드()를 사용한다.
똑같은 기능을 가진 함수를 여러개 만드는 방법 중 하나는 클로저 모듈 패턴을 이용하는 것 이다. 다음 예제를 보며 알아보자.
function makeCounter() {
return {
value: 0,
increase: function() {
this.value++
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value;
}
}
}
let counter1 = makeCounter()
counter1.increase()
counter1.increase()
counter1.getValue() // -> 2
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -> -2클래스와 인스턴스✅
먼저 간단하게 보자면 클래스는 객체를 만들어 내기 위한 설계도 이며 인스턴스는 설계도를 바탕으로 소프트웨어 세계에 구현된 구체적인 실체이다.
클래스는 원래 es5 에서는 함수로 정의 되었지만 최신 es6 에서 class키워드를 이용하여 정의 할 수 있다.
클래스의 인스터스는 new키워드를 사용하여 나타낼수 있다.
다음 예제를 보며 이해해보자
class Animal {
constructor(type, name, sound) {
this.type = type;
this.name = name;
this.sound = sound;
}
say() {
console.log(this.sound);
}
}
let dog = new Animal("dog", "멍멍이", "멍멍");
dog.say() // -> 멍멍
console.log(dog.type) // -> dog
console.log(dog.name) // -> 멍멍이this✅
this의 값은 함수를 호출한 방법에 의해 결정된다.
중요한 3가지 방법의 호출 패턴을 기억해두자 !
1. function 호출 : 이때 this 값은 부모 객체 이다.
2. new키워드를 이용한 생성자 호출 : 이때 this 값은 새롭게 생성된 인스턴스 객체 이다.
3. .call 또는 .apply 호출 : 이때 this 값은 첫번째 인자로 전달된 객체 이다.
※ 화살표 함수는 그 어떤 경우에도 this를 결정하지 않습니다. 화살표 함수를 어떻게 실행하든 this 값은 전혀 영향을 끼치지 않습니다.
알아두어야 할 함수의 메소드
1. .call & .aplly
함수를 호출하는 방법에는 함수뒤에 ()를 붙이는 방법 이외에도 call 그리고 apply 하는 방법도 있다. 다음 예제를 보며 이해해보자.
let example = function (a, b, c) {
return a + b + c;
};
console.log(example.call(null, 1, 2, 3)) // -> 6
console.log(example.apply(null, [1, 2, 3])) // -> 6
// call과 apply의 공통점은 첫번째 인자에 this가 들어간다.
// apply는 배열이 들어갈때 풀어주게 된다.- .bind
bind는 함수가 가리키는 this만 바꾸고 호출하지는 않게 된다.
let obj = {
string: 'zero',
yell: function() {
alert(this.string);
}
};
let obj2 = {
string: 'what?'
};
let yell2 = obj.yell.bind(obj2);
yell2(); // 'what?'
// yell2를 console.log해보면 함수를 담고 있다.obj.yell.bind(obj2)했더니 yell 함수의 this가 obj2로 바뀌었습니다. 즉 call이나 apply와 비슷하지만 호출은 하지 않지 않고 함수만 반환하는 겁니다.
하루를 마치며👋
오늘은 정말 많은걸 배워서 조금 머리가 복잡하다... koans 문제를 페어와 풀때도 둘다 풀긴 풀었지만 뭔가 완벽하게 이해해서 푼게 아니라 대충 답을 끼워 맞추기한 느낌이 들어 찝찝했다...
그리고 sprint review 시간에 중간중간 잠이 쏟아져서 놓친부분이 있어서 조금 아쉬운 하루였다..... 😂😂😂
그래도 블로깅을 하며 다시한번 공부해서 어느정도 정리가 된 느낌이 들지만 그래도 아직 this부분은 어려운거 같다 ㅠㅠ 주말을 이용해서 다시 공부해봐야겠다 !!!
