글

Javascript four data structure

 우선 데이터가 어디서 오는 지 부터 알아보자. 1. 프로그램에서 오는 경우 : 상태 메세지처럼 직접적으로 저장된 데이터 2. 유저 인터페이스에서 오는 경우 : todo 앱이나 budget 앱에서 사용자가 작성한 데이터 3. 외부 데이터에서 가져오는 경우 :  web api 에서 가져온 데이터  자바스크립트에는 네 가지의 데이터 구조를 가지고 있다. array , object , set , map 어떤 걸 사용할 지 결정해보자. 1. 데이터가 단순한 나열인가? key value 가 필요한가? 단순한 나열일 경우 set 이나 array 를 사용하면 된다. 아닐 경우 key 그리고 value 를 사용하는 object 나 map 을 사용하자. array 와 set 을 비교해보자. 1. array를 사용하는 경우는 값들의 순서가 필요할 때 사용한다. 2. 데이터를 가공해야 할 때 사용한다. set  1. unique 한 값으로 작업해야 할 때 사용한다. 2. 높은 수행능력이 필요할 때 사용한다. (array 보다 10배 정도 빠름) 3. 배열에서 같은 값들을 제거 할 때 사용한다. object 1. 전통적인 key/value 저장방식이다. 2. . 그리고 [] 을 사용하여 쉽게 접근하고 작성가능하다. 3. method를 사용할때는 object를 써야한다. 4. JSON 으로 작업할 때 사용한다. maps 1.object 보다 높은 수행능력을 가진다. 2.object가 string 만을 key 로 가진 것과 달리 어떠한 데이터 형식도 key 가 될 수 있다. 3. 쉽게 반복가능하고 쉽게 사이즈를 계산가능하다. 4. 문자열이 아닌 값으로 key를 설정할 때 사용한다. 이 자바스크립트에 들어있는 네 가지 데이터 구조 외에도 stack , queue , tree ..... 등 여러 유명한 자료 구조들이 존재 한다.   
댓글 쓰기
자세한 내용 보기

Javascirpt object literal syntax

자바스크립트가 es6 로 넘어가면서 객체 리터럴 문법이 강화되었다. 1. 객체 안의 객체를 사용할 때 1 2 3 4 5 6 7 8 const  time  =  {   open:  12 ,    close :  17 , };   const  restaurant  =  {    name :  "www" ,   time, }                                                   cs restaurant의 time은 객체이다. 그리고 time 객체는 restaurant 객체 밖 에다가 정의했다. 2. 매쏘드를 사용할 때 1 2 3 4 5 6 7 const  restaurant  =  {    name :  "www" ,   menu : [ 'pizza' , 'hambuger' , 'chicken' ],   orderMenu(orderIndex){        console .log( this .menu[orderIndex]);   } }; Colored by Color Scripter                              cs 객체에서 메쏘드를 작성할때 표현식으로 작성했지만 다음과 같이 작성해도 문제 없다. 개인의 취향이다. 3. 특성...
댓글 쓰기
자세한 내용 보기

Javascript short circuiting (AND &&) , Nullish Coalescing Operator (??)

논리 연산자에는 boolean 값만 다루지 않는다. 논리 연산자 사용 1. 어떤 데이터형을 써도 된다. 2. 어떤 데이터형을 반환해도 된다. 3. short - circuiting OR 연산자의 경우 첫번째 피연산자가 truthy value 이면 첫번째 피연산자를 반환한다. 1 2 3 4 5 6 console .log( 3   | |   'www' );  //3 console .log( ''   | |   'www' );  //www console .log( true   | |   0 );  //true console .log( undefined   | |   null );  //null   console .log( undefined   | |   null   | |   0   | |   'hello'   | |   12 );  //hello cs  OR 연산자는 맨 처음으로 truthy 값이 나올 때 그 값을 반환하는 역할을 한다. 만약 없다면 마지막의 값을 반환한다.  OR 연산자를 true or false 의 boolean 값으로 활용했을 때에도 OR 연산자는 맨 처음의 true 값을 반환했을 뿐이다. 좀 더 실용적인 활용을 해보자 1 2 const  exsist  =  arr[ 6 ]  | |   10 ; console .log(exsist);                                              cs 배열 arr 의 6번째 자리는 할당되지 않았다. 따라...
댓글 쓰기
자세한 내용 보기

Javascript spread operator && rest operator

Spread Operator 에 대해 알아보자. 스프레드 연산자를 이용하면 문자열, 배열, 객체등 반복가능한 객체(iterable object)를 개별요소로 분리 할 수 있다. 1 2 3 4 const  arr  =  [ 3 ,  4 ,  5 ];   const  newArr  =  [ 1 ,  2 , ...arr]; console .log(newArr);  //[1,2,3,4,5] cs arr 앞에 붙어 있는 ... 이 스프레드 연산자이며 배열의 개별 요소 3,4,5 를 분리하여 값으로 가져 왔다. 모든 경우에 스프레드 연산자를 사용할 수 있는 건 아니다. 컴마로 분리되는 값들을 사용 할 수 있는 곳에서만 사용 가능하다. 함수 안에 인자로 던져 주거나 새로운 배열을 만드는 방식으로 사용 할 수 있다. 스프레드 연산자를 이용하면 배열의 복사 그리고 배열의 결합을 손쉽게 할 수 있다. 이때 배열의 복사는 shallow copy 얉은 복사로 객체 안의 객체 값은 복사하지 못하고 공유된다. (javascript this 에서 설명) 1 2 3 4 5 6 //Copy array const  mainMenuCopy  =  [...restaurant.mainMenu];   //Join 2 array const  menu  =  [...restaurant.startMenu, ...mainMenuCopy]; console .log(menu); Colored by Color Scripter                  cs 여기서 iterable 에 대한 이야기를 하고 가겠다. iterable object 는 반복 가능한 객체로...
댓글 쓰기
자세한 내용 보기

Javascript destructng array and object.

 destructuring 은 구조화된 배열 또는 객체를 비구조화 시켜서 개별의 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값을 추출할때 유리하다. 1 2 3 4 5 6 const  arr  =  [ 2 ,  3 ,  4 ]; const  a  =  arr[ 0 ]; const  b  =  arr[ 1 ]; const  c  =  arr[ 2 ];   const  [x, y, z]  =  arr; const [x , , z] = arr; cs 일반적으로 배열의 값을 변수에 할당하는 방법으로 변수 마다 하나씩 배열의 값을 손수 할당해 주었다. destructuring 에서는 배열의 값을 바로 할당할 수 있다. x , y , z 에 각각 배열 0 ,1 ,2 번째 값이 할당돼 있는 것이다. 그리고 , , 으로 필요없는 값은 스킵 할 수 있다. 1 2 3 //Nested destructuring const  nested  =  [ 2 ,  4 , [ 5 ,  6 ]]; const  [i, , [j, k]]  =  nested; cs 감싸져 있는 구조의 경우 다음과 같이 할당이 가능하다. 각각 i = 2 , j = 5 , k = 6 이 할당이 되어 있는 상태이다. 만약 없는 배열의 값을 가져오게 되는 경우는 undefined 를 가져오지만 디폴트 값을 설정해 줄 수도 있다. 1 2 //default value const  [p  =   1 , q...
댓글 쓰기
자세한 내용 보기

Javascript Object vs Primitives (Primitives vs reference type)

이미지
먼저 조금은 이해가 가지 않는 코드에 대해 이야기해보자. 1 2 3 4 5 6 7 8 9 const  me  =  {   age :  21 , }   const  you  =  me; you.age  =   30 ;   console .log(you);          //30 console .log(me);           //30 me 라는 객체에서 나이에  21을 할당했다.  그리고 you 에 me 의 객체를 똑같이 넣어주고 you의 나이를 30 으로 할당했다. 이때 me 의 객체와 you 의 객체는 따로 있으므로 나이는 다르다고 생각 할 수 있다. 하지만 값은 둘 다 30으로 동일하다. 어떻게 이런 일이 일어날까 이를 알기 위해서 우선 primitives value 와 object 의 차이를 알아야 한다. 자바스크립트에서의 원시값은 7개로 int , string , boolean ,  undefined , symbol, bigint, Null 있다. 원사 값을 제외한 모든 값은 Object로 대표적으로 object literal , array , function ....... 등이 있다. 자바스크립트 엔진의 구성요소에 대해 기억하는가? 콜 스택과 메모리 힙으로 구성되어 있다. 여기서 간단하게 말하자면 원시 값 (primitive type) 은 콜 스택에 저장되고 객체 (reference type) 은 메모리 힙에 저장된다. 콜 스택 그리고 메모리 힙에서 어떻게 원시 값과 객체가 저장되는 지는 아래 글을 ...
댓글 쓰기
자세한 내용 보기

Javascript this keyward

This 란? This 는 모든 실행 컨텍스트(모든 함수)에 대해 생성되는 특별한 값이다. 그리고 this 키워드가 사용된 함수의 "owner" 의 값을 가진다 this는 값이 똑같지 않다. this 의 값은 함수가 어떻게 호출됬는지에 따른다. 그리고 this의 값은 오직 함수가 실제로 호출될 때만 할당된다. Method => this 는 method를 소유한 객체를 가르킨다. Simple function call => this = undefined (엄격 모드에서만 해당된다. 아닐 경우 전역 객체인 window 의 값을 가져온다.) Arrow function => this = lexical this 이다. 즉, 자신을 둘러싼 환경의 this 를 그대로 승계받는다. Event Listener = > this => handler 함수가 붙어 있는 DOM 요소이다. new,call,apply,bind => later course.. this 는 사용하고 있는 함수를 절대 가르키지 않는다. 또한 함수의 variable environment를 절대 가르키지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 const  jonas  =  {   firstName:  'Jonas' ,   year:  1991 ,   calcAge:  function  () {      console .log( this );      console .log( 2037   -   this .year);   },     greet: ()  = >   console .log(`Hey ${ this .firstName}`), }; jonas.greet(); ...
댓글 쓰기
자세한 내용 보기