5. 타입(type) - 1

type?

변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해 사용

- 원시타입 : 단순한 데이터 저장

- 참조타입 : 객체로서 저장

 

1. 원시타입 (Primitive Types)

    - 값 변경 불가능
    - string, number, bigint, boolean, undefined, symbol, null.. 

    - 이스케이프 표현

       문자열에서 줄바꿈을 하고 싶을 때 : \n

       나머진 검색

    - boolean : ture, false

    - null : 값이 없는 상태 (값을 할당하고 싶지 않을때 사용 가능 const username = null;)

    - nusdefined : 값을 할당 하지 않은 상태 (대표적으로 함수를 입력하고 나면 뜬다.)

 

2. 객체타입 (Obfect Types)
    - 특징 : 프로퍼티 값과 매서드를 보유

                이 둘은 각각 객체의 상태와 동작 나타냄

                값의 위치(참조)가 저장                            ❗원시타입 객체타입 알아(찾아)보기

 

3. 배열(Array)

    : 데이터를 순서대로 저장하는 객체

      하나의 데이터를 표현하는 원시타입과 달리 여러개의 데이터를 한 변수에 저장 가능

      -> 추가, 제거, 정렬, 검색 등 다양한 작업 수행 가능 하도록 여러가지 메소드 제공

 

- 특징

• 빈 배열로 생성 or 요소가 포함된 배열로 생성 가능
  const arr = [];
  const arr = [1, 2, 3];
  const arr2 = new Araay(4, 5, 6);
• 숫자를 사용해 값에 접근 가능
  이때 숫자는 값의 순서를 의미 = 이 순서를 index,
  배열에 존재하는 값 = elements(원소) [심지어 존재하지 않는 원소에도 접근 가능]
  const arr = [1, 2, 3];
  console.log(arr[0]); / [1], [2]
  console.log(arr[3]); -> undiefined
• 가지고 있는 원소의 길이를 나타내는 length 프로퍼티 보유 (문자열도 사용 가능)
  const myArray = [0, 1, 2, 3, 4];
  console.log(myArray.length); -> 5
• 배열 안에 다른 배열 포함 가능 => 다차원 배열
  const arr = [
      [1, 2], [2, 4], [5, 6]    ➡️ 2차원 배열
    ];
  console.log(arr [0]); ➡️ arr의 0번째는 [1, 2]
  const arr2 - [
       [ [1, 2], [3, 4] ]
       [ [5, 6], [7, 8] ]    ➡️ 3차원 배열
    ];
  console.log(arr2 [0]); ➡️ arr2의 0번째는 [ [1, 2], [3, 4] ], 이것의 0 : [1, 2], 1 : [3, 4]

- 배열(Array)의 매소드

1. push() & pop()
   - push() : 배열 끝에 요소 추가 + 길이 반환
   - pop() : 배열 끝의 요소 제외
         const arr = [1, 2, 3];
         arr.push(4);
         console.log(arr); // [1, 2, 3, 4]  ➡️ 요소 제일 끝에 4를 추가
         arr.pop();
         console.log(arr); // [1, 2, 3] ➡️ 요소 제일 끝의 요소를 제거
2. shift() & unshift()
   - shift() : 배열 첫 번째 요소 꺼내고 반환
   - unshift() : 배열 첫 번째 요소 추가
         const - myArray = ['사과', '바나나', '수박'];
         myArray.shift();
         console.log(myArray); // ['바나나', '수박']   ➡️ 요소 제일 앞에 '사과'를 반환
         myArray.unshift('오이', '배');
         console.log(myArray); // ['오이', '배', '바나나', '수박']   ➡️ 요소 제일 앞에
                                                                                                   '오이', '배'를 추가
3. aplice()
   - 배열 요소 추가, 제거 또는 교체
         const arr = [1, 2, 3];
         arr.splice(1, 0, 4);
         console.log(arr); // [1, 4, 2, 3] ➡️ 1의 자리에 0개를 삭제하고 그 앞에 4를 추가
                                                               2를 삭제하지 않고 그 앞에 4를 추가
         arr.splice(2, 1, 5);
         console.log(arr); // [1, 4, 5, 3] ➡️ 2의 자리에 1개를 삭제하고 그 앞에 5를 추가
                                                               2를 삭제하고 그 앞에 5를 추가
4. slice()
   - 배열 요소 추출해 새로운 배열로 반환
   - 2개의 전달인자
     첫 번째 인자 : 추출을 시작할 인덱스
     두 번째 인자 : 추출을 끝낼 인덱스 뒤의 인덱스 (이 인자 앞의 인덱스 까지 남긴다)
         const myAraay = [1, 2, 3, 4, 5];
         myArray.slice(1, 4); // [2, 3, 4] ➡️ 1의 자리 부터 4의 앞자리(3의 자리)까지 남긴다.
         console.log(myArray.slice(0, 10)); // [1, 2, 3, 4, 5]
                                                                    ➡️ 0의 자리부터 9의 자리 까지 남긴다.
5. sort()
   - 배열의 요소 정렬
   - const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
     console.log(avengers.sort()); // ['스파이더맨', '아이언맨', '토르', '헐크']
                                                           ➡️ 가나다 순서대로 정렬이 되었다.
   - const nums = [3, 1, 8, 6];
     console.log(nums.sort()); // [1, 3, 6, 8]
   - const nums2 = [23, 5, 1000, 42];
     console.log(nums2.sort()); // [1000, 23, 42, 5] ➡️ 숫자는 의도와는 다르게 정렬
                                                                                    문자열로 전환 후 유니코드 포인트의
                                                                                    순서대로 변환하기 때문
   - 이러한 단점 해결을 위해 비교함수(comparFunction)를 사용   ❗확인❗
     원소의 순서는 비교 함수의 반환 값에 따라 적용
     const num3 = [13, 9, 10];
     num3.sort(function (a, b) {
                 console.log('a: ' + a, 'b: ' + b);
                 return a - b;  });   ➡️ 두 인자 a, b를 비교(-)해 음수면 a를 앞으로 위치
                                                  양수면 b를 앞으로 위치
                                                  0이면 변경 X
                                          // a: 9, b: 13, a-b는 음수 a를 앞으로 => [9, 13, 10]
                                          // a: 10, b: 9, a-b는 양수 b를 앞으로 => [9, 13, 10]
                                          // a: 10, b: 13, a-b는 음수 a를 앞으로 => [9, 10 13]
                                          // a: 10, b: 9, a-b는 양수 b를 앞으로 => [9, 10, 13]
6. forEach() ❗다시 확인❗
   - 배열의 각 요소에 대해 주어진 함수 실행
   - 반복문을 작성 하지 않고도 배열의 모든 요소에 대한 작업 수행 가능
   - const arr = ['참외', '키위', '감귤'];
     arr.forEach(function(item, index) {
         console.log(item, index);
             arr[index] = index;   }); // 참외 0, 키위 1, 감귤 2
   - const fruits = ["apple", "banana", "cherry"];
       fruits.forEach(function(fruit, index) {
           console.log(fruit, index);
               arr[index] = inde;   }); // apple, banana, cherry
   - fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`); });
     // 0: apple, 1: banan, 2: cherry
   - 순서대로 나온다
7. map()
   메소드 배열의 각 요소에 대해 주어진 함수 호출 결과를 모아 새로운 배열 생성
   원본 배열은 변경 X , 새로운 배열 반환
   - const arr = [1, 2, 3];
     const newArr = arr.map(function(item, index) {
              return item * index;    });
   console.log(newArr); // [0, 2, 6]    ➡️ item : [1, 2, 3], index : 번호 0, 1, 2
                                                              0*1 = 0, 1*2 = 2, 2*3 = 6
8. includes
   - 요소가 포함 -> true of flase 반환
   - 예시 : const arr = ['hello', 'world', 'hojun']
               arr.includes('world' or 'hello' or 'hojun') // true
               arr.includes('leehojun') // false