TIL # 23 (22 - 24)

22. Object

아래와 같은 표를 화면에 구현한다고 하자.

자바스크립트 언어로 이 데이터를 구현하려면 아래와 같이 데이터를 저장 해야 한다.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

이 중에서 하나의 plan을 선택하면 아래와 같이 alert를 띄워주자.

alert(plan2Name + "플랜 가격은 한 달에 " + plan2Price + "달러입니다.")

해당 플랜에 대한 변수 나열이 필요하고, 데이터가 늘어날수록 코드도 길어지고 관리하기 힘들어지기에 이런 유형의 데이터는 Object(객체)로 표현할 수 있다.
위의 데이터를 Object에 맞게 표현해보자.

• plan 1, plan2, plan3이라는 object가 있따.
• 각 object는 name, price, space, transfer, pages라는 5개의 property가 있다.
• name이라는 property의 데이터값은 string형이고, 나머지 property는 number이다.
  이렇게 object를 사용한 데이터는 아래와 같이 alert 메시지를 바꿀 수 있다.

alert(plan2.name + "플랜 가격은 한 달에 " +plan2.price + "달러입니다.")

• 객체는 {}중괄호로 감싸고,
• 콜론으로 구분된 이름/값 쌍들이
• 쉼표로 분리된 목록의 형태이다.
  객체는 key와 value로 구성된 프로퍼티들의 집합. 프로퍼티 이름은 중복이 되면 안 되기에 숫자를 달리하면 된다.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

아래 규칙을 지켜 객체를 만들 수 있다.

• property 이름은 중복될 수 없다
• property 이름과 property 값 사이에 :(콜론)으로 구분한다.
• property를 추가할 때는 ,(쉼표)를 붙여준다.
• property 값에는 어느 type이나 가능하다(string, number, array, object, function..)

해당 객체의 property값을 접근하고 싶을 때는 아래와 같다.

• 마침표(.)를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치한다.
• 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 작성한다.

let plan1 = {
  name: "Basic"
};
console.log(plan1.name);
console.log(plan1["name"]);

• 대괄호 표현은 대괄호[] 안에 변수가 들어갈 때 사용한다.즉, plan1 객체의 name이라는 프로퍼티에 접근하고 싶을 떄, 아래와 같이도 할 수 있다.

let plan1 = {
name: "Basic"};
let propertyName = "name";
console.log(plan[propertyName]);

propertyName은 그 자체로 string이 아니라 변수명이다.

let my0bj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    chilproperty: "haha"
  }
};
let name = "property";
console.log(my0bj[name+"1"]);
console.log(my0bj[name+"2"]);
console.log(my0bj[name+"3"]);
console.log(my0bj[name+"3"]["child"+name]);
console.log(my0bj.property1);
console.log(my0bj.property2);
console.log(my0bj.property3);
console.log(my0bj.property3.childproperty);

🔽 console.log(plan1[propertyName])를 호출하기 전까지는 둘이 연결 사항이 없다.

let을 처음에 선언하면 2번째에 선언할때는 let을 안써도 된다.

object안에 배열도 추가할 수 있다.

객체 안의 배열을 호출할 수도 있다.

객체 안에 객체를 또 사용할 수 있다.

HTML Guide에 접근할 수도 있다.

Assignment

• 이제까지 성공하셨던 Assignment와는 조금 다른 유형입니다.
• 그 동안에는 특정값을 구해서 return 했다면, 이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.
• getData에 배열 세 개를 인자로 넘길 것이고, 이 배열 세 개를 조합해서 하나의 새로운 객체를 만들 것입니다.
• getData는 세 개의 배열을 인자로 받는 함수입니다.
  • salesArr: 날짜별 판매량
  • ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]
  • reviewArr: 날짜별 리뷰수
  • ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]
  • likeArr: 날짜별 좋아요수
  • ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]

위의 예시로 보여드린 배열은 단지 예일뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.

왜 각각 세 개의 배열을 하나의 객체로 구조를 바꿔야 할까요?

위의 배열에서 4월 1일에 판매량, 리뷰수, 좋아요수를 확인하려면 세 개의 배열을 각각 for문으로 반복해서 날짜를 확인해야 하므로 좋은 구조의 데이터라고 할 수 없습니다. (날짜가 365일이라고 하면, 세 개의 배열이 각자 365번 돌아야 하니까요)

그래서 세 개의 배열을 사용하기 좋게 객체로 바꿀 것입니다.

객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.

다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.

objData가 갖고 있는 property는 3개 입니다.

• sumAmount: 총 판매량
• sumReview: 총 리뷰개수
• sumLike: 총 좋아요수

function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  
  for (let i = 0; i < salesArr.length; i++) {
    let amount = salesArr[i][1];
    
    sumAmount += amount;
  }
  
   for (let i = 0; i < reviewArr.length; i++) {
    let review = reviewArr[i][1];
    
    sumReview += review;
  }
  
  for (let i = 0; i < likeArr.length; i++) {
    let like = likeArr[i][1];
    
    sumLike += like;
  }
  
  return {
    sumAmount: sumAmount,
    sumReview: sumReview,
    sumLike: sumLike
  };
}

23. Scope

JS에서 '변수가 어디까지 쓰일 수 있는지'의 범위를 의미.

1. block

blcok이란 중괄호({})로 감싸진 것을 blcok 이라고 한다.
function의 내부는 하나의 blcok임.

function hi() {
  return 'i am blcok';
}

for (let i = 0; i < 10; i++) {
  count++;
}

if (i===1) {
  let j = 'one';
  console.log(j);
}

block 내부에서 변수가 정의되면 변수는 오로지 block내부에서만 사용할 수 있음
blcok 내부에서 정의된 변수는 지역(local) 변수라고 부름

2. Global (전역) Scope

scope은 변수가 선언되고 사용할 수 있는 공간. scope 외부 (blcok밖)에서는 특정 scope의 변수에 접근할 수 없다. block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 함. 코드 어디서든 접근 가능해서 변수값을 확인할 수 있음.

const color = 'red';
console.log(color);

function returnColor() {
  console.log(color);
  return color;
}

console.log(returnColor());

3. Scope의 오염

global 변수를 너무 남용하면 프로그램에 문제를 일으킬 수 있음. global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖는다. namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻. scope이라고도 하고, 특히 변수 이름을 얘기할 때 namespace라고도 한다.

4. 좋은 Scoping 습관

gobal 변수가 여기저기서 수정되면 안되기 때문에 변수들은 block scope으로 나눠놔야 함. 타이트한 scope의 변수는 코드 품질을 올려줌!

• 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 올라감
• 코드가 한줄한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워짐.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워짐
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서 (block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됨
  즉, global 변수는 쓰지 않도록 노력해야 하고, 최대한 {}내에서 let, const를 사용하여 변수를 새로 만들어서 쓰자.

function logSkyColor() {
const dusk = true;
let myColor = 'blue';

if (dusk) {
let myColor = 'pink';
console.log(myColor); //pink
}
console.log(myColor); // blue
}
console.log(myColor) ; //에러

24. Class

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호작용핟록 작성하는 방법이다.

let ray = {
  name: 'Ray',
  rpince: 200000,
  getName: function() {
    return this.name;
  },
  getPrice: function() {
    return this.price;
  },
  applyDiscount: function(discount) {
    return this.price * discount;
  }
}

조금 생소한 표현이 있다. 프로퍼티 값에 함수가 할당되어있다. 이렇게 객체의 property 값에는 함수도 넣을 수 있고, getPrice라는 함수는 다음과 같이 호출할 수 있다.

const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);

객체 내부에서, 해당 객체의 프로퍼티에 접근하려면 "this"라는 키워드를 사용할 수 있다. getPrice 메서드에서 this.price로 price키에 접근할 수 있고 값을 가져올 수 있다.