멋쟁이 사자처럼 FE 2기 - 29

임홍렬·2022년 5월 11일
0
post-thumbnail

220511


JavaScript


클로저

폐쇠된 공간 안에 데이터에 접근하기 위한 테크닉이다.
변수 은닉과 메모리 효율, 코드 효율(또는 완전성)을 극대화하기 위해 사용한다.

var d = 'X';

function outer(){
		var a = 1;
    	var b = 'B';
	
    function inner(){
		var a = 2;
        console.log(b);
   }
   return inner
}

var someFun = outer();
someFun();
outer 안에 inner 가있으므로 outter 다음엔 글로벌
요고시 바로 scopechain

Map

키-값 쌍을 가지는 객체 자료형의 한 종류이다.
let m = new Map();

// Map에 값을 넣기
m.set('하나', '1');
m.set(1, '하나');
m.set(true, 1);
m.set(false, 0);

// Map의 값에 접근하기
console.log(m.get('하나'));
console.log(m.get(true));

// Map의 값이 있는지 확인하기
console.log(m.has('하나'));

// Map의 값을 제거하기
console.log(m.delete('하나'));
console.log(m.has('하나'));
console.log(m);

// Map의 크기를 확인하기
console.log(m.size);

// let mm = new Map()
// mm.set('하나', m)
// Map(1) {'하나' => Map(3)}
// mm.set('하나', {'one':1, 'two':2})
// Map(1) {'하나' => {…}}

Map 과 Object의 차이

Map 객체와 Object 는 둘 다 key - value 관계를 가진다는 점에서 비슷해보이지만 몇 가지 중요한 차이점이 있다.

  • Object의 키는 문자열 타입으로만 지정해야하지만, Map의 키는 모든 값을 가질 수 있습니다.
  • Object는 크기를 사용자가 직접 수동으로 알아내야 하지만, Map은 size를 통해 크기를 쉽게 얻을 수 있습니다.
  • Map은 데이터를 추가하거나 제거하는 작업에서 Object 보다 더 나은 성능을 보입니다.

objMap = new Map();
objMap.set('one', 1);
objMap.set('two', 2);
objMap.set('three', 3);

console.log(objMap.size); // 3

obj = {hi : 1, hi2 : 2, hi3 :3, hi4: 4};
console.log(obj.length); // undefined
console.log(obj.size); // undefined

set

모든 타입의 값을 저장하는 객체자료형의 한 종류입니다. 
이때 객체 안의 값은 중복을 허용하지 않습니다.
let s = new Set('abcdeeeeeeeee');
console.log(s);
console.log(s.size);

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

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

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

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

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

// Set의 모든 값을 제거하기 
ss.clear
console.log(ss);

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

this

자신을 호출한 객체
자신이 생성할 객체
모든 함수는 실행할 때마다 this 라는 객체가 추가됩니다. this는 함수가 실행될 때 함수를 소유하고 있는 객체를 참조합니다.
this는 함수가 만들어질 때가 아닌 '실행'될 때 그 값이 결정됩니다.
/ * this */
function sayName(){
  console.log(this.name);
}

var name = 'Hero'; 
// 전역으로 선언한 name 변수의 앞에는 window 가 생략되어 있습니다. 
// 때문에 window.name === "Hero" 가 성립합니다.
let peter = {
  name : 'Peter Parker',
  sayName : sayName
}

let bruce = {
  name : 'Bruce Wayne',
  sayName : sayName
}

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

/* sayName() 함수를 실행했을 때와 
peter, bruce 객체의 sayName 함수를 호출했을 때의 결과를 비교해 보세요 */

this 값을 사용자의 의도대로 조작하기

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

이는 사용자가 원하는 의도대로 binding을 통한 컨트롤을 할 수 있게 합니다.

call()
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.call(bruce) 의 결과는 무엇이 될지 생각해 봅시다. // Bruce Wayne
apply()
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']);

peter.sayName.apply(bruce, ['batman', 'richman']) 의 결과가 무엇이 될지 생각해보고 
apply 를 call로 바꾸어 호출했을 때와 비교해 봅시다.
// Bruce Wayne is batman or richman
bind()
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.sayName();

peter.sayName() 과 bruce.sayName() 의 결과 값이 무엇이 될지 생각해봅시다.
//bruce
//bruce

JSON

자바스크립트에서 객체를 표현하는 형식으로 데이터를 표현한것이다. 
다른 방식에 비해 가볍고 자바스크립트와 호환성이 높아 널리 사용된다.
{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "본명": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "본명": "부르스 배너"
    }
  ]
}

JSON 메서드

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

let l = [10, 20, 30];
let a = JSON.parse(JSON.stringify(l));
a[0] = 1000;

console.log(l);

앞으로 공부해서 살을 더 붙여보쟈..!

profile
뜨내기 FE 개발자

0개의 댓글