TIL #4 ~ #5

김태현·2020년 10월 23일
0

TIL

목록 보기
5/8
post-thumbnail

클래스란?

클래스는 객체를 잘 만들기 위한 설계도
클래스 이름은 항상 CamelCase로 작성하여 다른것들과 구분
클래스를 잘 만들어놓으면 매번 객체를 생성할 때 고민을 하지않아도 된다.
클래스의 생성
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}

인스턴스?

클래스를 통해 객체를 생성된 객체
인스턴스의 생성
const morning = new Car('Morning', 2000000);
인스턴스는 클래스의 이름(Car) 앞에 new를 붙여서 생성한다.
클래스의 이름 오른쪽에는 () 괄호를 열고 안에 constructor함수(생성자 함수)에서 필요한 정보들을 인자(파라미터)로 넘겨준다.
이를 morning이라는 const 고정된 변수에 값을 저장한다.

생성자?

클래스가 새로운 인스턴스를 생성할 때마다 호출하는 함수
constructor(name, price) {
this.name = name;
this.price = price;
}
constructor() 메서드는 name과 price 2개의 인자를 받는다.
constructor() 메서드에 this를 사용해 자기자신 즉, 해당 인스턴스를 가리킨다.
constructor() 메서드에서 인자로 넘어오는 name과 price를 사용해 Car 인스턴스의 name과 price 프로퍼티에 값 할당
이렇게 클래스 안에서 name, price 같이 변경할 수 있는 상태값이자 class 범위 안에 어디에서나 사용할 수 있는 변수를 멤버변수 라고 부른다.
멤버 변수는 this키워드로 접근한다.

this?

객체 내부에서, 자기 자신의 프로퍼티에 접근하기 위해 사용하는 키워드.

메서드?

그냥 함수를 어렵게 부르는 말
객체가 프로퍼티로 함수를 가지고 있다면 그게 메서드다.
즉, 객체에 저장된 값이 함수.

객체와 배열 둘다 데이터를 담는데 무엇이 다른가?
배열은 순서가 있다 [1][2][3] 이렇게 인덱스가 있음
객체는 순서가 없다, 그저 키와 값 쌍으로 이루어진 데이터의 모음. 왜 순서가 없냐면 인덱스가 아니라 키를 이용해 값에 접근하기 때문에 순서가 필요없다.

키와 밸류
키는 일종의 변수역할을 한다.
하지만 변수와는 다른 점이 스페잇, 한글, 특수문자 등을 입력할 수 있다.

벨류는 말그대로 값이 들어가고 텍스트, 숫자 뿐만 아니라 함수, 객체도 넣을 수 있다.

키에 스페이스나 숫자로 되있는 것들은 접근할 때 .보다는 [""] 형태로 접근해야한다.
변수로 접근할때는 항상 .형태는 접근할 수 없고 [""] 형태로만 접근 가능하다

화살표함수
function = () {}를 간단하게 () => {}로 나타낸 것이다
인자가 1개만 있을때는 생략할 수 있지만 이렇게 2개 이상 받을 때는 생략하면 안된다. (name, number) => {} (name과 number를 인자로 받는 함수라는 뜻)

const hi = text => {
text += '하세요';
return text;
}

text 인자를 받아서 함수안에서 처리한 후 반환하는 에로우펑션

함수가 딱히 실행할 것이 없고 리턴만 한다면 return과 중괄호 모두 생략이 가능하다
const hi = name => name;
name 인자를 받아서 name 인자를 바로 반환하는 함수, 그리고 이를 고정변수 hi에 저장.
단, 중괄호와 return문을 생략한다면 반드시 화살표 오른쪽에는 리턴값만 적어야한다.
인자가 2개일때도 마찬가지다
const hi = (name, number) => name + number;

back tick
back tick을 사용하면 안에 편하게 변수를 넣을 수 있다 "" 감싸고 스페이스 하고 귀찮게 다 안해도 됨
이렇게
const name = '김태현';
const hi = 안녕하세요 개발자 ${name} 님;

원래는
const name = '김태현';
const hi = "안녕하세요 개발자 " + name + " 님";

엔터로 줄 바꿈할때도 그냥 백틱 쓰면 쉽게 된다
let detail = `자세히
보아야
이쁘다

불라불라`;
console.log(detail);

indexOf가 뭐였지?
특정문자열의 인덱스 값을 반환
let a = '가나다라마바사';
console.log(a.indexOf('라')); // 3이 출력
startsWith(): ~로 시작하냐?
endsWith(): ~로 끝나냐?
includes(): ~가 들어있냐?
repeat(): ~을 반복해라 (별찍기 문제)

map 메서드, forEach 메서드
map 메서드는 배열을 반복해주는데 콜백함수의 인자에서 원래 배열의 값들을 하나씩 받아 처리를 한후 return한 값으로 전부 수정해준다.
이때 map 메서드를 거치고 return된 값은 콜백함수에서 수정을 거치고 다시 생성된 배열이다.

forEach는 map과 달리 return하는 것이 없다.
단지 for문 대신에 사용하는 반복 메서드.
let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {
if(el.startsWith('a')) {
startsWithNames.push(el);
}
})
forEach 앞에 반복할 배열을 쓰고 콜백함수를 돌린다.
콜백함수 인자로 배열중에서 a로 시작하는 요소가 있는지 체크하고 있다면 push로 빈 배열인 startsWithNames에 뒤에서 부터 밀어넣는다. (앞에서 넣는것은 unshift)

profile
프론트엔드 개발자

0개의 댓글