200807_TIL

oh_ji_0·2020년 8월 7일

TIL

목록 보기

10/61

Today I leared

객체지향

매개변수

기본자료형

자바스크립트 언어 이해

spread operator & rest prameter

cli & git

[객체지향]

객체지향 프로그래밍
하나의 모델이 되는 청사진을 만들고, 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴
class 와 instance
- 클래스는 함수로 정의할 수 있다.
```
function ClassName(){
}
```
- class 라는 키워드를 이용해서 정의할 수 있다.
```
class ClassName(){
	constructer(){}

	}
	
	//ClassName.prototype.methodName과 같음
	methodName(){
	}
}
```
- new 키워드를 통해 클래스의 인스턴스를 만들어 낼 수 있다.
클래스엔 속성과 메소드를 정의할 수 있다.
속성과 메소드를 인스턴스에서 사용할 수 있다.
prototype 을 이용하여 메소드를 정의할 수 있다.
prototype

모델의 청사진 만들 때 쓰는 원형 객체
constructor

인스턴스가 초기화 될 때 실행하는 생성자 함수
this

함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context.

new 키워드로 인스턴스를 생성할 땐 해당 인스턴스가 바로 this 값이 된다.
Object, Array, Number, String 등도 클래스와 비슷한 패턴을 보인다. (생성자 함수, 메소드와 프로퍼티를 갖고 있다)

[매개변수 복습]

전달인자와 함께 함수에 전달하면 매개변수를 통해 전달받은 인자를 사용할 수 있다.
만약 전달인자가 유동적이라면 Rest Parameter를 이용해 매개변수를 지정해줄 수 있다. 이 경우 매개변수가 배열의 형태로 전달된다. (나머지 매개변수)
arguments라는 키워드를 이용할 수도 있다 arguments는 배열같아 보이지만 배열 메소드를 사용할 수 없다. (유사배열)
디폴트 매개변수를 지정해줄 수 있다. ( 앞 매개변수에 undefined가 들어갈 경우, 그리고 뒤 매개변수엔 값이 들어오지 않을 경우 디폴트 값을 전달한다 )

[ checkpoint - 지난 학습 복습 ]

매개변수
- 매개 변수는 함수 내에서 지역변수로 선언된다. 바깥 스코프에 변수로 전달되지 않는다.
기본 자료형 ( Primitive value ) 은 값을 복사한다. 복사한 뒤 복사한 값을 바꿔도 원래 값에는 영향을 주지 않는다.
- 여섯가지 데이터 타입
  - Boolean
  - Null
  - Undefined
  - Number
  - String
  - Symbol (ECMAScript 6 에 추가됨)
기본 자료형이 아닌 레퍼런스 타입 객체나 배열의 경우 값을 바로 담는 것이 아닌 주소 값을 가리킨다. (주소할당)

자바스크립트는 가비지 콜렉션 언어

자바스크립트의 배열은 다른 언어와 달리 크기가 정해져있지 않다.

자바스크립트와 같은 고수준 언어들은 "가비지 콜렉션(GC)"이라는 자동 메모리 관리 방법을 사용한다. 가비지 콜렉터의 목적은 메모리 할당을 추적하고 할당된 메모리 블록이 더 이상 필요하지 않게게 되었는지를 판단하여 회수하는 것이다.

가비지 콜렉션 알고리즘의 핵심 개념은 참조이다. A라는 메모리를 통해 (명시적이든 암시적이든) B라는 메모리에 접근할 수 있다면 "B는 A에 참조된다" 라고 한다. 예를 들어 모든 자바스크립트 오브젝트는 prototype 을 암시적으로 참조하고 그 오브젝트의 속성을 명시적으로 참조한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

var x = { 
  a: {
    b:2
  }
}; 
// 2개의 오브젝트가 생성되었다. 하나의 오브젝트는 다른 오브젝트의 속성으로 참조된다.
// 나머지 하나는 'x' 변수에 할당되었다.
// 명백하게 가비지 콜렉션 수행될 메모리는 하나도 없다.

var y = x;    // 'y' 변수는 위의 오브젝트를 참조하는 두 번째 변수이다.
x = 1;        // 이제 'y' 변수가 위의 오브젝트를 참조하는 유일한 변수가 되었다.

var z = y.a;  // 위의 오브젝트의 'a' 속성을 참조했다.
              // 이제 'y.a'는 두 개의 참조를 가진다. 
              // 'y'가 속성으로 참조하고 'z'라는 변수가 참조한다.

y = "yo";     // 이제 맨 처음 'y' 변수가 참조했던 오브젝트를 참조하는 오브젝트는 없다.
              // (역자: 참조하는 유일한 변수였던 y에 다른 값을 대입했다)
              // 이제 오브젝트에 가비지 콜렉션이 수행될 수 있을까?
              // 아니다. 오브젝트의 'a' 속성이 여전히 'z' 변수에 의해 참조되므로 
              // 메모리를 해제할 수 없다.

z = null;     // 'z' 변수에 다른 값을 할당했다. 
              // 이제 맨 처음 'x' 변수가 참조했던 오브젝트를 참조하는 
              // 다른 변수는 없으므로 가비지 콜렉션이 수행된다.

자바스크립트 뒤에선 C++, C# 기반으로 돌아간다.
- 구글 V8 엔진
  
  V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others.
  
  https://v8.dev/
spread syntax는 배열안의 요소들을 넣는 것이지 배열 자체를 넣는 것이 아니다.
spread 펼치다. 배열을 펼쳐서 바꿔준다.
매개변수에서 스프레드 문법을 사용하면, args 엔 배열이 담긴다.
Spread Operator(전개 연산자)와 Rest Parameter의 차이
- Rest 파라미터
  
  Rest 파라미터는 spread 연산자를 사용하여 함수의 파라미터를 작성한 형태. 즉 Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 배열로 받을 수 있다.
- arguments 는 유사배열 객체고, rest 파라미터는 배열이다.
리눅스 cli 환경에서의 파일 생성, 조회 갱신 복습
깃 설치와 삭제 / 우분투 패키지 관리자 apt 복습

[Comment]

@@ 오늘은 테스트 빌더 과제 마지막 페어 날이었다. 페어분과 약속했던 코드리뷰를 위해 어제 작성했던 코드를 다시 재작성해봤다.

어제는 여러가지 조건에 맞춰 하나씩 조건을 돌리고 그 결과를 출렸했다면 오늘은 모든 조건을 아울러서 하나의 코드로 출력할 수 있을까? 생각하고 작성해봤다. 만약 실무에서 카드별 prefix 값과 카드 숫자의 길이가 저장된 긴 객체 하나를 넘겨준다면 그걸 끌어다가 10개 정도의 카드를 한꺼뻔에 판별하는 코드를 작성할 수 있을까가 오늘 고민의 골자였다.

결론은 어찌저찌 콘솔 찍어가며 삽질한 끝에 코드 작성에 성공했고 나름 뿌듯한 작업이었으나, 어제 페어와 작성한 코드 실행 duration이 10초였다면, 오늘 작성한 코드는 배열을 모두 돌아 객체를 다시 정리해주고 그 객체를 일일이 돌아 맞는 카드를 찾아내는 작업을 계속 하는 카드였기 때문에 30초는 훌쩍 넘어서 실행이 끝났다.

이게 이렇게 하면 안되는 건가... 허무해지는 순간. 이렇게 되면 카드별 객체를 추가해주기만 하면 되니 추가 및 카드 삭제시 코드 정리엔 편할 것 같은데, 이런식으로 작성해도 맞는건지는 확신이 안 선다. 실행 시간 단축을 위해 조금 더 고민해 봐야 겠다.

그래도 오늘 깃에 들어가서 브랜치도 따보고 체크아웃 및 머지도 해보며 했던 작업도 해보고 안 될 것 같았던 다른 방식의 코드 구현도 해보고 나름 뿌듯하고 의미있는 하루였다. 😊😊😊😊

oh_ji_0

기본에 충실하고 싶습니다. #Front-end-developer

이전 포스트

200806_TIL

다음 포스트