공부일기

 우선 데이터가 어디서 오는 지 부터 알아보자. 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 ..... 등 여러 유명한 자료 구조들이 존재 한다.   

자바스크립트가 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. 특성...

논리 연산자에는 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번째 자리는 할당되지 않았다. 따라...

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 는 반복 가능한 객체로...

 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...

먼저 조금은 이해가 가지 않는 코드에 대해 이야기해보자. 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) 은 메모리 힙에 저장된다. 콜 스택 그리고 메모리 힙에서 어떻게 원시 값과 객체가 저장되는 지는 아래 글을 ...

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(); ...

모든 출처는 에서 가져왔습니다.   https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/ 호이스팅(Hoisting) 이란? 변수, 함수의 선언부가 위치한 인접 스코프의 시작 지점에서 해당 식별자가 관측 가능한 현상이다. 1 2 3 4 5 Hoisting(); //hoisting   function  Hoisting(){    console .log( 'hoisting' ); }; cs 전역 스코프에서 선언한 위치와 관계없이 선언 대상을 확인 할 수 있다.  따라서 아래 코드와 같이 어떤 기술이 선언 대상을 스코프의 최상단으로 끌어올린다고 생각 할 수 있다. 1 2 3 4 5 6 function  Hoisting(){    console .log( 'hoisting' ); };     Hoisting();    //hoisting cs 호이스팅의 뜻이 끌어올리다 이므로 다음과 같은 오해를 하기 쉽지만 이는 비유적 표현일 뿐이다. 자바스크립트 엔진은 실행 시점에서 특정한 변수나 함수를 상단으로 끌어올릴 만한 능력은 없다. 실행 과정에서 변수나 함수에 대한 전체적인 정보를 얻을 과정이 있었을 뿐이다. 그러한 과정에 대해 먼저 알아보겠다. 우선 실행 컨텍스트에 대해 간단히 복습해보자. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트가 활성화 될때에는 세가지 일이 일어나는데 1. 호이스팅이 발생한다. 2. 외부 환경 정보를 구성한다. 3. this 값을 설정한다. 실행 컨텍스트의 구성에는 1. VariableEn...