오늘 배운 것
1. Javascript
- 변수와 상수
- 변수 선언 방법(var, let, const)
- 배열 (인덱스, 배열 메서드)
- 객체 (key, value)
변수와 상수
- 변수 : 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수
- 상수 : 변하지 않는 일정한 값을 가진 수나 양
자바스크립트에서 변수, 상수는 데이터를 담는 공간이다.
변수선언
Javascript 변수 선언에는 var, let, const가 있다.
var, let, const의 차이점
- 선언 : let (변수명)
- 할당 : 변수명 = 데이터
- 선언 + 할당 : let 변수명 = 데이터
| var | let | const | |
|---|---|---|---|
| 이름중복(재선언) | 가능 | 불가능 | 불가능 |
| 데이터 수정(재할당) | 가능 | 가능 | 불가능 |
실무에서는 var을 사용하지 않고
주로 let을 변수로, 변경되면 안되는 데이터일 경우 const를 상수로 사용한다.
변수와 상수 작명 규칙
변수 이름은 항상 소문자로 시작한다.
- camelCase : let myMoney = 300 -> 자바스크립트에서 주로 사용
- snake_case : let my_money = 300 -> 파이썬에서 주로 사용
📌 자바스크립트 파일연결하는 방법
html파일의 head 부분에 작성해준다.
<script src="./파일명.js"></script>배열
배열에 변수들을 한번에 담을 수 있다.
예) let students = ["길동", "철수", "영희", "준석"]
빈 배열, 숫자 배열, 문자열 배열이 있다.
Index
배열에 있는 각 데이터의 위치를 나타내준다.
인덱스는 0부터, 길이는 1부터 카운트 한다.
배열의 다양한 기능
const array = ["배열"]
-
array.length 배열의 길이 구하기
-
array[인덱스] 배열의 값 꺼내기
-
array.push() 배열 맨 뒤에 값 추가
-
array.pop() 배열 맨 마지막 값 삭제
-
array.sort() 배열 요소 정렬
-
array.includes(값) 배열 데이터 확인
-
array.concat(array2) 배열 2개 연결
-
array.join() 배열을 문자로 만들기
-
array.slice() 배열 분리
-
array.filter() 배열에서 원하는 요소 뽑기
-
array.map() 배열의 모든 요소 변경
문자열 배열
문자열도 배열처럼 다룰 수 있다.
예시)
const email = "lalala@gmail.com"
email[0] = "l"
객체
요소들을 객체로 구분하여 한번에 모두 담을 수 있다.
키(key)와 값(value)으로 구성되어 있으며, {key : value} 형태로 작성한다.
const profile = {
name : "홍길동", //key:name, value:홍길동
age : 49,
height :, // 키는 비어있으면 안되지만, 값은 비어있을 수 있다.
school : "중학교"
}객체에 담긴 값을 가져오는 방법
변수명.key
변수명["key"]
배열에 담긴 객체
배열 안에 객체를 담아 인덱스를 사용해 데이터를 활용할 수 있다.
let classmates = [
{ name : "철수", age: 13, school: "다람쥐초등학교"},
{ name : "영희", age: 8, school: "공룡초등학교"},
{ name : "훈이", age: 11, school: "거북이초등학교"}
]
classmates
// (3) [{…}, {…}, {…}]
classmates.length
// 3
classmates[0].school
// '다람쥐초등학교'
classmates[2].age
// 11오늘의 회고
자바스크립트 기초에 대해 간단하게 배웠다.
아직 기초라 그런지 생각보다는 어렵지 않았는데 점점 어려워질거 같아 예습을 해야겠다.
그리고 싸이월드 홈페이지 만들기 실습을 팀원들과 다시 처음부터 해보기로 했는데 생각보다 어려웠다.
그래도 flex 속성이 점점 이해돼서 사용하는게 수월해졌다. 코드를 처음부터 차근차근 복습해봐야겠다.
