개인 학습을 위해 만들어진 글입니다.

TIL 201118, 작성 18일

자바스크립트 문법을 복습하면서 한번 더 짚고 넘어가고 싶은 내용들을 간단히 정리했다.

Class, Object

OOP(객체지향 프로그래밍)

​ OOP(Object-Oriented Programming)는 프로그램을 설계하는 방법론(혹은 패러다임)으로 프로그램을 Objects객체들의 모임이라는 관점으로 프로그램을 구성하는 것이다. 단어를 직역하면(객체에서 기원한 프로그래밍) 그 의미를 알 수 있다. 유연하고 유지 보수성이 높다는 점 등 때문에 많은 프로그래밍 언어들이 객체지향 프로그래밍을 지원하며 자바스크립트도 객체지향의 특징을 보이는 언어 중 하나이다.

​ 자바스크립트에서 Object와 Class는 객체지향적인 특징이라고 할 수 있다.

객체Object

let myObj = {
  name: "javascript"
  year: 2020
  hello: function() { console.log("hello!")}
}
const myVar = "name"
myObj.hello() // hello!
const secondObj = { a: 10, }
const secondOBj2 = { a: 10, }

secondObj === secondObj2 // false
secondObj = { a: 20 } // TypeError: Assignment to constant variable

​ object에 접근할 때 key에 접근할 때 myObj.name 과 같이 . 연산자를 사용하여 편하게 접근할 수 있는데, myObj["name"] 와 같은 접근할 수도 있다. 이런 문법이 있는 이유는 key위치에 myObj[myVar] 와 같이 변수가 들어갈 수 있기 때문이다.

​ secondObj 와 같이 const 로 선언된 변수 자체에 객체라 하더라도, property를 추가하거나 변경하는 것은 가능하다. 그러나 secondObj 에 객체를 재할당하는 let 으로 선언된 객체와 달리 불가능하다.

Object 순회

• Object.keys(myObj) : key를 배열로 반환

• Object.values(myObj) : 값을 배열로 반환

• Object.entries(myObj) : [key, 값]을 배열로 반환

  예: [ ["a", 10], ["b", 20], ['name', "hyeon"] ]

• for-in문

//ES6
for (let i in arr) {
  console.log(arr[i]);
}
for (let key in obj) {
  const value = obj[key];
  console.log(`${key}: ${value}`);
}

클래스Class

MDN class 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

​ Class의 유용성이라 하면 결국 어떤 객체의 틀을 만들어 비슷한 모양의 객체를 쉽게 만들어낼 수 있다는 점에 있다. 매번 객체를 번거롭게 만들어내는 것이 아니라 blueprint처럼 하나의 틀을 만들어 놓고 객체를 만들어내는 것이다(따라서 class의 문법은 object의 문법과 비슷하다). 이 때 class로부터 객체를 만들어내는 것을 instantiate인스턴스화라고 부르며 instance인스턴스는 class를 통해 생성된 객체이다. class는 대문자로 시작하고 CamelCase로 작성한다.

class Pizza {
	constructor(name, price) {
		this.name = name;
		this.price = price;
	}
	
  pirceDiscount(discount) {
    return this.price*discount;
  }
  
  setPrice(newPrice) {
    return this.price = newPrice;
  }
}

const combinationPizza = new Pizza("Combination Pizza", 10000);
combinationPizza.setPrice(12000);
combinationPizza.priceDiscount(0.5);

Constructor생성자

​ 객체와 클래스의 가장 큰 차이는 constructor라는 생성자 함수라고 할 수 있다. class는 새로운 instance를 생성할 때마다 constructor() 매서드를 호출되며 클래스 내에서 변경 가능한 상태값이면서 클래스내에서 사용할 수 있는 변수를 '맴버 변수'라고 부른다. 맴버변수는 this 키워드를 통해 접근할 수 있다.

method매서드

​ 함수 중에서 객체의 프로퍼티 값으로 된 함수를 메서드라고 부른다.

기타

1. string과 number

​ javascript에서는 자동으로 형 변환이 일어나는 경우가 있다. stringVar + numberVar 의 형태라면 number가 string형이 자동으로 변환된다. error prone하기 때문에 javascript의 단점이라고 볼 수 있다. typescript를 쓰자

• string to number 형 변환: Number("3.141592") 와 같이 가능하다. parseInt(), parseFloat()도 있다. 숫자로 변환할 수 없다면 NaN이 반환된다.

• number to string 형 변환: myNumberVar.toString() 와 같이 가능하다.

2. performance of push, unshift

​ arrName.push(elem), arrName.unshift() 는 모두 하나의 요소를 배열에 추가하는 함수이다. 하지만 메모리 할당의 측면에서는 매우 다르다.

• push: 배열 선언과 같이 할당된 배열 데이터에 해당하는 메모리가 가득 차기 전까지는 스택의 형태로 O(1)의 시간복잡도를 가진다. 배열이 커져서 메모리 재할당이 필요한 경우(아주 가끔 일어난다)에만 배열 copy가 일어난다
• unshift: 배열 맨 앞에 요소를 추가해서 O(1)의 시간복잡도를 가질 것 같지만, 배열 맨 앞에 요소를 끼워 넣기 위해서는 항상 배열 전체 copy가 일어나면서 메모리 재할당이 일어나기 때문에 unshift가 push보다 느리다.

출처: https://stackoverflow.com/questions/44031591/performance-of-array-push-vs-array-unshift

3. slice, split

​ slice(시작 위치, 끝 위치) 는 잘린 부분이 없어지는 것이 아니라 그 부분이 잘려 나온다. 왜 내 뇌는 맨날 반대로 기억하는가.

​ split() 은 string을 잘라서 배열로 return 한다.

• 예시: arrName = stringName.split(',')

4. Date()

let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

//ms로 반환됨
let time = rightNow.getTime();

5. Math object methods

https://www.w3schools.com/js/js_math.asp

6. Scoping

​ global 변수를 지양하고 최대한 { ... } 내에서 변수를 새로 만들어야 한다. 즉, block scope를 최대한 나누고 tight한 scoping을 하는 것이 코드의 가독성, 유지보수, 메모리 측면 등 모든 면에서 유리하다.

7. DOM 몇 가지 함수

function myFunction(){
  let myParent = document.getElementsByTagName('h1')[0];
  let myElement = document.createElement("p");
  myElement.classList.add("dom")
  myElement.innerHTML = "DOM"
  myParent.appendChild(myElement);
}

첫 번째 <h1> 태그의 하위 element로 <p> 태그를 생성하여 넣는 함수이다.

8. arrow function

​ 화살표 함수 문법 예시

// 같은 함수
function getName(name) { return name; }
const getName = name => { return name; }
const getName = name => name;
const getName = (name) => name;

// 같은 함수
function() {}
() => {}

// 같은 함수, argument 2개 이상은 괄호 생략 불가
const hi = function(a, b) { return a+b; }
const hi = (a, b) => a+b;

9. array methods

​ Array.map() , Array.forEach() 예제 코드

const arr = [1, 2, 3, 4, 5];
let oddIdxSum = 0;

// map()은 callback함수를 인자로 받아 배열 반환
const double = arr.map(x => x*2)
const triple = arr.map(function(x){
  return x*3
})

// forEach()는 callback함수를 인자로 반환 없이 반복문처럼
arr.forEach((elem, idx) => {
  if(idx%2){
    oddIdxSum += elem;
  }
})

10. 변수명

​ 변수명은 잘 지어야 한다. 하지만 어렵다. 변수명, 함수명만으로 그 의미를 파악할 수 있는 것이 좋다.

참고자료: https://geo-python.github.io/site/notebooks/L1/gcp-1-variable-naming.html

​ 변수명 짓다 파산