변수 선언 키워드
let(변수) → 재할당O, 재선언X
const(상수 변수) → 재할당X, 재선언X, 선언과 할당이 동시
자바스크립트는 camelCase방식으로 변수명을 짓는다.
데이터 타입
String(문자열) → "안녕하세요", 'hello', 'Hello' + 'World'
Number
console.log(10+ 'a') → '10a' 출력
consle.log('100' * 20)
→숫자로 변환시도
→성공
→20000
consle.log('a' * 20)
→숫자로 변환시도
→실패
→NaN
배열의 메서드
배열(Array method)
push("데이터입력") : 배열의 가장 뒤에 추가해 줌
pop() : 배열의 가장 끝에 있는 요소를 remove
indexOf() : "데이터"가 위치한 index값을 반환, 발견하지 못한 경우 -1을 반환
includes("데이터") : "데이터"의 존재여부 확인 →true or false 반환
shift() : 배열의 가장 앞 쪽에 요소를 제거하고, 제거된 요소를 반환
unshift()는 배열 앞에 새로운 값을 추가합니다. 그리고 배열의 전체 개수를 반환
객체
러 개의 property(속성)을 갖는 데이터 타입
객체를 정의하는 방법
let userData = {
name: 'Jason',
age: 25,
gender: 'Male'
}
객체접근 방법
userDate.name
userDate['name'] → 대괄호 안이 반드시 '문자열'이 되어야 된다.
객체의 수정하기
userData.email="jason@test.com"
userDate['email']="jason@test.com"
Bracket notation으로 접근할 때는 대괄호 안에 문자열을 써준다.
let userData = {
name: 'jason',
age: 25,
gender: 'Male'
}
let name = "age"
console.log(jasonData[name]) : name을 문자열로 입력X
<실행결과>
25(안좋은 결과)
let jasonData= {
name:"Jason",
age : 25,
gender:'Male'
};
Object.keys(jasonData) : 반환타입이 배열이며, 배열요소의 타입은 문자열임
→["name', "age", "gender"]
let resultKeys =Object.keys(jasonData)
resultKeys.includes("email")
→true
resultKeys.includes("email")
→false
Object.values(jasonData) : 반환타입이 배열이며, 데이터 형태 그대로 반환
→["Jason', 25, "Male"]
let resultValues = Object.values(jasonData)
resultValues.includes('Female')
→false
객체 수정하기(심화)
key= favoriteFood
value = 배열
jasonData.favoriteFood = ["rice", "noodle", "chicken"]
html요소
inline요소: 컨텐츠 영역만큼 차지 + 옆으로 붙음
<span>, <input>, <button>
block요소: 한줄 전체차지
<div>,
<div class = "email box">
class선택자에 띄어쓰기가 있는 경우 두 개의 class를 가지게 된다.
함수의 선언
output은 함수의 이름을 의미한다.
const output = function() {
console.log('함수를 실행합니다');
}
함수의 호출
output()
버튼 태그를 활용해서 버튼 클릭시 함수를 호출하게 만듬
<button onclick="output()">버튼</button>
const dateFormMaker = function() {
console.log(document.querySelector());
}
console.log("다시시작")
localhost(도메인주소) == 127.0.0.1(IP주소)
DNS : IP주소를 도메인으로 변경해주는 서비스
OO천국(도메인)
==서울시 OO구 OO로 OO번길 2층(IP주소)
localhost:5500
5500은 "Port번호"를 의미
5500은 "localhost로 통하는 여려개의 문 중 하나"
원시타입 : 데이터 변화X, 주소값의 변화O, 하나의 데이터가 하나의 주소값을 가지고 있다.
String
Number
Boolean
Bigint
undefined
Symbol
Null
let box = "abc"
box에는 메모리 주소값이 저장되어 있다.
box ="def";
자바스크립트의 원시타입 === 자바의 참조타입
참조타입: 주소값의 주소값의 변화O
let arr = [1, 2, 3] 주소값 102
arr === [1, 2, 3] 주소값 103
=== : 주소값까지 비교
실행결과
false
자바스크립트의 참조타입 === 자바의 배열 객체
값의 복사
원시타입은 복사하는 경우 주소값을 공유X
원본의 변화가 복사본에 영향無
let origin = "hi";
let copy = origin;
origin = "bye';
console.log(copy);
<실행결과>
"h1"
참조타입은 복사하는 경우 주소값을 공유O
원본의 변화가 복사본에 영향有
let ogirin = [1, 2, 3];
let copy = origin;
origin.pop();
console.log(copy)
<실행결과>
[1, 2] ※copy배열에서 pop을 한 적이 없음