JS Data Types
- JS 변수는 숫자, 문자열, 개체 등 다양한 데이터 유형을 보유할 수 있다.
let length = 16; // Number
let lastName = "Johnson"; // String
let x = {firstName:"John", lastName:"Doe"}; // ObjectThe Concept of Data Types
16에 'volvo'를 추가하는 것이 의미가 있을까?
오류가 날까? 아니면 결과를 return할까?
let x = 16 + "Volvo";
JS는 아래와 같이 문자열로 취급하여 처리한다.
let x = "16" + "Volvo";
하지만 아래 사진과 같이 연산은 왼쪽부터 오른쪽의 규칙이 있기 때문에
아래 식의 결과는 20Volvo이다.
JavaScript Types are Dynamic
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2>
<p>JavaScript has dynamic types. This means that the same variable can be used to hold different data types:</p>
<p id="demo"></p>
<script>
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Strings
문자열을 표기할 때, 따옴표 또는 쌍따옴표를 사용 할 수 있다.
single quotes, double quotes
문자열에 따옴표 혹은 쌍따옴표 표기 필요시, 겹치지 않는 따옴표 사용 하면 됨.
JavaScript Numbers
JS는 오직 하나의 숫자 타입만 있다.
숫자는 소수점을 포함하거나 안할 수 있다.
많이 크거나 작은 숫자는 지수 표기법으로 작성할 수 있다.
JavaScript Booleans
불리언은 단 두가지 값만 가질 수 있다. true or false.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 5;
let z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
불리언은 종종 조건부 테스트에 사용된다.
JavaScript Arrays
JS 배열은 [ ]로 쓴다.
배열의 데이터는 콤마로 구분된다.
아래 예제에서 3개 데이터를 포함한 cars이라는 배열을 선언하였다.
배열의 항목은 0 base인데 이뜻은 첫 번째는 [0], 두 번째는 [1]... 이렇게 진행한다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
const cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
JavaScript Objects
JS객체는 대괄호{ }로 작성된다.
객체의 특성은 name : value, 즉 이름 : 값으로 기록되며, 콤마,로 구분한다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
The typeof Operator
우리는 JS typeof 연산자를 사용하여 JS 변수의 타입을 확인 할 수 있다.
typeof 연산자는 변수 또는 표현식의 유형을 반환한다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>
Undefined
JS에서 값이 없는 변수는 undefined값을 가진다. 이 타입 역시 undefined이다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html> 
어떤 변수든 undefined로 값을 셋팅하여 비어있을 수 있다. 이 타입역시 undefined이다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html> 
Empty Values
빈 값은 undefined와 관련이 없다. 빈 문자열에는 유효한 값과 유형이 모두 있다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a type:</p>
<p id="demo"></p>
<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>
</body>
</html>
