2019-05-10 전역변수의 문제점/let,const와 블록레벨 스코프/프로퍼티의정의/생성자 함수에 의한 객체 생성

전역변수의 문제점

1. 생명주기 무한대(메모리 해제를 하지 않는다.-> 메모리를 오래잡고있으면 다른 곳에 영향을 줄 수 있다.)

 

2. 암묵적 결합, 어디서든지 접근이 가능하기때문에 값이 변할 위험이 있음

 

 

**함수는 짧게, 단순하게, 한가지 일만 하는 것이 좋다!(스코프를 좁게 만드는것이 좋다 = 변수가 빨리 죽는다.)

 

렉시컬 스코프 = 함수가 어디서 호출되는지와 상관없이 어디서 정의됬는지에 따라서 상위스코프가 결정되는 것

 

ES6에서부터는 모듈을 쓴다. ( import, export 두개의 키워드로 되어있다.)

아직은 대부분의 브라우저들이 구현을 안하고 있다.

 

Webpack(이것을 사용해서 모듈을 사용하게 할 수 있다.)

Babel 

 

==> 전역변수 쓰지말자.

 

 

let 키워드let,const와 블록레벨 스코프

 

const로 만든것은 변수인데 재할당이 금지된 변수를 만드는 것.

(원시값은 재할당 이외에 바꿀 방법이 없다.)

 

• ES6를 사용한다면 var 키워드는 사용하지 않는다.
• 재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
• 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

 

var의 어떠어떠한 문제점 때문에 let,const가 나왔다?

 var는 중복선언을 허용해버린다. 

var x = 1;
// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 아래 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;
console.log(x); // 100

 var는 변수 호이스팅이 된다. 

// 이 시점에는 변수 호이스팅에 의해 이미 변수 foo가 선언되었다. (1. 선언 단계)
// 변수 foo는 undefined로 초기화된다. (2. 초기화 단계)
console.log(foo); // undefined

// 변수에 값을 할당 (3. 할당 단계)
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.
var foo;

 var는 함수레벨 스코프만 지원한다. 

var i = 10;

// for문에서 선언한 i는 전역 변수이다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5

 

위 문제를 해결하기 위해

let, const가 나왔다.

중복선언 금지, 블록레벨 스코프, 변수 호이스팅

 

 

 

프로퍼티 정의

=프로퍼티의 정체를 알리는것

 

ECMAScript 스펙(설계서) 

내부 슬롯과 내부 메소드는 ECMAScript 스펙에서 요구하는 객체와 관련된 내부 상태와 내부 동작을 정의한 것

 

 

 

생성자 함수에 의한 객체 생성

Object 생성자함수 : 자바스크립트에서 기본적으로 제공하는 빌트인 함수이다.

 

console.log(Object()); //{} new를 까먹었을때 new를 붙여줌(자바스크립트가 알아서..)
console.log(new Object()); //정석

 

빈객체를 하나 만든다.  이후 프로퍼티 또는 메소드를 추가하여 객체를 완성할 수 있다.

 

const circle1 = {
  radius: 5,
  getDiameter() {
    return 2 * this.radius;
  }
};

console.log(circle1.getDiameter()); // 10

const circle2 = {
  radius: 10,
  getDiameter() {
    return 2 * this.radius;
  }
};

console.log(circle2.getDiameter()); // 20

위 코드의 문제점 : 여러개를 만들게되면, getDiameter라는 똑같은 함수를 계속 만들어야한다.

 

function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// 인스턴스의 생성
const circle1 = new Circle(5);  // 반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

위처럼 만들어서해야한다.

만약, new Circle()에서 new가 없다면, 그냥 함수 호출이다!

const str = new String(); // String이라는 객체 생성자
const str = Sting(); // String으로 형변환

함수는 다양한 방식으로 호출된다. 

// 함수는 다양한 방식으로 호출될 수 있다.
function foo() {
  console.log(this);
}

// 일반적인 함수로서 호출
// 전역 객체는 브라우저 환경에서는 window, Node.js 환경에서는 global을 가리킨다.
foo(); // window

// 메소드로서 호출
const obj = { foo }; // ES6 프로퍼티 축약 표현
obj.foo(); // obj

// 생성자 함수로서 호출
const inst = new foo(); // inst

 

[[ aaaaa]] : 대괄호가 있는 것은?  => 내부슬롯

 

화살표 함수 사용하는방법.

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

const filtered = arr.filter(item => item !== 2);

console.log(filtered);

 

function Circle(radius) {
  // 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.

  // 2. 생성된 빈 객체를 가리키는 this를 사용하여 프로퍼티나 메소드를 추가하고 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };

  // 3. 암묵적으로 this를 반환한다.
  // 명시적으로 객체를 반환하면 암묵적인 this 반환이 무시된다.
  // 아래 return은 생략하는게 맞는 것이다.
  return {};
}

// 인스턴스 생성. Circle 생성자 함수는 명시적으로 반환한 객체를 반환한다.
const circle = new Circle(1);
console.log(circle); // {}

명시적으로 리턴을 해버리면 그 객체를 리턴해버리기 때문에 그냥 쓰지 않는다.