프로그래머 도전기 66일차

오늘은

날씨가 부쩍 추워져서 겨울이 벌써 온것같네요... 

감기걸리지 않게 유의해야겠습니다

 

 

 

JavaScript 공부

 

<<함수 표현식, 화살표 함수>>
<함수 표현식>
함수 -> 변수나 상수에 담겨서 사용 가능
           => 함수를 값에 담을 때에는 선언된 변수나 상수로 불리기 때문에
                따로 함수의 이름을 정해주지 않아도 된다

* 함수 선언식의 경우
  함수 선언식의 함수들은 가장 밑에 선언을 해도 정상적으로 위에서 호출이 되어 사용이 된다
  호이스팅(Hoisting) = 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 
                             또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정

* 함수 표현식의 경우
  함수 호이스팅이 이루어지지 않아 밑에 쪽에 선언을 하게 되면
  함수 표현식의 실행 순서가 되었을 때에만 사용되어진다
  => 직접적으로 함수 표현식이 선언된 순서가 되어서야 함수가 생성된다고 보면 된다

<화살표 함수>
* 함수 표현식 ex> let hello = function(){
                           return "안녕하세요";
                       }
* 화살표 함수 ex> let hello = () => "안녕하세요"
   = 무명 함수를 간단하고 빠르게 작성할 수 있도록 해주는 문법


<콜백 함수>
= 어떤 다른 함수에 매개변수(파라미터)로 함수를 넘겨주는 것


<<객체 Object>>
* 객체 생성자 방식
   let person = new Object(); => new 라는 키워드를 붙여 뒤에 있는 객체를 생성한다는 것을 표현

* 객체 리터럴 방식
   let person = {} => {}중괄호를 사용하여 객체를 생성

* 객체의 값 저장
  => key 와 value의 형식 = 프로퍼티(객체 프로퍼티)
  let person = {
      key1 = "value1"
      key2 = "value2"
      key3 = "value3"
  };
  => value에는 어떠한 자료형이 위치해도 상관이 없다 = 배열 함수 등등 가능하다
       key는 따옴표 없는 문자열 형식으로 한다

* 객체 프로퍼티에 접근하는 방법
  - 점 표기법 => 객체.키 로 접근 = person.key1;
  - 괄호 표기법 => 객체["키"]; = person["key1"];
                                     => 괄호 표기법의 경우 = 프로퍼티의 키를 문자열 형식으로 넣어주어야 한다
                                                                     ""없이 문자열 형식이 아니라면 변수로 인식을 한다
                                     => 함수에 의해 프로퍼티의 키 값을 가져오게 되는 경우 유용하게 사용되어 진다

* 프로퍼티의 수정, 삭제, 추가
  - 추가 = person.key4 = "value4"; 의 형식으로 가능
          => 점 표기법이나 괄호 표기법 모두 프로퍼티 추가 가능
  - 수정도 마찬가지로 추가와 같은 방식으로 가능하다
  * 객체를 const로 선언하더라도 프로퍼티를 수정하는 행위는
     상수 자체를 수정하는 것이 아니기때문에 오류가 나지 않는다
  - 삭제 = delete키워드 사용 => delete 객체이름.키;
              => 하지만 이 경우 프로퍼티와 객체의 연결을 끊을 뿐
                   메모리 자체는 유지가 된다
           = 객체이름.키 = null; 을 사용하여 프로퍼티의 값을 메모리에서 삭제할 수 있다

  * 객체 안에 들어있는 함수 = 메서드라고 한다
    함수가 아닌 프로퍼티 = 멤버라고 한다

* 객체 안에 메서드를 만들게 되는 경우
  => 그 메서드 안에서 자신을 this라는 이름으로 부를 수 있다
       = const person = {
              name: "홍길동",
              age: 25,
              say:function () {
                  console.log(`안녕 나는 ${this.name}`);  // = person.name과 같다
               }
            }

* 프로퍼티의 존재유무 확인하기
  => in을 사용하여 확인한다
       = console.log(`name : ${"name" in person}`);
       => true, false 값으로 반환됨

<배열 Array>
* 생성 - 생성자 => let arr = new Array();
        - 리터럴 => let arr = [];

* 접근 - 객체와는 달리 배열에는 키가 따로 없지만
           값들의 순서, 즉 인덱스가 있기 때문에 인덱스 번호로 배열의 값(요소)에 접근할 수 있다

* 추가 - .push() 함수 사용 = 배열의 마지막에 값을 추가한다
  길이 - .length = 배열의 길이 값을 알 수 있다

* Object.keys() 함수 = 객체의 키를 배열로 반환받을 수 있도록 해주는 함수
  => const personKeys = Object.keys(person);
       = personKeys 배열에 person 객체의 key가 저장된다

<배열 내장 함수>
* .forEach() 함수
  =>.forEach((e) => console.log{e});
       = 배열이름.forEach(function(elm) {
              console.log(elm);
           }
  = 배열의 모든 요소를 한번씩 순회할 수 있도록 해주는 함수
     forEach메서드 안에 전달되는 콜백 함수에 요소를 한번씩 파라미터로써 전달되면서 순회
  ex) const arr = [1, 2, 3, 4];
       arr.forEach(function (elm) {
           newArr.push(elm * 2);
       }
      = 배열arr의 요소에 2를 곱해 새로운 배열newArr로 반환

* .map() 함수
  = 콜백함수에서 return을 할 수 있다
  = 배열의 각 모든 요소에서 한번씩 콜백함수를 수행한다
  ex) const arr = [1, 2, 3, 4];
       const newArr = arr.map((elm) => {
            return elm * 2;
        });

* .includes() 함수
   = 주어진 배열에서 ()괄호 안에 인자로 받은 값이 존재하는지 확인해주는 함수
      console.log(arr.inclues(number)); => arr 배열에 숫자가 있는지 확인을 할 수 있다 

* .indexOf() 함수
   = 주어진 배열에서 ()괄호 안에 인자로 받은 값이 존재하면 그 값의 인덱스 번호를 반환하고
      일치하는 값이 하나도 없는 경우 -1을 반환하게 된다

* .findIndex(( ) => { })
   = 콜백 함수를 전달해서 해당 콜백 함수가 true를 반환하는 첫 번째 요소의
      인덱스를 반환하는 로직을 작성할 수 있다

* .find() 함수
   = 인덱스를 반환받는 것이 아니라 요소를 반환받을 수 있다
   = .findIndex() 함수와 같은 시스템이지만 반환 받는 값이 다르다. 인덱스와 엘리먼트 자체 의 차이

* .filter() 함수
   => 전달한 콜백 함수가 true를 반환하는 모든 요소를 배열로 반환해주는 함수
        = 특정한 조건을 만족하는 요소들을 다시 배열로 반환받을 수 있다
   ex) console.log(arr.filter((elm) => elm.color === "blue")); 
        => 요소들 중 color의 값이 blue인 요소들만 따로 모아 새로운 배열을 생성한다

* .slice() 함수
   = 배열을 잘라서 반환
   => arr.slice(시작점, 끝지점); => 끝지점의 인덱스 앞번호의 요소까지만 반환

* .concat() 함수
  = arr1.concat(arr2) => 배열 arr1 의 뒤에 배열 arr2의 요소들을 붙여 하나의 배열로 만든다

* .sort() 함수
   = 배열을 순서대로 정렬해준다
   => 원본 배열 자체를 정렬해주기 때문에 원본 배열의 순서가 바뀌게 된다
   * 숫자를 정렬하는 경우 -> 사전순으로 정렬을 하기 때문에 항상 1이 2보다 작게 되어 10이 2보다 앞 순서로 오게된다
      => 비교함수를 만들어서 srot()함수에 파라미터로 넣어주게 되면 정상적으로 출력할 수 있도록 만들 수 있다
      ex) const compare = (a,b) => {
               if(a>b) {
                   return 1;   // a가 b보다 큰 경우 뒤로 가게 되고
               }
               if(a<b) {
                   return -1;   // a가 b보다 작은 경우 앞으로 가게 되고
               }
               return 0;  // 같은 경우 자리를 바꾸지 않는다
           };
  
           numbers.sort(compare); => 숫자의 크기가 순서대로 정렬된다

* .join() 함수
  = 주어진 배열의 요소를 하나의 문자열로 합쳐주는 함수
  => .join(구분자) = ()괄호 안에 구분자를 넣게되면 배열의 요소를 합칠 때 
                          합쳐지는 요소 사이에 원하는 구분자를 넣어 합칠 수 있다

 

 

 

 

 

 

2023. 11. 12 (일)