[230413] Set | this | JSON

🪄 Set

객체자료형
객체 안의 값은 중복을 허용하지 않는다 -> 집합 개념

let s = new Set('abcdeeeeeeeee');
s.size;

// Set에 값 추가하기
s.add('f');

// Set 순환하기
for (let variable of s) {
  console.log(variable);
}

// 값이 배열인 경우
let ss = new Set('abcdeeeeeeeee'.split(''));

// Set의 값 제거하기
ss.delete('b');

// Set의 값 확인하기
ss.has('a');

// Set의 모든 값 제거하기 
ss.clear;

합집합, 교집합, 차집합

let a = new Set('abc');
let b = new Set('cde');
// 합집합
let union = new Set([...a].concat(...b));
// 교집합
let cro = [...a].filter(value => b.has(value));
// 차집합
let dif = [...a].filter(x => !b.has(x));

NaN과 undefined도 Set에 저장할 수 있다. 원래 NaN !== NaN이지만, Set에서는 NaN == NaN으로 간주된다.

let test = ["윤말랑", NaN, NaN, NaN];
let s = new Set(test);
console.log(s); // Set(2) {'윤말랑', NaN}

forEach(): array와 다르게 value가 2번 반복된다

let s = new Set("aabbb");

// IE10은 미지원
// s.forEach((value, value, set) => {});
s.forEach((a, b, set) => {
  console.log(a, b, set);
});
// a a Set(2) {'a', 'b'}
// b b Set(2) {'a', 'b'}

🪄 this

자신을 호출한 객체 or 자신이 생성할 객체를 가리키는 자기 참조 변수

• 전역공간의 this는 window(node는 global)

function a() {
  console.log(this);
}

a(); 		// Window 호출
window.a();	// Window 호출

• 메서드로 호출한 경우 this는 멤버접근연산자 앞의 객체

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

myObj.func1(); // myObj 호출

let test = myObj.func1;
test(); // Window 호출

• 함수로 호출할 경우 this는 window(node는 global)

const person = {
  name: "mallang",
  age: 23,
  a() {
    console.log(this);
    console.log(this.name);
    function b() {
      console.log(this);
      console.log(this.name);
      function c() {
        console.log(this);
        console.log(this.name);
      }
      c();
      // Window
      // 
    }
    b();
    // Window
    // 
  },
};
person.a();
// {name: 'mallang', age: 23, a: ƒ}
// mallang

• 화살표 함수의 경우 this는 상위 스코프
  this에 바인딩되는 객체가 동적으로 결정되는 기명함수와 달리 화살표 함수의 경우 상위 스코프의 this를 가리킨다(Lexical this)

const person2 = {
  name: "mallang",
  age: 23,
  a() {
    console.log(this);
    console.log(this.name);
    let b = () => {
      console.log(this);
      console.log(this.name);
      let c = () => {
        console.log(this);
        console.log(this.name);
      };
      c();
	  // {name: 'mallang', age: 23, a: ƒ}
	  // mallang
    };
    b();
	// {name: 'mallang', age: 23, a: ƒ}
	// mallang
  },
};
person2.a();
// {name: 'mallang', age: 23, a: ƒ}
// mallang

• 생성자 함수의 경우 this는 인스턴스

function Book(책이름, 책가격, 저자, 출판일) {
  this.출력 = console.log(this);
  this.책이름 = 책이름;
  this.책가격 = 책가격;
  this.저자 = 저자;
  this.출판일 = 출판일;
}

let newBook = new Book("Javascript", 1000, "윤말랑", "2023.04.13");

// Book {}
// 저자:  "윤말랑"
// 책가격: 1000
// 책이름: "Javascript"
// 출력: undefined
// 출판일: "2023.04.13"

• 콜백함수의 경우 this가 다르게 동작 할 수 있다

[1, 2, 3].forEach(function () { console.log(this); }, [10, 20, 30]);
// [10, 20, 30]
// [10, 20, 30]
// [10, 20, 30]

let 인세규정 = {
  책: 10,
  영상콘텐츠: 50,
};

function 인세계산함수책(e) {
  return e * (this.책 / 100);
}

function 인세계산함수영상(e) {
  return e * (this.영상콘텐츠 / 100);
}

console.log([100, 200, 300].map(인세계산함수책, 인세규정));	// [10, 20, 30]
console.log([100, 200, 300].map(인세계산함수영상, 인세규정));	// [50, 100, 150]

함수의 call(), apply(), bind() 메소드를 사용하면 사용자의 의도대로 this를 조작하거나 고정해 둘 수 있다

• call()
  인수에 this로 사용할 값과 아규먼트를 전달한다

var peter = {
  name: "Peter Parker",
  sayName: function () {
    console.log(this.name);
  },
};

var bruce = {
  name: "Bruce Wayne",
};

peter.sayName.call(bruce);	// Bruce Wayne
peter.sayName(); 			// Peter Parker

var peter = {
  name: "Peter Parker",
  sayName: function (감탄사) {
    console.log(this.name + 감탄사);
  },
};

var bruce = {
  name: "Bruce Wayne",
};

peter.sayName.call(bruce, "!");	// Bruce Wayne!
peter.sayName("!");				// Peter Parker!
peter.sayName();				// Peter Parkerundefined

• apply()
  인수에 this로 사용할 값과 배열의 형태로 아규먼트를 전달한다

var peter = {
  name: "Peter Parker",
  sayName: function (is, is2) {
    console.log(this.name + " is " + is + " or " + is2);
  },
};

var bruce = {
  name: "Bruce Wayne",
};

peter.sayName.apply(bruce, ["batman", "richman"]);	// Bruce Wayne is batman or richman

• bind()
  this가 고정된 새로운 함수를 반환한다

function sayName() {
  console.log(this.name);
}

var bruce = {
  name: "bruce",
  sayName: sayName,
};

var peter = {
  name: "peter",
  sayName: sayName.bind(bruce),
};

peter.sayName();	// bruce
bruce.sayName();	// bruce

🪄 JSON

JSON.parse() : JSON 문자열을 자바스크립트 객체로 변환

• 프로퍼티 이름은 반드시 쌍따옴표로 표현해야 한다

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
obj; // {result: true, count: 42}

const json = "[1, 2, 3]";
const arr = JSON.parse(json);
arr; // [1, 2, 3]

JSON.stringify() : 자바스크립트 객체를 JSON 문자열로 변환

const json = { result: true, count: 42 };
const str = JSON.stringify(json);
str; // '{"result":true,"count":42}'

// 깊은 복사
let l = [10, 20, 30];
let a = JSON.parse(JSON.stringify(l));
a[0] = 1000;

console.log(l); // [10, 20, 30]