처음 들어가는 원격강의여서 그런지 약간의 오류들이 있어서 파이썬이 아닌 자바스크립트 기초 문법부터 공부하게되었다.
각각
- 변수
- 연산자
- 조건문
- 반복문
- 함수
- 클래스와 객체
- 배열
순으로 배웠으며, 스파르타코딩에 들어오기 이전에 한 공부 덕분에 대부분의 개념은 알고 있었다.
하지만 클래스라는 개념은 사실 이번에서야 좀더 공부할 수 있게 된 상황이기 때문에!
클래스와 객체 그리고 배열 부분에 대해서 좀더 정리해보고자 한다.
다른 개념들은 추후 개인 노션 페이지를 공개하는 법을 알게 되면 따로 달아두고자한다!!
클래스
클래스는 설계도처럼 사용하는 것이 클래스라고 한다.
따라서 클래스는 템플릿이라고 보아도 괜찮다고 한다.
함수를 정의하고 해당 함수를 필요할 때마다 불러오는 것 처럼 클래스도 미리 정의해두고 필요할 때마다 클래스를 사용해서 동일한 모양의 객체를 만들 수 있다.
// 예제 코드
class Notebook {
constructor(name, price, company) {
this.name = name
this.price = price
this.company = company
}
}class 클래스명 {
생성자(매개변수들)
this.속성 = 속성
}생성자의 바디에서 함수를 호출하면 전달 될 매개변수로 각각 할당한다고 볼 수 있다.
메소드
클래스에는 특정 코드를 실행할 수 있는 메소드고 있는데, 이 메소는 객체를 생성한 후, 만들어진 객체의 메소드를 호출하는 형태로 사용하고 있다.
객체 리터널
const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}보통 많이 사용하는 방법이라고 생각한다.(예제에서 많이 볼 수 있다!)
배열
const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
console.log(rainbowColors[0]) // o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) // 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) // 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) // 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) // 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) // 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) // 6번 인덱스를 통해서 데이터에 접근. violet배열은 같은 형식의 많은 데이터들을 순서대로 저장하여 사용하고자 할 때 사용하는 것이다.
즉, 같은 타입의 데이터들을 하나의 변수로 묶어 할당, 관리하기 위해 사용하는 데이터 타입인 것이다.
이런 배열안의 있는 각각의 요소들은 엘레먼트 라고 부르며 배열안의 인덱스가 객체의 속성명과 같은 역할을 해준다.
이 인텍스는 0부터 시작하니 주의가 필요하다.
또한 배열의 길이는 배열 안에 있는 요소들이 많기 때문에 보통은 length라는 속성을 사용하여 관리한다.
그리고 배열을 선언하고 나서 새로운 요소를 더하거나 뺴는데 이 때 사용하는 것이 push와 pop이라는 메소드다.
push는 추가, pop은 제거 의 역할을 하고 있다.
