JavaScript 기초
vs code 저장 : ctrl + S
새로고침 : ctrl + R
크롬에서 파일 열기 : ctrl + O
개발자 도구 : 우클릭 - 검사
log : 기록
console.log() : 함수 호출 or 출력
let : 변수 선언
문자열끼리 덧셈 가능
문자열이 아닌 다른 자료형도 문자열로 바꿔서 연결 가능
문자열 포매팅
`백틱 기호로 선언하고, 변수를 ${}로 감싸주면 됨
예시 : let greeting = `안녕하세요 ${name} 님!`;
== : 형 변환 비교
console.log('3' == 3); // true
문자열 '3'을 알아서 숫자형 3으로 바꿔서 비교
=== : 값을 그대로 비교
console.log('3' === 3); // false
Boolean 형 변환
숫자 0과 빈 문자열('')은 false가 출력 -> falsy하다
나머지는 true가 출력 -> truthy하다
함수에 return값이 없으면 undefined가 출력됨
null, undefined 둘다 불린형에선 false
의도적으로 값이 없음을 나타낼 때는 변수에 null을 써줌
undefined는 코드를 실행할 때 보통 나타남
if문 for문 while문 다 c언어와 똑같음
console.log('*'.repeat(정수));
-> 반복해서 작성할 수 있음
배열
배열의 길이
array.length
마지막 배열의 인덱스를 출력하는 코드
console.log(array[array.length-1]);
배열의 범위가 아닌 곳은 undefined이 출력
슬라이싱
slice함수 사용
console.log(array.slice(1, 3));
-> 인덱스 1부터 2까지를 잘라내어 출력
console.log(array.slice(2));
-> 인덱스 2부터 끝까지 잘라내어 출력
console.log(array.slice());
-> 배열 그대로
배열 수정
array[2] = '안녕!';
인덱스 2번 바뀜
+chrome에서 개발자 도구 콘솔창에 배열을 펼쳐서 보면 배열의 가장 최신판을 보여줌
push : 배열에 요소 추가
array.push('자바 스크립트');
-> 배열의 맨 마지막에 추가됨
pop : 요소 삭제
array.pop();
-> push로 추가한 요소가 삭제됨
push는 배열의 길이 return
pop은 삭제한 요소 return
array.splice(start, deleteCount, item1, item2,...);
-> start인덱스에서 시작해서 deleteCount만큼 삭제하고 start인덱스에서부터 차례대로 item들이 들어옴
2개 숫자 -> start, deleteCount
1개 숫자 -> start로 start부터 끝까지 삭제
splice(2, 0, '요소') -> 삭제하지 않고 인덱스 2번에 요소를 삽입
객체
객체의 키는 문자열 타입으로 따옴표를 생략해도 됨
Property(프로퍼티) : 키와 값
Property Name(프로퍼티 이름) : 키
Property value(프로퍼티 값) : 값
프로퍼티 : 파이썬의 딕셔너리와 비슷
console.log(array['name']); == console.log(array.name);
점 표기법을 사용하는 것을 권장
console.log('name' in 프로퍼티);
-> 프로퍼티 안에 name이 있는지 확인할 수 있음
프로퍼티 이름을 변수에 넣으면
console.log(프로퍼티[변수이름]);
-> 접근할 수 있음
변수로 접근할 때는 점 표기법으로는 안됨
프로퍼티 추가
프로퍼티.color = 'purple';
-> 값을 바꾸거나 추가할 수 있음
프로터피['변수 이름'] = '요소';
프로퍼티 삭제
delete 프로퍼티.프로퍼티 이름;
delete 프로퍼티['프로퍼티 이름']; -> 띄어쓰기나 다른 문자표기가 있을 때
프로퍼티 또한 펼쳐서 보면 최신 상태를 보여줌
프로퍼티 값이 함수가 될 수 있음
그 프로퍼티를 메소드라고 함
프로퍼티 안에서 프로퍼티 이름: 함수이름;으로 적어야 함
프로퍼티.프로퍼티 이름(); //호출
-> 매개변수가 있다면 괄호 안에 인수를 적어줌
함수이름 없이 바로 프로퍼티: function(매개변수){}로도 쓸 수 있음
숫자형 메소드
.toFixed() : 소수를 다룰 때 사용, 파라미터로 숫잘르 전달해주면, 그 값만큼 소수점 아래 자릿수를 고정
let myNumber = 0.3591;
console.log(myNumber.toFixed(3)); // 0.359
문자열 메소드
.length : 문자열 길이(메소드 아니고 프로퍼티)
.charAt() 또는 charAt[] : 특정 위치(인덱스)에 있는 문자를 가져올 수 있음
let myString = 'codeit';
console.log(myString.charAt(3)); // e
.slice() : 문자열 잘라줌
.toUpperCase() : 알파벳 모두 대문자로 바꿔줌
.toLowerCase() : 알파벳 모두 소문자로 바꿔줌
.repeat() : 반복
.trim() :문자열 시작과 끝부분에 있는 모든 공백 문자를 제거해줌
배열을 이용한 for문
for(let 변수 of 배열){
}
-> 반복문을 돌 때마다 배열의 요소가 변수에 할당
객체를 이용한 for문
for(let 변수 in 객체){
}
for (let key in codeit) {
console.log(key);
console.log(codeit[key]);
}
-> 객체의 프로퍼티 이름들이 변수에 할당
프로퍼티를 변수로 접근할 때는 대괄호 표기법 사용
const : let대신 사용하여 값을 변경할 수 없게 만듦(상수)
상수는 대문자로 표시함
ex) const PI = 3.14;
배열이나 객체를 const로 선언해도 배열이나 객체의 안에 있는 값은 바꿀 수 있음
아예 값을 바꿔버리면 오류가 나지만 인덱스를 사용해 하나의 값만 바꾸는 것은 됨
Math : 수학적 기능 지원 내장 객체
console.log(Math.floor(3/2)); // 1
Data : 날짜 생성, 포매팅, 연산 지원 내장 객체
const date = new Date();
console.log(date);
결과 : Wed Jun 29 2022 13:00:00 GMT+0900 (Korean Standard Time)
new Data()는 날짜를 다루는 객체로, 특정 날짜를 저장하고 있는 객체 하나를 생성한다고 보면 됨
const date3 = new Date(2022, 5, 29);
주의: month는 월의 인덱스라서 1월은 0, 2월은 1, ..., 12월은 11입니다
날짜 포매팅
const date = new Date(2022, 5, 29, 13, 00, 00);
console.log(date.getFullYear());
console.log(date.getMonth()); // 주의: 0에서 시작
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
결과 :
2022
5
29
13
0
0
0
날짜 연산
const date1 = new Date(2022, 5, 29, 11, 30, 00);
const date2 = new Date(2022, 5, 29, 13, 00, 00);
const timeDifference = date2 - date1;
-> 차이를 밀리초(msec)로 계산
