[JS] 유데미 React 강의 복습노트 #1

zero_0·2022년 3월 13일
0

FE 학습

목록 보기
19/22
post-thumbnail

class는 리액트 구성 요소를 만들 때 쓴다.
구버전 class

class Human {
  constructor() {
    this.gender = 'male';
  }
  
  printGender() {
    console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = 'Max';
    this.gender = 'female'
  }
  
  printMyName() {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName(); 
person.printGender();

"Max"
"female"

차세대 자바 스크립트는 속성, 메서드를 초기화하는 다양한 구문을 지원한다.
생성자 함수를 사용하지 않아도 되는 차세대 자바스크립트

최신버전 class

class Human {
  gender = 'male';
  
  printGender = () => {
    console.log(this.gender);
  }
}

class Person extends Human {
  name = 'Max';
  gender = 'female'
  
  printMyName = () => {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();

"Max"
"female"

전개 연산자와 나머지 연산자

const numbers= [1, 2, 3];
const newNumbers = [...numbers, 4];

console.log(newNumbers);

[1, 2, 3, 4]

객체에서도 사용이 가능하다.

const person = {
  name: 'Max'
};

const newPerson = {
  ...person,
  age : 28
}

console.log(newPerson);

[object Object] {
age: 28,
name: "Max"
}

const filter = (...args) => {
  return args.filter(el => el === 1);
}

//필터는 요소가 1과 같은 것을 기대합니다.

const filter = (...args) => { //나머지 연산자인 점 3개로 이 배열을 필터함.
  return args.filter(el => el === 1);
}

console.log(filter(1,2,3)); 

[1]

구조 분해

전개 연산자는 모든 요소와 속성을 새 배열이나 새 객체에 분배한다.
반면 구조분해는 하나의 요소나 속성만을 배열이나 객체를 위한 변수로 저장한다.
편리하게 배열에서 특정 요소나 객체에서 특정 속성을 추출하는 방법

const numbers = [1,2,3]; 
[num1, num2] = numbers; //배열에서 2개 추출
console.log(num1, num2);
> 1,2

참조와 원시 타입

숫자와 문자, boolean이 원시 타입 종류임.
언제든 다른 변수에 변수를 재할당하고 저장할 수 있다.

객체와 배열은 참조 타입이다. 재할당하면 값이 아니라 포인터를 복사하는 거다.🎇
따라서 정말 복사하고 싶으면, 새 객체를 만들고 속성만 복사해야한다!!
객체인 사람은 메모리에 저장되고 상수인 사람은 메모리에 포인터를 저장한다.
첫번째 사람을 두번째 사람에게 할당하면 포인터가 복사된다.
포인터를 복사해서 메모리에 있는 같은 객체를 지정했기 때문.

const person = {
  name: 'Max'
}

const secondPerson = { //진짜 카피를 한 상황
  ...person
};

person.name = 'Manu';

console.log(secondPerson)

[object Object] {
name: "Max"
}

const person = {
  name: 'Max'
}

const secondPerson = person; //진짜 카피가 아니라 메모리에 포인터를 저장한 상황

person.name = 'Manu';

console.log(secondPerson)

[object Object] {
name: "Manu"
}

배열 함수 map

const numbers = [1, 2, 3];

const doubleNumArray = numbers.map((num) => {
  return num * 2;
});

console.log(numbers); // >> [1,2,3]
console.log(doubleNumArray); // >> [2,4,6]
            
profile
차근차근 채워가는 it일지

0개의 댓글