TIL01⎟JavaScript : DataType

JavaScript 범주

• 데이터
• 연산자
• 제어구조
• 함수
• Documnet Objects
• Browser Object

JavaScript는 모든 데이터가 객체로 되어있다.

JavaScript가 다른 언어와 다른 점은, JavaScript의 변수는 모두 참조변수이다. ( const x = 3;) 이것은 객체지향이기때문이다!

객체지향의 프로그래밍 방식에서는 객체에 이름을 부여하듯 참조할 수 있도록 이름이 필요하기에 참조변수가 된다. value가 부여되는 순간, 모든 값은 스스로가 공간을 갖게 되면서 자동 boxing되며, x는 box 이름, 즉 JavaScript는 Wrapper Class이며, 그 개수는 대표적으로 5개가 있다.
​

자바스크립트의 가장 기본적인(Primitive) 다섯가지 데이터 타입

1. number(숫자)

const wat = 333;
const wat = 31.1;

2. strings(문자열)

• 큰 따옴표: "Hello"
• 작은 따옴표: 'Hello'
• 백틱, backtick :
  -변수나 표현식을 문자열 중간에 넣기 위해 사용

function sayHello(name, age){
console.log(`Hello my name is ${name} and ${age} years old);
}
sayHello("ryan",3); 
//Hello my name is ryan and 3 years old

• string concatenation

console.log('my'+'cat'); // my cat
console.log('1'+2); //12 => string이 우선
console.log(`the result is ${1+2}`); //the result is 3

3. Booleans(true/false)

• 모두 소문자로 써야함, 텍스트x, 따옴표x

❗️ 모든 연산자는 booleans로 나타낼 수 있다

true=1, 'hello','false'(string)
false=0, NaN, '', null , undefined

데이터가 없고 비어있는 것은 false, 비어있는 배열(array)은 object 자체이기 때문에 제외(true이다)

if([]) {
  console.log('true!');
 } else {
  console.log('false!');
 }
 //true!

let num; //할당만 했으니 undefined
if(num) {
 console.log('true!');
 }
 
 num && console.log(num);
  

&& : 앞이 true라면 뒤가 실행이 된다.
위 if문과 같은 말! 한 줄에 더 깔끔하게 작성이 되기 때문에 이렇게 많이 쓴다.
num이 데이터가 있다면, num을 출력해라
false이기 때문에 아무것도 출력되지 않는다

이렇게 하는 이유?

let obj;
if(obj) {
 console.log(obj);
}

console.log(obj.name);

obj에 있는 name에 접근하겠다. 이런 식으로 없는 데이터에 접근하면 프로그램 자체가 죽는다. (Uncaught TypeError : Cannot read property of 'name' of undefined) 그렇기 때문에 좋지 않기에 object가 없다면 접근하면 안된다. 유효하지 않는 코드이기에, 유효성을 먼저 따져주는 것이다.

let obj = {
 name : 'ryan',
};
if (obj) {
 console.log(obj.name);
}
obj && console.log(obj.name);
//
ryan
ryan

4. null
존재하지 않는(nothing)값, 비어있는(empty)값, 알 수 없는(unknown) 값의 빈 값은 숫자일 경우 0, 문자열의 경우 ", 객체형데이터(array, objet)의 빈 값을 의미한다. 이들 모두는 if문에서 false로 형 변환된다.

• 하지만, 콘솔에 typeof null로 확인해보면 object라고 나온다. null은 말그대로 아무것도 아닌 빈 객체를 가리키고 있어서 object라고 나오는 것이다!

5. undefined
undefined는 변수 선언만 하고 할당하지 않은 것. 처음부터 변수에 값이 할당되지 않았다는 의미.
null은 변수를 선언하고, 처음에 할당된 값이 더는 유효하지 않음을 의미

​

비교 연산자

비교 연산자는 연산자 양쪽에 있는 두 값을 비교하는 연산자이다

=

연산자 아님!
const title = document.querySelector("title")에서
= 는 같다는 뜻이 아니라 할당,선언,저장한다라는 뜻

== vs ===

값을 비교할 때는 == 를 사용,
값과 타입이 같은지 체크하기 위해서는 ===를 사용(box를 비교)

const stringFive = '5';
const numberFive = 5;

==loose equlity, with type converstion
console.log(stringFive == numberFive);
//true
console.log(stringFive != numberFive);
//false

===strict equality, no tpye conversion
console.log(stringFive === numberFive);
//false
console.log(stringFive !== numberFive);
//true

==equality - puzzler
console.log(0 == false); // true
console.log(0 === false); //boolean type이 아니지 false
console.log('' == false); //true
console.log('' === false); //false
console.log(null == undefined); // true
console.log(null === undefined); // false

let obj //undefined
if(obj){
  console.log(obj.name);
} //obj가 true면 console.log를 출력하라
    false이므로 값이 출력되지 않음 

let obj = {
 name : 'ryan'}
 if(obj){
 console.log(obj.name);
 }// ryan
 
 another way -> 
 obj && console.log(obj.name);
    //obj가 true이면(값이 있다면) console.log를 출력하라
    //&&연산자는 뒤에가 true가 되야 뒤를 실행함

​

PLUS

1. increment and decrement operators

let counter = 2;
const preIncrement = ++counter; //3
같은 말
// counter = counter + 1; //counter의 값에 1을 증가시켜서 다시 counter에 할당
// preIncrement = counter; //이렇게 증가한 counter의 값을 preIncrement 변수에 다시 할당
console.log(`preIncrement : ${preIncrement}, counter: ${counter}`)
//preIncrement : 3, counter: 3

const postIncremet = counter++; 
//postIncrement = counter; //먼저 postIncrement에 할당한 다음 counter에 1을 증감
//counter = counter+1;
console.log(`preIncrement : ${preIncrement}, counter: ${counter}`)
//preIncrement : 3, counter: 4

x += y ; // x = x+y;
x -= y ;
x *= y ;
x /= y;

​

2. logical operators : ||(or), &&(and), !(not)
   || (or), finds the first truthy value! 순서대로 읽다가 제일 먼저 나오는 true값을 출력하기 때문에 expression(function)이나 heavy한 component들은 뒤로 써주는게 깔끔한 코드

console.log(or ${value1 && value2 && check()});

const value1 = false;
const value2 = 4<2; //false;
function check(){~
return true;
}

​

typeof 연산자

typeof 연산자는 인수의 자료형을 반환. 변수의 자료형을 빠르게 알고자 할 때나, 자료형에 따라 처리 방식을 다르게 하고 싶을 때 사용

1.연산자 : typeof x
2.함수 : typeof(x)

typeof x를 호출하면 인수의 자료형을 나태는 문자열을 반환

typeof true //"boolean"
typeof 0 //"number"
typeof "Danbi" //"string"

​

변수 : 값을 ❗️저장❗️할 때 사용하는 식별자, identifier

let vs const vs var

1. var
   Never use var!

var a = "당근"
console.log(a);
var a = "마켓"
console.log(a); 
//
당근
마켓

변수를 한 번 더 선언했음에도, 입력 순서대로 각기 다른 값이 출력된다. 유연하지만, 코드량이 많아진다면 파악하기 힘들뿐더라 값이 바뀔 문제가 생긴다. ES6이후, 보완하기 위해 추가 된 변수 선언 방식이 let과 const이다

​

2. let
   -변수 재선언(declare) 불가, 하지만 변수 재할당(reassigned) 가능

let a = "당근"
console.log(a);

let a = "마켓"
console.log(a);
//SyntaxError: Identifier 'a' has already been declared

a = "당근마켓"
console.log(a):
//당근마켓

let과 const의 차이점은!
let : mutable
const : immutable

​

3. const(constant, 상수)
   -변하지 않는 값. 변수 재선언(declare), 변수 재할당(reassigned) 모두 불가
   ​

• 변수 선언에서는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 let을 사용하는 것이 좋으나 재할당이 필요한 경우는 생각보다 흔하지 않다.
  use const whenever possible
  only use let if variable needs to change
  ​

변수 적용 범위 :

지역변수, 전역변수, 호이스팅

• 변수를 함수 내에서 선언한 경우, 함수 밖에서 선언한 경우에 따라 결과값이 다르게 나올 수 있다.

1. 지역변수(local variable)
   -함수 안에서만 선언하며, 그 함수 안에서만 사용가능
   -지역변수가 > 전역변수보다 우위
   ex. a = 1는 전역변수로 window.a = 1인 것 var a = 1

2. 전역변수(global variable)

   -함수뿐만 아니라 전체에 적용
   -한 번 선언하면 그 값을 계속해서 유지함

3. 호이스팅(Hoisting)

   -어디에 선언했느냐에 상관없이 항상 제일 위로 선언을 끌어올리는 것
   move declaration from bottom to top!

   -함수 선언과 변수 선언을 최상단으로 끌어올리는 것
   -자바스크립트 경우 실행하기 전, 함수 선언과 변수 선언을 최상단으로 끌어올린다. 이것은 유효범위와 실행범위가 넓어지는 것을 의미한다. 함수 선언보다 호출이 앞에 있어도 실행가능한 이유가 바로 이 호이스팅 때문이다.
   -let, const는 호이스팅이 적용되지 않는다.

console.log(age) //undefined 으로 값이 출력되는 걸 볼 수 있다
age : 4;
var age;