BOM (Browser Object Model)
브라우저에서 제공하는
API로 자바스크립트를 통해 브라우저에서 제공하는 기능들을 사용할 수 있도록 도와주는 역할을 함.
window라는 객체가 바로 브라우저의 가장 최상위 객체이며, 이 window 객체 안에 아래에서 보이는 여러가지 도구들이 들어있음.
window.alert(); // 브라우저에 메세지 다이얼고르를 띄워줌
window.prompt(); // 브라우저에 사용자의 데이터를 입력받을 수 있는 입력창을 띄움
window.confirm(); // true 혹은 false 값을 반환하는 다이얼로그를 띄움
console.log(); // 콘솔창에 로그 메세지를 보여줌
console.error(); // 콘솔창에 에러 메세지를 보여줌
console.table(); // 콘솔팡에 데이터를 테이블 형태로 제공
📍 자주 사용되지 않지만 한번 사용할 때 중요하게 사용되는것
console.group('남자그룹')
console.group('하이라이트')
console.log('윤두준')
console.log('양요섭')
console.log('이기광')
console.log('손동운')
console.groupEnd()
console.group('샤이니')
console.log('온유')
console.log('종현')
console.log('민호')
console.log('키')
console.log('태민')
console.groupEnd()
console.groupEnd()
변수
변할 수 있는 수,변할 수 있는 정보라는 뜻으로
프로그램을 만들 때 필요한 숫자나 문자와 같은 데이터를 보관하는 공간이 필요한데, 이러한 공간에 들어가는 데이터가 무엇인지 이름을 붙이는 포스트잇 같은 역할을 하는 것
변수명 규칙
- $, _를 제외한 공백, 특수문자, 반점, 온점, 물음표를 사용할 수 없음
- 첫 글자는 숫자가 될 수 없음
- 대소문자를 구별함
- 예약어가 쓰일 수 없음
- 유니코드 문자도 사용할 수 있음 (but 비추)
변수의 특징
var,let,const의 키워드 사용가능var, let -> 변수
const -> 변경 불가능한 수(상수)- var, let, const 키워드는 변수를 선언할 때 한번만 사용
- var 키워드는 초기화가 필요없고 재할당이 가능하며 생략할 수 있음(생략 권장X)
- let과 const는
블록-레벨 선언으로 불리며, 선언된 코드 블록 밖에서 접근할 수 없으며 재정의가 불가능함 - const의 경우 반드시
초기화필요
💡 const를 사용하는 것이 더 좋은 이유
- 의도하지 않은 값의 변경 방지
-> 코드의 예측 가능성을 높이고 버그를 줄일 수 있음- 가독성 높임
-> 다른 개발자들이 변수의 값이 변경될 가능성이 없다는 것을 빠르게 인지 가능해 가독성을 높이고 유지 보수성 향상
📍 블록 스코프 (block scope)
여러줄의 코드를 하나로 묶어주는 단위인 블록 안에서만 유효한 코드의 범위
Type(자료형)
데이터의 모양이나 형태
원시타입: 단순한 데이터 저장객체타입 (Object Types): 객체로서 저장
원시타입
값을 변수에 저장할 때 값 자체가 저장
-> 원시값을 다른 변수에 할달할 때 값의 참조가 저장되는 것이 아닌 값 자체가 저장됨
원시타입 종류 : string, number, boolean, undefined, symbol, null
문자열(String)
작은따옴표나 큰따옴표로 둘러싼 일련의 문자
문자열의 특징
index라 불리는 순서가 있음 -> [ ]를 사용해 특정 순서에 위치한 글자를 가져올 수 있음length속성을 통해 문자열의 길이를 구할 수 있음- 한번 만들어진 문자열은 절대 변하지않음 (불변-immutable)
+연산자로 연결될 수 있음 -> 연결된 순서만 동일하다면 같은 문자열로 판단
문자열 메소드
-
indexOf() : 문자열 안에 존재하는 특정한 문자를 검색하여 문자의 인덱스를 반환
-
lastIndexOf() : indexOf()와 정반대의 순서로 특정한 문자를 검색
❗ 검색 순서가 바뀌었다고 인덱스 번호는 바뀌지 않음)
-
match() : 정규표현식을 인자로 받아 일치하는 문자열을 찾아 배열의 형태로 변환
-
replace() : 문자열 안에서 일치하는 첫번째 문자열을 찾고, 대체하여 새로운 문자열을 반환
-
slice() : 문자열의 일부분을 복사하여 샐운 문자열 반환
-
split() : 인자로 전달하는 구분자로 문자열을 쪼개어 각각의 값을 원소로하는 배열을 반환
-
toLowerCase(), toUpperCase() : 문자열을 소문자 혹은 대문자로 변환한 새로운 문자열을 생성하여 반환
-
trim() : 문자열 앞 뒤의 공백을 제거
-
padStart() : 자릿수에 맞춰 값을 채움
숫자형(Number)
숫자를 처리하기 위해 고안된 자료형
숫자형의 특징
- 배정밀도 64비트 부동소수점 형식을 다름
- 여러가지 연산이 가능함
- 숫자를 의미하는 여러가지 특수 값 존재(
Infinity,NAN,e)
숫자형 메소드
-
parseInt() : 문자열을 정수로 바꿔주는 함수
-
toString() : 숫자를 문자열로 변환
-
isNaN() : 데이터를 숫자로 변환했을 때 NAN인지 아닌지 확인하기 위해 사용
-
toLocaleString() : 숫자를 사용자가 사용하는 언어의 표기대로 변환하여 문자열로 반환
-
Math 내장객체를 이용한 연산 : 자바스크립트가 기본적으로 가지고 있는 Math 객체를 이용하면 좀 더 유용한 여러 연산 가능
논리 자료형(Boolean)
true 또는 false 값 중 하나를 가지며, 주로 조건문(if)의 결과값으로 사용
관계 연산자
두 값을 비교하여 true 또는 false 값을 반환
논리 연산자
- 논리곱(&&) 연산자 :
모든피연산자가Truthy일 때가장 마지막 Truthy값을 반환하고,그 외의 경우에는첫번째 falsy 값을 반환- 논리합(||) 연산자 :
모든피연산자가Falsy일 때가장 마지막 Falsy값을 반환하고,그 외의 경우에는첫번째 Truthy 값을 반환- 논리부정(!) 연산자 :
단일한 피연산자를 가지며, 그 피연산자가Truthy이면 false를 반환하고,Falsy이면 true를 반환
💡 Truthy와 Falsy란?
-
Truthy : 불리언 표현식에서
true로 평가되는 값
-> true, 0을 제외한 모든 숫자, 빈 문자열을 포함한 모든 문자열, 모든 객체: 객체, 배열, 함수 등 모든 객체 -
Falsy : 불리언 표현식에서
false로 평가되는 값
-> false, 숫자 0, 빈 문자열, null, undefined, NaN
undefined
변수가 값이 할당되지 않은 경우를 가리키는 데이터 타입
null
값이 없음을 나타내는 데이터 타입
