「웹해킹을 위한 자바스크립트(Javascript) 훑어보기」- 2. 출력, 참과 거짓(truthy and falsy)

본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다. 

웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.

자바스크립트로 무언가 출력하기

개발자도구의 출력 기능

지금까지 브라우저의 콘솔을 통해 자바스크립트의 동작을 확인해 왔습니다.

저장된 값을 확인할 때 별도의 출력 함수 없이 단지 변수 이름을 입력하는 것만으로 결과를 확인할 수 있었습니다.

이는 자바스크립트에서 제공하는 기능은 아니고, 브라우저의 개발자 도구에서 지원하는 기능입니다.

개발자 도구의 콘솔은 전역 스코프(global scope)에서 실행되는 JS 코드를 평가하고 결과를 출력합니다.

개발자 도구 내부에서 변수에 대한 참조를 수행하여 값을 가져오는 것입니다. 

 

이와 관련하여 실행 컨텍스트(execution context)라는 개념이 있습니다.

자바스크립트의 동작 원리와 관련된 심화 내용이라고 판단해 넘어가겠습니다. 

---

자바스크립트의 출력 함수

그렇다면 자바스크립트로 작성한 내용을 출력할 수 있는 함수가 존재해야겠죠.

console.log(), alert(), prompt()가 대표적인 출력 함수입니다.

console.log()

 웹 콘솔에 메시지를 출력하는 메서드입니다.

console.log("Hello world!")
console.log(123);
let fruit = "apple";
cosole.log(fruit);

/*
*result
*Hello world!
*123
*apple
*/

---

alert()

메시지를 경고창 형태로 출력합니다.

alert("DO NOT CLOSE THIS WINDOW!")

 

XSS, CSRF 같은 웹 취약점을 테스트할 때 자주 사용하는 함수이기도 합니다.

특정 페이지에서 자바스크립트 코드를 삽입했을 때 실행되는지 확인하는 용도로 쓰입니다.

---

prompt()

alert()처럼 팝업창을 띄운 후 값을 입력받는 메서드입니다.

let animal = prompt("what kind of animal do you like?: ")

console.log(animal)	//elephant(사용자가 입력한 내용)

---

참과 거짓(truthy and falsy)

Javascript의 모든 값은 참 또는 거짓의 성질을 가집니다.

 

참 값(truthy value)은 boolean 타입으로 봤을 때 참으로 인식하는 값이고,

거짓 값(falsy value)은 거짓으로 인식하는 값입니다.

 

JS에서는 다음의 값을 falsy로 분류하고, 나머지는 모두 truthy로 분류합니다.

• false(boolean)
• 0
• ""(빈 문자열)
• null
• undefined
• NaN

---

비교 연산자

이중 등호(==)

JS에서 이중 등호를 이용해 비교를 수행하면 자동으로 형변환을 진행한 후 값을 비교합니다.

따라서 number 타입 1과 string 타입 "1"은 같은 값으로 취급하여 true를 반환합니다.

number 타입 0, boolean 타입 false를 비교해도 모두 falsy 값이므로 true를 반환합니다.

null과 undefined도 마찬가지입니다.

1 == 1  //true
1 == "1"  //true
0 == false  //true
null = undefined  //true

 

삼중 등호(===)

하지만 삼중 등호는 형변환을 진행하지 않고 값을 비교합니다.

1 === 1  //true
1 === "1"  //false
0 === false  //false
null === undefined  //false