📌 오늘의 생각
오늘은 데이터를 다루는 방법에 대해 배우는 날이다. 변수와 상수를 통해 데이터를 생성하고 다룰 수 있었는데, 각각의 종류에 따라 특징이 달랐으며, 이러한 데이터를 바탕으로 데이터를 여러 개 다루어야 하는 상황이 생겼을 때, 배열과 객체를 활용하여 데이터를 효율적으로 다루는 방법에 대해 배웠다. 학부 시절 JAVA를 배울 때, 다뤘던 내용이 겹쳐 상대적으로 쉽게 이해 할 수 있었던 것 같다. 자바스크립트를 새롭게 배우며 하나하나 알아가는 즐거움이 있는 것 같다. 아직 걸음마를 뗀 수준이지만, 앞으로 이러한 즐거움을 잊지 않고 힘들때마다 지금 이순간을 생각하며 좋은 개발자가 되고 싶다.
📒 목차
JavaScript
- 변수와 상수
- HTML ↔ JS 연결하기
- 배열 (Array)
- 객체 (Object)
JavaScript
1️⃣ 변수와 상수
- 데이터를 담는 공간이다
- 변수는 변할 수 있지만 상수는 변할 수 없다
- 변수 :
var,let - 상수 :
const
✅ 변수와 상수 만들기
1. 선언 (declaration)
- 변수의 이름을 알려주는 행위이다
let 변수명; let test; // -> test라는 변수가 생성 되었습니다
2. 할당 (definition)
- 데이터가 담길 수 있는 변수가 생성 되었기 때문에, 변수에 데이터를 할당할 수 있다
- 데이터 할당 : 변수에 데이터를 담아주는 행위이다
변수명 = " "; test = "시험"; // test라는 변수에 "시험"이라는 데이터가 담겼다 // -> test라는 변수가 생성 되었습니다
3. 선언 + 할당
- 선언과 할당 동시에 하기
- 자바스크립트에서 “=” 는 같다의 의미가 아니라 “할당”의 의미이다
let test = "시험";
✅ 변수와 상수의 특징
- 변수와 상수는 각자의 특징이 있다
재선언 여부: 변수명을 중복으로 선언할 수 있는가재할당 여부: 대이터를 수정할 수 있는가
✅ 변수와 상수의 작명 규칙
camelCase
: javascript 에서 주로 사용snake_case
: python 에서 주로 사용
2️⃣ HTML ↔ JS 연결하기
// HTML과 JS 연결하기 <script src="파일명.js"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>변수와 상수 실수</title> <script src="./01-variable.js"/> </head> <body> </body> </html>
3️⃣ 배열 (Array)
- 담아야하는 데이터 여러개일 경우 사용한다
- 여러 개의 데이터를 한번에 담을 수 있다
✅ 배열에 데이터 담기
// 빈 배열 const blanksArr = [] // 아무것도 안담는 것도 가능 // 숫자들로 이루어진 배열 const numbers = [2, 10, 7, 3.3] // 숫자 담기 // 문자들로 이루어진 배열 const classmates = ["사과", "포도"] // 문자 담기
✅ 배열의 특징
index
- 배열의 각 데이터의 위치
length
- 배열의 길이
❗index는 0부터, length는 1부터 카운트
✅ 배열의 메서드와 속성
let array = [1, 2, 3, 4, 5]; // 1. array.length / 배열의 길이 구하기 array.length -> 5 // 2. array[] / 배열의 값 꺼내기 array[0] -> 1 array[1] -> 2 array[2] -> 3 array[3] -> 4 array[4] -> 5 // 3. array.push() / 배열 맨 뒤에 값 추가 array.push(99) -> [1, 2, 3, 4, 5, 99] // 4. array.pop() / 배열 맨 마지막 값 삭제 array.pop() -> [1, 2, 3, 4, 5] // 5. array.sort() / 배열 요소 정렬 array.sort() -> [1, 2, 3, 4, 5] // 정해진 규칙에 따라 정렬, 숫자의 경우 크기순 // 6. array.includes() / 배열 대이터 확인 array.includes(1); -> true array.includes(66); -> false // 7. array.concat(배열명) / 배열 2개 연결 let abc = ["가", "나", "다"]; array.concat(abc) -> [1, 2, 3, 4, 5, "가", "나", "다"] // 8. array.join() / 배열을 문자로 만들기 array.join("-") -> 1-2-3-4-5 array.join("*") -> 1*2*3*4*5 // 9. array.slice() / 배열 분리 array.slice(0, 1) -> [1] // 10. array.filter() / 배열에서 원하는 요소 뽑기 array.filter((data) => (data ==== 1)) -> [1] array.filter((data) => (data !== 1)) -> [2, 3, 4, 5] // 11. array.map() / 배열의 모든 요소 변경 array.map((data) => (data + "가")) -> ["1가", "2가", "3가", "4가", "5가"]
✅ 문자열도 배열처럼 다룰 수 있다
// 문자열(배열) const classmates1 = "철수" classmates1[0] // "철" classmates1[1] // "수" // 문자열 쪼개기 const classmates2 = "철수&영희" classmates2.split("&") // ["철수", "영희"] // 문자열 양쪽 공백 제거하기 const classmates3 = " 철수 & Milk " classmates3.trim() // "철수 & Milk" // 문자열 대소문자 변환하기 classmates3.toUpperCase() // "철수 & MILK" classmates3.toLowerCase() // "철수 & milk" // 문자열에 빈칸 채우기 const chulsooNumber = "1234" chulsooNumber.padStart(10, "0") // "0000001234" chulsooNumber.padEnd(10, "0") // "1234000000"
4️⃣ 객체 (Object)
- 여러 데이터를 하나의 그룹으로 묶는 것이다
- 각각의 데이터를
key(키),value(값)으로 연결
❗값은 비어있을 수 있지만 키는 비어있을 수 없다!!
✅ 객체의 특징
// 객체 선언하기 const classmate = { name: "철수", age: 8, school: "꽃샘초등학교" } ---------------------------------- // 객체의 값 꺼내기 classmate.name // 철수 classmate['name'] // 철수 ---------------------------------- // 객체의 키&값 삭제하기 delete classmate.name classmate = { age:8, school: "꽃샘초등학교" }
✅ 객체와 배열 함께 쓰기
- 실무에서 많이 사용하는 방법중 하나이다
const classmates = [ { name: "철수", age: 8, school: "다람쥐초등학교" }, { name: "영희", age: 8, school: "다람쥐초등학교" }, { name: "훈이", age: 7, school: "토끼초등학교" } ] --------------------------------------------------- // 배열안의 객체에서 뽑아내기 classmates[0].name // 철수 classmates[0].age // 8 classmates[0].school // 다람쥐초등학교 --------------------------------------------------- // 배열 안의 객체에서 원하는 객체(8살 이상)만 뽑아내기 classmates.filter((data) => (data.age >= 8))
