Javascript
→ 웹 페이지에서 동적 기능을 구현할 수 있도록 하는 스크립팅/프로그래밍 언어
내장방식 VS 링크방식
- 내장방식 : 간단하게 작성, 특정 페이지에서만 작동
- 링크방식 : 코드 양 많아질 경우 파일로 관리, 여러 페이지에서 적용시키고 싶을 경우 사용, 유지보수 용이
JS 표기법
- dash-case : hello-javascript-hello-world
- snake_case : hello_javascript_hello_world
- camelCase : helloJavascriptHelloWorld
- PascalCase : HelloJavascriptHelloWorld
변수 선언
var - 선언, 초기화 동시에 이루어짐, 할당하지 않으면 undifiend 할당 / 중복선언, 재선언 가능
let - 중복선언 불가능, 재할당 가능
const - 선언시 초기화를 반드시 동시에 진행 / 재선언, 재할당 불가능
변수 이름으로는 문자, 숫자, $, _만 사용 가능/첫 글자 숫자 사용 불가/예약어 사용 불가
자료형
- String
예)let name = '홍길동';
문자와 변수 동시에 써야 할 경우,
console.log("문자", 변수, "문자);,("문자" + 변수 + "문자),백틱 ${variable}사용 - Number
예)let number = 123;,let opacity = 0.7; - Boolean
예)let checked = true; - Undefined
예)let undef;(값이 할당되지 않은 상태) - Null
예)let empty = null;(의도적인 빈 데이터 상태) - Array(배열)
예)let fruits = ["Orange", "Pineapple", "Apple"];(인덱스 값들은 자료형 여러개 가능, [index]로 배열의 인덱스값 가져옴)
변수명.push(variable)- 배열의 맨 뒤 추가
변수명.pop()- 배열의 맨 뒤 인덱스 삭제
변수명.unshift(variable)- 배열의 맨 앞 추가
변수명.shift()- 배열의 맨 앞 인덱스 삭제
변수명.indexOf(variable)- 찾고자하는 값의 인덱스
변수명.includes(variable)- 값이 있는지 없는지 여부
변수명.reverse()- 배열 순서 뒤집어서 반환
변수명.join()- 매개변수 기준으로 문자열로 병합 - Object(객체)
ex)
let cat = {
name : '나비',
age : 1,
isCute : true,
mew : function() {
return '냐옹';
}
};- typeof
자료형이 어떤건지 알려줌
예)console.log(typeof 3);result = number
null이나 undefiend에도 사용 가능 - 형변환
문자형변환 -String(),toString()(toString()은 null과 undefined에서 문제 발생)
숫자형변환 -Number(),parseInt(),parseFloat()
연산자
- 대입연산자 :
= - 비교연산자 :
--,!-,===,!===,>,>=,<,<=(===은 자료형까지 비교) - 산술연산자 :
+,-,*,/,%,**(거듭제곱) - 논리연산자 :
!,&&,|| - 증가/감소 연산자 :
number++,--number
함수
함수 선언문
function sayHello() {}
함수 표현식
let sayHello = function() {}
화살표 함수
let sayHello()=> {}함수 선언문 : 어디서든 호출 가능
함수 표현식 : 변수 선언코드에 도달하면 생성, 이후 사용 가능
Hoisting - 자바스크립트 코드가 실행되기 전 변수/함수 선언을 스코프에 등록하여 언제든 사용 가능
조건문
if
if(조건1) {
//조건1 참, 실행
} else if (조건2) {
//조건2 참, 실행
} else {
조건1, 조건2 참이 아닐때 실행
}switch
switch(변수) {
case 값1:
//변수와 값1 일치, 실행
break;
case 값2:
//변수와 값2 일치, 실행
break;
default:
//일치하는 값 없음, 실행
break;
}3항 연산자
let name = "길동";
name != "길동" ? console.log("정답") : console.log("떙");조건식 ? 조건이 참인 경우 : 조건이 거짓인 경우;
반복문
for문
for(let i=0 ; i<100 ; i++) {
console.log("hello world");
}for of문
for(let idx of arr) {
console.log("hello world");
}for each문
array.foreach((variable, index, arr)=> {
console.log(variable); //변수
console.log(index); //인덱스
console.log(arr); //배열
});filter
let arr2;
arr2 = array.filter(variable)=> {
return; //조건에 만족하면 반환
});while문
while(조건) {
//실행할 코드
}반복문 내 break - 반복문 멈추고 탈출
반복문 내 continue - 반복문 한번 멈추고 다음으로 진행
문자열 관련 메서드
length: 문자열의 길이 반환toUpperCase(),toLowerCase(): 문자열 대/소문자 변경indexOf(variable)- 문자열 매개변수 받아 몇번째 인덱스인지 반환slice(startIndex, endIndex)- startIndex부터 endIndex-1 까지의 문자열 반환replace(str1, str2)- str1을 str2로 변경replaceAll(str1, str2)- str1을 전부 찾아 str2로 변경repeat(n)- 문자열에 대해 n번 반복trim()- 문자열 양 끝 공백 없앰split()- 매개변수 문자열 기준으로 문자열 쪼개서 배열로 저장
