자바스크립트
- 웹페이지를 동적으로 만들기 위한 언어이다.
- 데이터를 처리 하기 위한용도로 사용된다.
변수와 상수
- 변수와 상수는 데이터를 담을 수 있는 공간이다.
- 변수(값이 변할 수 있음) : let, var
- 상수(값이 변할 수 없음) : const
변수와 상수 만들기
- 선언(declaration)
- 변수와 상수를 사용하기 위해서는 변수 또는 상수를 선언해야함.
- 선언 : 변수의 이름을 알려주는 행위
let apple // apple 이라는 변수 생성이됨.
- 할당(definition)
- 데이터를 담을 수 있는 변수가 생성되었으면, 변수에 데이터를 할당함.
- 할당 : 변수에 데이터를 담아주는 행위
apple = "맛있는 사과" // apple 이라는 변수에 "맛있는 사과"라는 문자열이 담겨져 있음.
- var는 같은 이름의 변수를 선언 할 수 있음(실무에서는 사용하지 않음)
- let은 같은 이름의 변수를 선언 할 수 없으나, 데이터 변경이 가능함.
- const는 한번 선언된 이름과 값을 변경 할 수 없음.
- 변수와 상수 작명 규칙
- 각 언어마다 작명 규칙이 존재하니 최대한 따라 주는게 좋음.
Chrome 개발자 도구
- 크롬 화면에서 ctrl +shift + i 누르면 볼 수 있다.
배열(Array)
- 한 줄로 나열된 통을 연상하면 된다 .
- 배열에는 여러개의 데이터를 한번에 담을 수 있다.
- 배열을 사용 할 때는 [] 대괄호 안에 쉼표로 구분하여 데이터를 삽입한다.
배열의 모양
배열의 특징(함수)
- index(인덱스) : 배열에 있는 각 데이터의 위치
- array.length() : 배열의 길이를 알려는 함수이다. index와 다르게 숫자 1부터 시작함.
- array.push() : 새로운 값을 입력하는 함수.
- array.pop() : 배열의 맨 마지막 값을 삭제.
- array.sort() : 배열 안에 있는 값들을 정렬할 때 사용.
- array.includes(값) : 매개변수로 넣은 값이 배열에 존재 하는지 확인이 가능.
- array.concat(array2) : 두 개의 배열을 연결 할 수 있음.
- array.join() : 배열에 있는 값을 문자로 변경함.
- array.slice(startIndexNum, endIndexNum) : 원하는 인덱스 넘버 사이의 있는 값을 따로 분리 가능함.
- array.filter() : 원하는 요소만 따로 뺄 수 있음.
- array.map() : 배열에 있는 모든 데이터에 있는 요소들을 변경 가능함.
문자열도 배열
- 문자열이 들어가 있는 변수에 있는 값을 변수명[index]로 하나씩 빼낼 수가 있음.
객체
- 다양한 데이터를 하나의 그룹으로 묶어 놓은 것을 의미한다.
- 다양한 데이터를 하나로 묶기 위해서, 각각의 데이터를 키와 값으로 연결함.
객체 선언과 사용방법
- 객체를 생성할 시 {} 괄호 안에 키 : 값을 입력하여 만들수 있음.
- 객체에 담겨진 내용을 . 닷 노테이션을 이용하거나 [] 브라켓을 이용하여 사용할 수 있음.
객체 생성방법
데이터 사용방법
// 객체 선언하기
const classmate = {
name: "철수",
age: 8,
school: "꽃샘초등학교"
}
// 객체의 값 꺼내기
classmate.name // 철수
classmate['name'] // 철수
// 객체의 키&값 삭제하기
delete classmate.name
classmate = {
age:8,
school: "꽃샘초등학교"
}
객체를 배열로 관리
- 여러명의 정보를 가지고 있는 객체를 배열로 관리하여 필요에 따라 하나씩 사용가능함.
// 객체들을 배열에 담아서 선언하기
const classmates = [
{
name: "철수", // 1번째 객체
age: 8,
school: "다람쥐초등학교"
},
{
name: "영희", // 2번째 객체
age: 8,
school: "다람쥐초등학교"
},
{
name: "훈이", // 3번째 객체
age: 7,
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))
// classmates = [
// { name: "철수", age: 8, school: "다람쥐초등학교" },
// { name: "영희", age: 8, school: "다람쥐초등학교" },
// ]
