자바스크립트
클라이언트 단에서 웹 페이지가 동작하는 것을 담당
ES5, ES6 문법 사용
자바스크립트 언어의 특징
컴파일 언어와 인터프리터 언어
컴파일 언어 :
- 프로그램 코드를 컴파일해서 컴퓨터가 알아들을 수 있는 기계어로 번역해준다.
- 실행 파일을 만들어서 실행을 시켜준다. (JAVA, C++)
장점 :
파일의 크기가 큰데 실행속도가 빠르다.
(기계어로 변환해서 실행하기 때문에 속도가 빠르다.)
실행전에 오류를 찾을 수 있다. (컴파일 하면서 실행 전에 오류를 찾을 수 있음)
인터프리터 언어 :
- 프로그램 코드를 한줄씩 읽으면서 번역을 한다.
- 실행을 바로 한다.
장점 :
- 프로그램이 실행 도중에 수정되어도 소스코드 수정이 가능하다.
- 그래서 디버깅을 빠르게 할 수 있다.
단점 :
실행되기 전에는 오류를 알 수 없다.
html와 css는 화면 출력 / javaScript는 논리
이 행동 자체의 의미 / 선언과 할당의 차이
typeof : 타입을 체크할 때 사용하는 내장 함수
자바스크립트의 변수
컴퓨터의 힙 메모리에 저장된다.
컴퓨터의 스택 메모리는 실행할 내용을 여기에 담을것.
- var, let, const : 예약어
var, let - 할당과 재선언의 차이
var
재할당 O
재선언 O
즉 둘다 가능하고
호이스팅이 가능하다.let == ES6
재할당 O
재선언은 X 불가능.
var가 let보다 예전에 나온 함수여서 요즘은 let을 주로 사용한다.
호이스팅이 불가능하다.
선언 전에 사용하면 레퍼런스 에러가 뜬다.const
재할당 X
재선언 X
둘 다 안되고 보통 상수에 사용한다.
호이스팅도 불가능하다.var myname; === 변수를 선언한다.
myname = "화이팅"; === 변수에 값을 할당하겠다.
=는 한개만 써야하고 할당한다 라는 뜻 (할당연산자)
var myname; 이렇게 재선언이 가능하다. 예약어 var을 또 사용해서 변수를 선언할 수 있다.
var myname = "화이팅"; <- "" 문자열 표기법
console.log(myname + 2); -> "화이팅2"
- 문자열과 숫자를 더하게 되면 원래는 계산이 안되지만 문자형으로 통합되어서 숫자 2가 뒤에 붙게된다.
- 만약 앞에 숫자가 있고 뒤에 자료형이 있다면 2화이팅이 된다.let myname2; let이라는 예약어로 변수를 선언
myname2 = "화이팅2" 재할당은 가능
myname2 = "화이팅3"
let myname2; === 재선언이 불가능하다.const === 상수를 다룰때 사용하는 예약어
재할당 X 재선언 X
변수 선언 방법
예약어[let, const] 변수명[원하는 변수명] = " [데이터 즉 변수의 넣을 값]
- 첫글자는 숫자면 안된다.
스크립트는 body와 html 사이 스크립트 영역을 만나면 스크립트를 읽고 진행한다.
- 이유는 스크립트에서 요소를 다루게 되면 요소가 생기고 스크립트로 제어하기 위해서
변수의 자료형
문자열은 ''. "" 로 작성한다.
'문자열', "문자열"
자료형의 종류
숫자, 문자, bool, null, undefined
숫자는 따움표 없이 그냥 써도 됨
문자는 '', "" 필요
bool은 2진수로 true, false
null은 변수를 선언하고 값을 없음으로 할당한 상태 ex) 빈 휴지곽도 없을 때
undefined는 변수를 선언하고 값을 할당하지 않은 상태 ex) 휴지를 다 쓰고 빈 휴지곽만 남아있을 때
형변환 관련 정리
형변환 자료형이 변환된다.
숫자에 문자를 더하면 형변환이 일어난다.
var number1 = 1
var number4 = "4"
1은 숫자 자료형이었지만
14라는 문자열로 형변환 된다.
ex) console.log(number1(숫자형) + number4(문자열);
즉 숫자형과 문자형이 같이 있을 때는 문자열로 변환된다. == 14
표기법
- 카멜 표기법 (제일 많이 사용됨) : let myName;
- 파스칼 표기법 : let MyName;
- 스네이크 표기법 : let my_name;
Window
window === 브라우저의 기능과 이벤트와 등등 사용할 수 있는 기능을 제공해줌
비교연산자
- == 양 쪽의 값이 같은지 비교
- === 양 쪽의 값의 자료형까지 비교
- < > 양 쪽의 값이 크고 작은지 비교
정리하자면
용어 예약어(var, let, const) 변수명(우리가 정하는 이름) = (할당) 1(변수의 값이자 자료형은 number)
자료형
String (문자), Number(숫자), Boolean(true,false)
Undefined(변수는 선언되어 있으나 값을 할당하지 않음), null(변수 선언 후 값을 없음 할당)
할당연산자
= 는 할당, == 는 양쪽 값이 같은지 비교, === 는 양쪽 값이 같고 자료형도 같은지 비교
비교연산자
값은 true false
결과물을 boolean 타입으로 반환한다.
ex)
let a;
let b;
a = 1;
b = "1"; 일 때
===은 데이터 타입까지 검사를 한다.
console.log(a === b); -> false
console.log(a == b); -> true
부정 연산자 -> "!"
console.log(!false); -> true
비교 연산자와 부정 연산자
let a = 10;
let b = 15;
console.log(a !== b); -> 원래 false 지만 부정연산자가 있어서 true
동적 언어
자바와 다르게 자바스크립트는 int, string 형을 정해줬을 때 같은 형으로만 변환할 수 있는게 아니라
자바스크립트는 형을 따로 정해주지 않고 문자형에서 자료형으로 변환 가능하다.
자바 = 정적 , 자바스크립트 = 동적
연산자 정리
console.log(1 + 1);
console.log(1 - 1);
console.log(4 / 2);
console.log(7 % 2);
console.log(2 3);
여기서 +,-,/, 는 연산식 / 뒤에 =는 할당 / %는 나누고 나머지 값
= == === < > <= => : 비교연산자
전위연산자와 후위연산자 정리
값을 호출하고 증가 건지 ( x++ ) / 값을 증가시키고 호출 할건지 ( ++x )
++은 값을 1씩 증가
+= 5는 5씩 증가
-= 5는 5씩 감소
예제)
let x = 10;
console.log(x++ + ++x); 5 + 7 = 12
console.log(x++ + --x); 5 + 5 = 10
console.log(x-- + ++x); 5 + 5 = 10
console.log(x-- + --x); 5 + 3 = 8
계산기 예제)
const number0 = "0";
const number1 = "1";
const number2 = "2";
const number3 = "3";
const number4 = "4";
const number5 = "5";
const number6 = "6";
const number7 = "7";
const number8 = "8";
const number9 = "9";
const add = "+";
const로 선언과 할당을 했을 때는 재선언과 재할당이 안되기 때문에
선언한 변수이름과 할당된 값이 바뀌지 않음
let result = "";
let은 재할당이 가능함
result = number1 + number2 + add + number2 + number0;
console.log(result); -> 12+20으로 콘솔에 출력됨
왜냐하면 number1과 2 문자열로 할당했기 때문에 "1", "2" 로 할당했기 때문에 3이 아니라 1과2가 붙어서 12로 출력되고
add에도 "+" 문자열을 할당했기 때문에 12+
그리고 마지막 number2와 0에 문자열로 "2", "0"을 할당했기 때문에 2가 아니라 20로 출력되어서 콘솔 결과 출력값은 12+20이 됨
문자형이 아닌 숫자형으로 표헌하고 싶을 때 Number()을 사용하면 된다.
- 첫글자 대문자로 표시해야 함
ex) let twentyfive = "25";
Number(twentyfive); === 25
간단한 예제
let fifty = 50;
let twentyfive = "25";
x = fifty + Number(twentyfive);
console.log(x); -> 75가 나오게 된다.
console.log(fifty + twentyfive); -> 자료형과 문자형이 만나면 문자형으로 콘솔에 출력됨 (형변환)-> "5025"
실습
- 변수를 선언하시고 50에 -5씩 5번을 빼면서 로그에 출력하자
let a = 50;
for(let i = 0; i < 5; i++) {
a -= 5
}
console.log(a);헷갈리는 문제
let x = 5;
console.log(x++ + ++x); 일 때
x++는 먼저 실행. 하지만 후위연산자이기 때문에 더해지고 나서 6이 되고 그래서 x++ + 까지는 5 +
그리고 ++x 는 더해지기전에 전위연산자로써 먼저 1 증가 하기 때문에 뒤에 증가 된 상태의 x 값인 6에서 더해지기전에 1 증가하기 때문에 7
그래서 총 5 + 7 = 12가 된다.
그래서 만약 console.log(x++ == ++x)면 boolean 데이터타입인 false가 나오는 이유가 5 == 7 이라는 식이 나오기 때문에 false가 나온다
만약 (x++ !== ++x) 식이면 true가 나온다.
