JavaScript는 객체 기반의 스크립트 언어로 웹의 동작을 구현할 수 있다.
주로 웹 브라우저에서 사용되거나 프레임워크를 활용하여 서버 측 프로그래밍도 가능하다.
변수
JavaScript에서는 'var' 또는 'let'으로 변수를 선언할 수 있다.
var a = '과제 싫어';
console.log(a); // 과제 싫어
let b = '과제 싫어';
console.log(b); // 과제 싫어
겉보기엔 비슷해 보이지만 둘은 사용법이 조금 다르다.
먼저 var는 선언한 위치에 상관없이 함수나 전역에서 사용 가능하며 중복 선언이 가능하다.
또한 같은 이름의 변수를 다시 선언하면 기존에 선언한 변수 대신 새로운 변수가 생성된다.
반면에 let은 변수를 선언한 블록 안에서만 접근이 가능하다.
또한 var와는 달리 let으로 변수를 선언하면 중복 선언이 불가능하다.
var a = "과제 싫어";
if(1){
var a = "과제 좋아";
console.log(a); // 과제 좋아
}
console.log(a); // 과제 좋아
let b = "과제 싫어";
if(1){
let b = "과제 좋아";
console.log(b); // 과제 좋아
}
console.log(b); // 과제 싫어
처음에 var를 사용하여 변수 a를 선언했으나 조건문에서 재선언을 하였기 때문에 기존에 있던 변수 대신에 새로운 변수가 생성되게 된다. 그렇기 때문에 둘 다 "과제 좋아"를 출력하게 된다.
변수 b를 보면 let을 사용하여 변수를 선언하였다. 조건문에서 b를 다시 선언하여 출력했더니 "과제 좋아"가 나왔다.
그러나 let은 변수를 선언한 블록 안에서만 접근이 가능하기 때문에 조건문에서 선언한 b와 그 밖에 블록에서 선언한 b는 차이가 있다.
조건문을 빠져나온 상태에선 b가 "과제 싫어"로 선언되어 있기 때문에 출력 또한 "과제 싫어"로 된다.
이 외에 const 함수가 있는데 const로 선언하면 그 값은 바뀌지 않는다. (상수)
상황에 맞게 적절히 사용해야 let 중복선언으로 인한 오류가 안 난다.
자료형
숫자(number)
JavaScript는 다른 언어와 달리 정수와 실수를 구분하지 않고, 모든 수를 실수 하나로 표현한다.
또한 큰 수를 표현할 때는 e 표기법을 사용할 수 있다.
let num1 = 10; // 10
let num2 = 3.14; // 3.14
let num3 = 1e20; // 100000000000000000000 <-e뒤에 숫자만큼 0출력문자(string)
자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합을 의미한다.
큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있다.
let firstStr = "큰따옴표"; // 큰따옴표를 사용한 문자열
let secondStr = '작은따옴표'; // 작은따옴표를 사용한 문자열불리언(booleon)
불리언 값은 참(true)과 거짓(false)을 표현한다.
자바스크립트에서 불리언 값은 true와 false를 사용하여 나타낼 수 있다.
let yes = "나는 천재";
let no = "나는 바보";
let real = "나는 천재";
console.log(yes == no); // false
console.log(yes == real); // true심볼(symbol)
심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.
null과 undefined
자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미한다.
또한, undefined란 null과는 달리 '타입'이 정해지지 않은 것을 의미한다.
let num; // 초기화하지 않았으므로 undefined 값을 반환
let mybrain = null; // object 타입의 null 값
typeof ahhh; // 정의되지 않은 변수에 접근하면 undefined 값을 반환
null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르다
null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않다.
let nothing;
let mybrain = null;
typeof ahhh;
console.log(mybrain == nothing); // true
console.log(mybrain === nothing); // false객체(object)
자바스크립트의 기본 타입은 객체다.
객체는 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체다. (추후 설명)
연산자
자바스크립트 다양한 연산을 위해 다양한 연산자를 제공하고 있다.
산술연산자
| + | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함 |
| - | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌 |
| * | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함 |
| / | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔 |
| % | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환 |
대입연산자
| = | 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입 |
| += | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입 |
| -= | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입 |
| *= | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입 |
| /= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입 |
| %= | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입 |
증감연산자
| ++x | 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행 |
| x++ | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가 |
| --x | 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행 |
| x-- | 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소 |
비교연산자
| == | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환 |
| === | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환 |
| != | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환 |
| !== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환 |
| > | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환 |
| >= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환 |
| < | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환 |
| <= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환 |
논리연산자
| && | 논리식이 모두 참이면 참을 반환 (AND) |
| || | 논리식 중에서 하나라도 참이면 참을 반환 (OR) |
| ! | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환 (NOT) |
비트연산자
| & | 대응되는 비트가 모두 1이면 1을 반환 (비트 AND 연산) |
| | | 대응되는 비트 중에서 하나라도 1이면 1을 반환 (비트 OR 연산) |
| ^ | 대응되는 비트가 서로 다르면 1을 반환 (비트 XOR 연산) |
| ~ | 비트를 1이면 0으로, 0이면 1로 반전 (비트 NOT 연산) |
| << | 지정한 수만큼 비트를 전부 왼쪽으로 이동 (left shift 연산) |
| >> | 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동 (right shift 연산) |
| >>> | 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨 |
기타연산자
| typeof | 데이터 타입 반환 |
배열
우리가 아는 흔한 배열과 비슷하지만 JS에서는 조금 다르다.
1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.
배열을 선언하는 방법 또한 여러 개가 있다.
var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법
var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법let me = ["my IQ", 10, false];
let me1 = Array("my IQ", 10, false);
let me2 = new Array("my IQ", 10, false);
console.log(me); // ['my IQ', 10, false]
console.log(me1); // ['my IQ', 10, false]
console.log(me2); // ['my IQ', 10, false]제어문, 반복문
조건문
-if
if 문은 조건식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않는다.
if (조건) {
조건이 참일 때 실행하는 실행문;
}let myIQ = 160, idiot = 10;
if(myIQ == idiot){ // false
console.log("나는 바보다."); // 실행X
}
else if(myIQ < idiot){ // false
console.log("나는 누군가"); // 실행X
}
else if(myIQ > idiot){ // true
console.log("바보는 아니다"); // 실행
}-switch
switch 문은 if 문과 같이 주어진 조건 값에 따라 그에 해당하는 실행문을 실행하는 조건문이다.
if 문에 비해 한눈에 보기 편하다.
switch (조건 값) {
case 값1:
조건 값이 값1일 때 실행;
break;
case 값2:
조건 값이 값2일 때 실행;
break;
default:
조건 값이 어떠한 case 값에도 해당하지 않을 때 실행;
break;
}let myIQ = 160, idiot = 10;
switch (myIQ == idiot) { // false
case true: // false이므로 실행X
console.log("나는 바보다");
break;
case false: // false이므로 실행
console.log("천재 또는 바보 그 이하");
break;
}반복문
-while, do / while
while 문은 C언어와 거의 유사하다.
let i=0;
while(i < 10){ // 조건이 참이면 실행
console.log("i want to sleeeeeeep");
i++; // i를 1씩 더하다가 결국 10이 됨
} // "i want to sleeeeeeep" 10번 출력
do / while 또한 거의 유사하다.
let i=0;
do{ // 먼저 실행
console.log("i want to sleeeeeeep");
i++;
}while(i < 10); // 참이면 한번 더 실행
// "i want to sleeeeeeep" 10번 출력-for, for / in, for / of
for 문을 사용하면 한눈에 보기 편하다. C언어와 거의 유사하다.
for(let i = 0;i < 10;i++){ // i = 0;조건;증감식
console.log("i want to sleeeeeeep");
} // "i want to sleeeeeeep" 10번 출력
for / in의 문법은 다음과 같다.
for (변수 in 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}let arr = [5, 5, 5, 5];
for (let i in arr) {
console.log(i); // arr의 모든 요소의 인덱스 출력
} // 5 5 5 5
for / of의 문법은 다음과 같다.
for (변수 of 객체) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}let arr = [1, 5, 3, 5];
for (let i of arr) {
console.log(i); // arr의 인덱스에 해당하는 값 출력
} // 1 5 3 5함수
함수 또한 선언 방식과 활용은 C언어와 비슷하다.
함수 선언의 문법은 다음과 같다.
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}function a(){
console.log("hi");
};
a(); // 함수 a 실행
반환문(return)과 함수의 호출 또한 C언어와 비슷하다.
function add(a,b){
return a + b; // a와 b를 더한값을 반환
}
let n = add(5,6); // a와 b에 5, 6 대입후 반환된 값을 n에 저장
// add(?,?) <- 함수의 호출
console.log(n); // 11
JS에서는 함수가 문법적으로 구문이면서 값이다.
따라서 변수에 함수가 대입될 수도 있다.
객체, 클래스
객체
객체를 생성하는 방법은 다음과 같다.
let 객체이름 = {
프로퍼티1이름 : 프로퍼티1의값,
프로퍼티2이름 : 프로퍼티2의값,
...
};let person = {
name: "이서종", // 이름 프로퍼티를 정의
birthday: "070723", // 생년월일 프로퍼티를 정의
pId: "1234567", // 개인 id 프로퍼티를 정의
fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환
return this.birthday + this.pId;
}
};
person.name // 이서종
person["name"] // 이서종
console.log(person.name + person.fullId()); // 이서종 0707231234567
파이썬에서 딕셔너리와 비슷한 역할이라고 보면 된다.
클래스
클래스는 객체를 생성하기 위한 템플릿이다.
함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 클래스 또한 클래스 표현식과 선언으로 정의할 수 있다.
클래스 선언
class me {
constructor(height, weight) {
this.height = height;
this.weight = weight;
}
}constructor 메서드는 클래스로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.
"constructor"라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다.
만약 클래스에 여러 개의 constructor 메서드가 존재하면 SynatxError가 발생할 것이다.
함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점이다.
클래스 표현식
let about = class me { // about에 클래스 me 저장
constructor(height, weight) {
this.height = height;
this.weight = weight;
}
}
console.log(about.name); // about의 클래스 이름 출력: me"name" 함수를 통해 변수에 저장된 클래스의 이름을 알 수 있다.
class me {
constructor(height, weight) {
this.height = height;
this.weight = weight;
}
get area() { // Getter
return this.calcArea(); // calcArea의 값 반환
}
calcArea() { // 메서드
return this.height + this.weight; // 키와 몸무게 더한 값 반환
}
}
let myhw = new me(178,64); // me에 키=178, 몸무게=64 대입한 값을 반환
console.log(myhw.area); // 242브라우저 동작원리
JS에서 시간이 걸리는 일부 기능들은 대기실로 이동 후 스택이 다 끝난 뒤 실행이 된다.
Heap에서 여러 변수를 스택으로 보내는데 스택은 한 개뿐이라 한번 씩만 실행 가능하다.
console.log와 같이 바로 출력할 수 있는 것들은 스택에서 처리되지만 setTimeout과 같은 함수들은 시간에 제약이 걸려있는 경우가 있기에 바로 실행을 못하고 대기실로 보낸다.
Queue라는 대기실에선 대기가 끝난 코드들을 정렬한다.
그리고 스택에 하나씩 올려 보낸 뒤 스택에서 그것들을 실행한다.
그러나 이때 조건이 있는데 바로 스택이 비어있어야 한다는 것이다.
예를 들어 다음과 같은 스택이 있다.
console.log~
setTimeout~
console.log~
console.log는 바로 실행 가능하기 때문에 실행해 준다.
다음으로 setTimeout~은 시간제약이 걸려있기 때문에 대기실로 이동해 준다.
그러면 console.log~를 실행해 준다.
대기실에 있던 setTimeout~은 Queue를 통해 스택으로 다시 올려 보내지고 스택에서는 setTimeout~을 실행해 준다.
이러한 이유들 때문에 JS에서 일부 코드들은 실행시간이 오래 걸리기도 한다.
'웹' 카테고리의 다른 글
| 웹해킹 6차시 정리 & EzSSRF (0) | 2023.05.28 |
|---|---|
| 웹해킹 5차시 SQL Injection & 문제 풀이 (0) | 2023.05.28 |
| 웹해킹 3차시 php정리 (0) | 2023.05.10 |
| 웹해킹 1차시 정리 (0) | 2023.04.18 |
| 웹해킹 1차시 드림핵 워게임 문제 풀이 / write up (0) | 2023.04.18 |