💻오늘 배운 것들 요약!
자바스크립트 공부
배열 (Array)과 객체 (Object)
배열 (Array)
하나의 변수에 비슷한 성격의 값들을 저장하는 역할을 함.
배열을 이용함으로써 데이터들을 쉽게 관리할 수 있고 유지보수성을 향상시킬 수 있다.
선언
let arr = [];
let arr = new Array();선언 방법은 두가지가 있지만, 보통 대괄호를 사용하고 간결한 첫 번째 선언 방법을 사용한다.
배열의 예시
let fruits = ["apple","banana","coconut"]문자열은 당연히 따옴표로 감싸준다.
배열 안의 값 하나하나를 요소 (Element)라고 한다.
이 요소 순서대로 숫자가 매겨지는데, 이를 index라 한다.
index 번호는 0부터 시작하기 때문에 apple의 idex는 0이 된다.
fruits[2] = "coconut"
fruits[0] = "apple"인덱스 번호로 요소에 접근하는 방법은 위와 같다.
배열의 속성 (Property)
배열은 배열의 고유한 속성이 있어, 이를 통해 배열의 길이를 구하고 배열에 내장된 함수를 이용해 사용할 수 있다.
array.length
이름 그대로 배열의 길이를 나타내는 속성이다.
배열 내 요소의 개수를 알려주는 역할을 하고, 요소를 0부터 카운팅하는 index와 다르게 1부터 카운팅한다.
배열의 메서드 (Method)
메서드 (Method)는 객체에 내장되어 있는 명령어이다.
배열에도 내장되어 있는 명령어, 즉 메서드가 존재한다.
다음은 가장 기본적인 메서드이다.
array.push()
let fruits = ["apple","banana","coconut","grape"]
fruits.push("melon")
// 결과
fruits = ["apple","banana","coconut","grape","melon"]배열 가장 뒤에 데이터를 추가한다.
array.pop()
let fruits = ["apple","banana","coconut","grape"]
fruits.pop()
// 결과
fruits = ["apple","banana","coconut"]배열 가장 뒤에 존재하는 데이터를 삭제한다.
array.includes()
let fruits = ["apple","banana","coconut","grape"]
fruits.includes("strawberry")
// 결과
false해당 배열에 파라미터로 넣은 데이터가 포함되어 있는지 boolean 값으로 반환한다.
객체 (Object)
객체는 키 (Key)와 값 (Value) 쌍으로 보관하는 프로퍼티의 집합이고, 각 값에 이름 (키)를 부여해 보관할 수 있는 장점이 있다.
선언
let obj = {
key1: value1,
key2: value2,
// ...
};배열의 예시 및 프로퍼티 접근 방법
1. 점 표기법 (dot notation)
let car = {
brand: "Hyundai",
model: "Sonata",
year: 2023,
color: "black"
}
// 점 표기법 접근
car.brand = "Hyundai"
car.color = "black"2. 괄호 표기법 (Bracket notation)
let car = {
brand: "Hyundai",
model: "Sonata",
year: 2023,
color: "black"
}
// 괄호 표기법 접근
car["year"] = 2023
car["model"] = "Sonata"Bracket notation은 주의점이 있다.
문자열을 입력할 때 괄호("")를 쓰지 않는다면 key값이 아닌 변수로 인식되기 때문에 key값에 접근을 하기 위해선 괄호를 꼭 작성해야한다.
객체의 메서드
객체에도 내장된 메서드는 존재한다.
오늘 배운 메서드는,
Object.keys()
let car = {
brand: "Hyundai",
model: "Sonata",
year: 2023,
color: "black"
}
Object.keys(car)
//결과
["brand","model","year","color"]객체의 key를 가져와 배열로 반환하는 메서드이다.
Object.values()
let car = {
brand: "Hyundai",
model: "Sonata",
year: 2023,
color: "black"
}
Object.values(car)
//결과
["Hyundai","Sonata",2023,"black"]당연히 값을 가져와 배열로 반환하는 메서드이다.
이외에도 사용하는 메서드는 많으니 나중에 더 찾아봐야겠다.
오늘의 회고
미니 프로젝트는 조원 분들의 하드캐리로 잘 마무리 되었다.
디자인이 깨지는 부분은 없는지, 미니 프로젝트에 더 추가할 요소들은 없는지, 기능적으로 버그는 없는지 확인하였고 다 마무리가 되었다.
앞으로 발표까지 하루가 더 남았는데 그 안에 더 생각해보고 발표는 어떻게 해야할지 구상을 해야한다.
오늘은 공부를 하는 것을 위주로 했는데 자바 스크립트에서 많이 뒤쳐지는 것 같아 이전에 봤던 것들을 복습하는 위주로 하였다. 앞으로 남는 시간은 빠르게 복습하고 이번주 안으로 많이 익힐 수 있도록 하는 게 목표이다.
