자바스크립트 데이터 타입

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN

완전 중요 사이트

 

{

}

안에 -> 그 안에서만 가능

{} 없고 그냥 밖에

-> 글로벌! 어디서든 가능

 

변수선언

var(never use it)

->선언하기도 전에 쓸 수 있는거. 어디에 선언햇느냐 상관없이 선언한걸 젤위로 끌어올려주는거(hoisting)

->block scope 없음

=> 노답이군아 ~

 

let a 이렇게

let 으로 한다! (mutable type)

(타입도 정하는거아님 걍 let a=값;)

 

constant (상수)

const a = 3;

변경 불가. immutable

 

variable type

primitive type (젤작은 하나): number(type이 number 하나), null, string, boolean, undefined, symbol

object, box container(여러개 묶은거) : function .. 

*Infinity, -Infinity, NaN -> 연산 이상하면ㅇ ㅣ게나오겟죠? 잘확인

 

string : '~', 한글자 여러글자 모두 string

`~~ ${스트링변수}~~` -> 이어서 나옴. + 한거랑 똑가틈

`hi ${brenden}` 이런식으로~  (backtick)

(` 이거는 영어일때 ~₩누르면 됩니도)

${~} -> 안에꺼 계산한 후 결과를 스트링으로해서출력해줌

typeof 변수이름 -> 타입ㄴㅏ옴

 

boolean 

false: 0, null, undefined, NaN(not a number)

true: any other value

 

null

let a=null;

텅텅빈거

 

undefined

let x;

let x2=undefined;

아직어떤지모르는애

 

symbol

식별자주는거

const a=Symbol('dfs'); -> 심볼값 같아도 변수이름다르면 다름

근데

Symbol.for('d'); 이렇게하면 심볼값 같으면 변수같은거임 === 하면 true 나옴

출력할때

a.descriptrion 이러캐해야댐

--

object 

 

Dynamic typing! (동적으로 타입이 결정된다)

런타임에 할당된 값에 따라 타입이 결정된다

런타임에 타입이 결정된다

let text='hello'; -> string

text=1; -> number

text='7'+5; -> string (5를 스트링으로 바꿔버림)

text='8'/'2' -> number (나누기연산자네 -> 숫자네->숫자군)

 

operator

1. string concatenation (+로 스트링 합치는거)

- '1'+2 //12

-`dsfds ${1+2}` // dsfds 3 (계산해서!)

- ' fsf \n \' sdfsf' ('이거하려면 백슬래쉬, \n 이게 줄바꿈)

 

2. numeric operator

+ - * / %(나머지) **(승)

 

3. increment and decrement operator

++a; (바로 +1 함)

a++; (이거하고나서 +1 함)

--a;

 

4. assignment operator

+=

-=

=

 

5. comparison

< <= >= > ===

 

6. logical operator

|| or (여러개중에 하나라도 true면 true)

-처음이라도 트루가 하나라도나오면 넘어감. 다음꺼 연산안함 (젤 heavy애들을 젤 뒤에둬야함)

&& and

-하나라도false나오면 넘어감. 다음꺼 확인안함

! not

 

7. equality

== , != : loose equality -> '5' 와 5가 같음. 내용물만

===, !== : strict equality -> '5'와 5가 다름. 타입도 신경씀

-> === 이걸로 쓰자!

* object : 래퍼런스형식으로 저장됨 (주소)

-> == / ===으로 비교하면 레퍼런스를 비교하게 되는 거

 

console.log(0==false); //true

console.log(0===false); //false

console.log(''==false); //t

console.log(''===false); //f

console.log(null==undefined); //true .. !! 같은 것으로 간주됨

console.log(null===undefined); //false. 그치만 다른 타입임!

 

8. conditioner operator : if !

if (~===~){

~

} else if (~~) {

~

}

 

9. Ternary operator: ?

조건 ? value1:value2

조건이 트루면 1(왼쪽), false면 2 (오른쪽)

 

10 switch

switch (a){

   case 'dfs': 

      어쩌구;

      break; 

   case 'sfsfdsdf':

     어쩌구; 

     break;

   default: 

     어쩌구;

     break;

}

 

11. loops

while 

easy

 

do-while loop

do{

 어쩌구 실행구문

} while(조건);

-> 실행먼저, 그리고 조건확인

 

for

for(begin; condition; step){

~

}

for(let i=0;i<3;i++){

~

}

 

배열출력시

for( const a of 배열이름){

~a ~

}

 

-break : 끝냄

-continue : 다음애로 넘어감

 

<Function>

선언

function name(param .. (이름만) ){~ return;}

//함수이름은 동사형태로 정하긔

 

parameter

-primitive -> value가 전달됨

-object -> reference가 전달됨 

 

default prameter

parameter 두개인데 하나만 전달함 -> 하나는 undefined !

->

function a(q, e='sfs'){ ~ }

이렇게 하면 전달 안됐을 때 저게 기본으로 들어가게 됨

 

rest parameter

function a ( ... args){

~

}

-> 배열형태로 전달됨

 

local scope

: 밖에서는 안이보이지않고 안에서만 밖을 볼 수 있다

안쪽에잇는건 안쪽에서만 접근 가능

더 밖에잇는애들만 사용 가능

 

return

*리턴값 없으면

return undefined = 생략 가능

 

early return

리턴 빨리하도록

쯤쯤

 

function expression

: 함수는 변수와 마찬가지로 변수할당되고 파라미터로 전달가능하고 리턴값으로도된다

그냥 하나의 데이터타입으로 볼 수 있다

const print = function(){~}; // 이름없으면 anonymous function, 있으면 named function -> 디버깅에굳이라서 이름쓰는거

print(); 이렇게 사용 가능

const a=print;

a(); 가능

 

* 함수는 hoisting 됨. 즉 선언한거가 젤 위로가서

선언되기 이전에 함수 사용가능한거.

걍 선언 나중에 해도되는거 !

 

callback

: 함수를 전달해서 함수안에서 그 함수를 부르는 것 !

전달되는 함수 = 콜백함수

function ( a, b(함수)){

~

b();

~

}

 

arrow function

const a = () => 함수내용 ;

이렇게....!

(한줄이면 블럭 안씀, 여러줄이면 블럭씀, 블럭쓰면 리턴시 return 키워드 써야댐, 한줄이면 return 안써도댐)

const add = (a,b) => a+b;

=

const add = function (a,b){

    return a+b;

}

 

IIFE

function hello(){

 ~~

}

hello();

-> 선언함과 동시에 실행?

(function hello(){

 ~~

})();

이렇게 하면 바로실행 !!

 

 

<클래스와 오브젝트>

class a {

 person;

 age; //field (속성)

 speak(); // method (행동)

 

class (붕어빵 틀) (template)

-> 하나하나 애들 = object (붕어빵)

 

1. class 선언

class a {

 

}

 

class person{

constructor(name, age){

this.name=name;

this.age=age;

}

(이러면 따로 변수안써도되는듯)

 

speak(){

console.log(`${this.name}: hello!`);

}

}

 

const juny = new person('juny', 3);

이렇게 클래스 오브젝트 만듭니다 !

juny.speak();

console.log(juny.age);

 

2. getter, setter

-> 누가 바보같이 잘못 설정해도 그러지않을 수 잇도록 (나이를 -1로 한다던가 ...)

a에 게터와 세터가 정의되어있을 때

클래스안의 a 프로퍼티에 접근하면 바로 get (게터)에서 값을 읽어옴

글고 a=몇 이렇게 값을 넣으면 바로 a의 세터로가서 값을 받음

-> 게터와 세터안의 변수이름을 a와 똑같이 한다면 안됨 이름을 다르게 해줌

 

class User{

constructor(first, last, age){

this.first=first;

this.last=last;

this.age=age;

}

 

get age(){ //값을 가져온다

return this._age;

}

set age(value){ //값을 설정한다

this._age= value < 0 ? 0:value;

}

}

//이 클래스 안의 필드는 총 세개 ! first, last, _age

 

const user1=new User('steve','job',-1);

console.log(user1.age);

 

3. public, private

class experiment {

 a=2; //외부에서 접근 가능

 #b=0; //클래스 내부에서만 접근 가능

*아주 정말 최근에 업뎃된거

 

4. static

앞에 static 키워드 붙인다

-> 클래스 자체에 연결된 애 ! 굳굳 알고잇지용!=

 

5. 상속과 다양성

상속

class a extends b { 

~

}

오버라이딩했을 때 부모꺼 호출할꺼면 super.이름();

 

6. instanceof 

object instanceof class

-> 이 오브젝트가 이 클래스를 이용해서 만들어진 앤지 아닌지 알려줌. true/false 반환

*모든 오브젝트는 Object를 상속한 것이다 !!

-> 공통적으로 존재하는 메소드 사용 가능 (toString 같은거 ...)