JavaScript2 (타입 ~)

1. 타입

• 타입 : 자료형 / 다양한 데이터를 용도에 맞게 쓰기 위해 사용

1. 원시 타입 (Primitive Types)

• 단순한 데이터를 저장

• 값이 변경 불가능

• 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 한다 (실제 데이터를 저장)

• string, number, bigint, boolean, undefined, symbol, null이 원시타입에 속한다.

2. 객체 타입 (Object Types)

let arr1 = [1, 2, 3];
let arr2 = arr1;
console.log(arr2);

arr1[0] = 10;
// arr1 = [10, 20];
console.log(arr2);

// 비교해보세요.
let value1 = 10;
let value2 = value1;
console.log(value2);

value1 = 20;
console.log(value2);

• 객체로서 저장

• 객체는 프로퍼티로 값과 메소드를 가지며, 각각 객체의 상태와 동작을 나타낸다.

• 값을 변수에 저장할때 값의 참조(주소)를 복사해 저장

• autoboxing

let val = 'hello!';
console.log(val.toUpperCase());

// 위의 코드가 내부적으로는 아래처럼 실행됩니다. 이것이 바로 autoboxing 입니다.

let val = 'hello!';
let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;

1. 배열 (Array)

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

• 특징
  • 빈 배열, 요소가 포함된 배열로 생성 가능
  • 숫자(index)를 사용하여 값에 접근 가능, 존재하지 않는 원소에도 접근이 가능
  • 가지고 있는 원소의 길이를 나타내는 length 프로퍼티를 가지고 있다.
  • 배열 안에 다른 배열을 포함할 수 있다. (다차원 배열)

• 메소드
  • push(), pop():
    • push : 배열의 끝에 요소를 추가하고 길이를 반환
    • pop : 배열의 마지막 요소를 꺼내어 반환, 꺼낸 요소는 배열에서 제외
  • shift(), unshift():
    • shift : 배열에서 첫번째 요소를 꺼내고 반환
    • unshift : 첫 번째 요소로 새로운 요소를 추가(여러 개의 요소도 추가 가능)
  • splice(): 배열의 요소를 추가, 제거 또는 교체
    • 첫번째 인자 : 삭제나 추가를 시작할 인덱스
    • 두번째 인자 : 삭제할 요소의 개수
    • 세번째 인자 : 추가할 요소

    // splice 문제
        const fish = ['정어리', '고등어', '돌고래', '참치', '고래상어', '코끼리'];
        // 1. splice 를 이용해 코끼리를 제거해보세요
        // 2. 참치 다음에 다금바리를 추가해보세요
        // 3. 돌고래를 제거하고 옥돔과 갈치를 추가해보세요
        fish.splice(-1, 1,);
        fish.splice(4, 0, '다금바리');
        fish.splice(2, 1, '옥돔', '갈치');
        console.log(fish);

    • const를 사용해도 되는 이유? : 배열은 객체 메소드로 주솟값이 저장된다.
      • splice는 배열내부의 요소를 변경하는 것이지 배열의 주솟값을 바꾸는것이 아니므로 const로 저장된 배열의 요소를 바꿀 수 있다.
  • slice(): 배열에서 요소들을 추출하여 새로운 배열로 반환하는 메서드
    • 첫번째 인자 : 추출을 시작할 인덱스
    • 두번째 인자 : 추출을 끝낼 인덱스
    • 첫번째 인자 ~ 두번째 인자 전까지 추출
    • 배열의 길이보다 큰 값을 전달하면 배열의 끝까지 추출
    • 아무것도 안넣어도 전체를 추출
    • 원본배열을 복사해서 새로운 배열을 반환하므로 원본에 영향 X
  • sort(): 배열의 요소를 정렬하고 정렬된 배열을 반환

    const avengers = ['아이언맨', '스파이더맨', '헐크', '토르'];
    console.log(avengers.sort());

    const nums = [3, 1, 8, 6];
    console.log(nums.sort());
    
    const nums2 = [23, 5, 1000, 42];
    console.log(nums2.sort());

    • 정렬은 원소를 문자열로 전환한 후에 유니코드 포인트의 순서대로 변환한다.
      • 따라서 문자열이 아닌 경우, 우리가 의도한대로 결과가 나오지 않을 수 있다.
      • 이를 해결하기 위해 비교함수(compareFunction)를 사용할 수 있다.

      const num3 = [13, 9, 10];
      
      num3.sort(function (a, b) {
        console.log('a: ' + a, 'b: ' + b);
        return a - b;
      });
      /**
      "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]
      */

      • 원본 배열을 정렬해 반환한다.
      • Tim Sort 알고리즘 (Merge sort + Insertion sort): https://d2.naver.com/helloworld/0315536
  • forEach(): 배열의 각 요소에 대해 주어진 함수를 실행
    • 첫번째 인자 : 배열 요소
    • 두번째 인자 : 인덱스

    const arr = ['참외', '키위', '감귤'];
    arr.forEach(function(item, index) {
      console.log(item, index);
    	arr[index] = index;
    });
    //콜백 함수 : 메서드에 인자로 제공되는 함수

    • 배열의 각 요소에 대해 특정 작업을 수행할 때 사용

    const avengers = ['spiderman', 'ironman', 'hulk', 'thor'];
    
    const newAvengers = [];
    avengers.forEach(function (item) {
        newAvengers.push('💖' + item + '💖');
    });

  • map(): forEach와 동작은 동일
    • 첫번째 인자: 각 요소를 처리할 함수
    • 두번째 인자 : 요소의 인덱스
    • return이 없으면 undefined로 채워진다. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

    const arr = [1, 2, 3];
    const newArr = arr.map(function(item, index) {
      return item * index;
    });
    
    console.log(newArr);

    • forEach의 경우 반환값이 없지만, map은 새로운 배열을 반환한다는 차이가 있다.
    • forEach의 경우 break나 return을 만나도 멈추지 않지만, map은 break로 멈출 수 있다.

    const data = [
        {
            "_id": "642ba3980785cecff3f39a8d",
            "index": 0,
            "age": 28,
            "eyeColor": "green",
            "name": "Annette Middleton",
            "gender": "female",
            "company": "KINETICA"
        },
        {
            "_id": "642ba398d0fed6e17f2f50c9",
            "index": 1,
            "age": 37,
            "eyeColor": "green",
            "name": "Kidd Roman",
            "gender": "male",
            "company": "AUSTECH"
        },
        {
            "_id": "642ba39827d809511d00dd8d",
            "index": 2,
            "age": 39,
            "eyeColor": "brown",
            "name": "Best Ratliff",
            "gender": "male",
            "company": "PRISMATIC"
        }
    ];
    
    const ages = data.map((item) => item.age);

  • filter(): 기존의 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 생성

    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const newArr = arr.filter(function(el) {
      return el % 2 === 0;
    });
    
    console.log(newArr);

    const arr11 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const newArr = arr11.filter(el => el % 2 === 0);
    
    console.log(newArr);

  • includes(): 요소가 포함이 되어있으면 true 아니면 false를 반환
    • 요소의 일부가 들어있어도 true가 반환 X

    const arr1 = ['hello', 'world', 'hojun']
    arr1.includes('world')
    
    const arr1 = ['hello', 'world', 'hojun']
    arr1.includes('leehojun')
    
    const arr1 = ['hello', 'world', 'hojun']
    arr1.includes('jun')

2. 객체 (Object)

• 여러개의 데이터를 한 변수에 저장할 수 있는 자료형

• 키를 통해 원하는 값에 접근할 수 있는 key-value 쌍으로 이루어져있다.

• 특징
  • key-value 쌍을 합쳐서 자산(properties)라고 표현한다.
  • property 값이 함수인 경우, 메소드라고 부른다.

    const babaYaga = {
      name: "John Wick",
      age: 53,
      from: "벨라루스",
    	askingHim: function(){
    		console.log("Yeah, I'm thinking I'm back!");
    	}
    };

  • 객체의 속성값에 접근하는 법 :
    • 개체이름.접근하고자 하는 값의 key
    • 개체이름[접근하고자하는 값의 key](속성이름이 변수명 규칙을 지켰다면)
  • 객체에 속성을 추가/삭제/존재여부 확인
    • 추가

      babaYaga.job = "Killer";

    • 삭제

      delete babaYaga.job;

    • 존재여부 확인

      console.log('age' in babaYaga);
      console.log('mercy' in babaYaga);

• 메소드
  • hasOwnProperty() : 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 bool 값을 반환

    const aespa = {
      members: ['카리나', '윈터', '지젤', '닝닝'],
      from: '광야',
    	sing: function(){
    		return "적대적인 고난과 슬픔은 널 더 popping 진화시켜!"
    	}
    };
    
    console.log(aespa.hasOwnProperty('itzy'));
    console.log(aespa.hasOwnProperty('from'));

  • for … in: 객체의 반복을 위해 만들어진 기능

    for (const variable in object) {
    	// ...
    }

    • in의 앞에는 매 반복마다 다른 속성이름(value name)이 변수로 지정
    • in의 뒤에는 반복작업을 수행할 객체를 지정
    • for … in 문 안에서 처리되는 프로퍼티들은 반드시 순서대로 반복되지 않는다.
      • 순서대로 처리하려면 일반적인 반복문을 이용해 처리
  • keys(), values():
    • Object.keys(): 객체의 속성이름(key)들
    • Object.values(): 객체의 속성 값(value)들

    console.log(Object.keys(aespa));
    console.log(Object.values(aespa));

2. This

this란?

• 객체를 가리키는 참조 변수

• 호출되는 위치에 따라 다른 값을 출력한다 (자신을 호출하는 객체를 가리킨다)

  function a(){ console.log(this) }
  a();
  // this = window

  let myObj = {
      val1: 100,
      func1: function () {
          console.log(this);
      }
  }
  
  myObj.func1();
  // this = myObj

• window 객체 : 브라우저 환경의 전역 공간을 의미 | Node.js 환경에서의 전역공간은 global

• 어떤 객체의 메소드가 아닌 단독 호출되는 함수의 this는 전역 공간을 참조

  let myObj = {
      val1: 100,
      func1: function () {
          console.log(this);
      }
  }
  
  let test = myObj.func1;
  test()

this의 특징

• this는 함수가 만들어질 때가 아닌 ‘실행’될 때 그 값이 결정된다.

  function sayName(){
    console.log(this.name);
  }
  var name = 'Hero';
  
  let peter = {
    name : 'Peter Parker',
    sayName : sayName
  };
  
  let bruce = {
    name : 'Bruce Wayne',
    sayName : peter.sayName
  };
  
  bruce.sayName();

3. 객체지향 프로그래밍

• 개념 : 프로그램을 작성할 때 객체들을 만들어 서로 소통하도록 하는 프로그래밍 방법론

• JavaScript의 객체 : 키,값,쌍으로 이루어진 데이터의 묶음

• 객체지향의 객체 : 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것

• 추상화 : 필요한 최소한의 정보로 대상을 표현하는 것

• 객체의 행동과 상태 :
  • 행동 : 메소드
  • 상태 : 프로퍼티

생성자

• 객체를 만들 때 new 연산자와 함께 사용하는 함수
  • new : 자동적으로 객체를 생성하고 반환
  • this와 연결

• 사용 이유 : 생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유한다.
  • 반복된 코드를 줄일 수 있음

• 생성자는 함수이므로 기본적으로 함수가 필요

• 암묵적으로 대문자로 시작하는 이름을 가진다.

  function Factory(){}

  function Factory(){}
  let robot1 = new Factory();

• 인스턴스(instance) : 생성자를 통해 반환되어 만들어진 객체

• instanceof로 생성자 함수와 인스턴스의 관계를 확인가능

  robot1 instanceof Factory

  function NewFactory(name){
      this.name = name;
      this.sayYourName = function(){
          console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
      }
  }

  let robot1 = new NewFactory('브랜든');

프로토타입(prototype)

• 특정 객체에 대한 참조

• 생성자 함수가 인스턴스를 생성하면, 숨겨진 프로퍼티인 [[Prototype]]이 그 안에 존재한다. 코드상에는 __proto__로 표현

• __proto__ 프로퍼티는 자신을 만든 생성자 함수의 prototype을 참조하는 역할을 한다.

• new 키워드를 통해 생성자 함수의 prototype과 인스턴스의 __proto__ 가 연결된다.

this.sayYourName = function(){
    console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
}

• 위 코드의 문제 : 객체의 메서드를 등록할 때마다 새로운 함수를 생성한다

function NewFactory2(name){
    this.name = name;
}

NewFactory2.prototype.sayYourName = function(){
    console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
}

• 프로토타입에 함수를 추가해 __proto__ 를 통해 참조할 수 있게 한다.

객체의 상속

• 기본적으로 프로토타입을 통해서 일어난다

  const obj = {
    name: 'test'
  }
  
  console.log(obj.hasOwnProperty('name'));
  
  const arr = [1,2,3];
  
  console.log(arr.hasOwnProperty('name'));

• hasOwnProperty : 객체가 가지고 있는 프로퍼티
  • 배열인 arr가 hasOwnProperty를 사용할 수 있는 이유? : 배열의 생성자인 Array(0)의 Prototype에서 hasOwnProperty를 상속받는다.

• 프로토타입 체이닝 : 자기 자신에게 존재하지 않는 프로퍼티나 메서드를 프로토타입을 통해 추적하는 과정

console.log(Array.prototype.__proto__ === Object.prototype);
console.log(Number.prototype.__proto__ === Object.prototype);
console.log(String.prototype.__proto__ === Object.prototype);
console.log(Math.__proto__ === Object.prototype);
//prototype = 생성자 함수에 위치
//모든 생성자함수들은 Object의 프로토타입과 연결되어있다.

function Child() {
    Parent.call(this);
}

Child.prototype = Object.create(Parent.prototype); // 지정된 프로토타입 객체를 갖는 새 객체를 만듭니다.


Child.prototype.canWalk = function () {
    console.log('now i can walk!!');
}
//요즘엔 이렇게 쓰지않음 보통 class로 상속한다.

이렇게 prototype을 이용해 메소드를 인스턴스들이 공유하도록 하여 메모리 공간을 절약할 수 있다.

• 프로토타입의 단점:
  1. 객체 안에 존재하던 메소드가 prototype 이라는 키워드와 함께 외부로 빠져나가 코드가 별로 아름답지 못해보인다.
  2. 보편적인 객체지향 코드의 모습과 차이가 있다.

classes

• ES6부터 사용가능

• 객체를 생산하는 생산 도면

// function Robot(name) {
//     this.name = name;
// }

// Robot.prototype.sayYourName = function () {
//     console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
// }


class Robot {
    // 클래스의 생성자 함수입니다. 하나의 클래스는 하나의 생성자만 정의할 수 있습니다. 
		// 그리고 생성자 함수는 new 키워드가 호출될때 자동으로 실행됩니다.
    constructor(name) {
        this.name = name;
    }

    // 메소드를 정의합니다. 메소드는 클래스가 생성한 인스턴스를 통해 사용할 수 있습니다.
    sayYourName() {
        console.log(`삐리비리. 제 이름은 ${this.name}입니다. 주인님.`);
    }
}

• 자바스크립트 클래스(classes) : 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것
  • 실제 내부 동작은 동일하다

• Encapsulation : 데이터와 해당 데이터를 조작하는 메서드들을 하나의 단위로 묶는 것 (OOP의 개념 중 하나)

• Syntactic sugar : 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법

상속받기

• 클래스의 상속은 extends 키워드를 사용

• ‘파생 클래스’(derived classes) : 상속을 받는 클래스
  • 부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용
  • super는 부모 생성자를 참조

super 사용시 주의할 점

• 파생 클래스에 생성자 함수를 사용하고 싶다면 반드시 super 함수를 사용해야한다.

• 파생클래스에 생성자 함수가 없다면 super 함수가 자동으로 호출되어 부모 클래스의 프로퍼티를 상속 받게 한다.

• 생성자 함수에서 this 값을 사용할 경우 super 함수는 반드시 this 보다 먼저 실행되어야 한다.

• 파생 클래스가 아닌 클래스에서 사용하려고 해도 에러가 발생.

class BabyRobot extends Robot {
    constructor(name) {
        super(name);
        this.ownName = '아이크';
    }

    sayBabyName() {
				// 또한 상속을 받게되면 부모 클래스의 메소드를 사용할 수 있게 됩니다. 때문에 this로 접근 할 수 있습니다.
        this.sayYourName();
        console.log('Suceeding you, Father!');
    }
}

기타

• Object 객체의 정체 : 자바스크립트안에 내장되어있는 객체

추가할 것

• autoboxing

• 딥다이브 - https://tang-co.tistory.com/141
  • https://velog.io/@junh0328/DEEP-DIVE-한-장-요약-원시-타입과-객체-타입

• 전역공간사용 ⇒ 메모리 누수