오늘 배운 것

1. Scope

컴퓨터 프로그래밍에서 변수 영역은 변수가 유효성을 갖는 영역을 가리킨다.

프로그램은 영역을 벗어난 변수를 가리킬 수 없다.

출처 : 위키백과

• Scope란 '변수에 접근할 수 있는 범위'

A. Local Scope와 Global Scope

• Local Scope에서 선언된 변수는 바깥쪽 Scope에서 사용할 수 없다.
• Global Scope는 최상단의 Scope, 이 곳에 선언된 전역 변수는 어디서든 접근이 가능
• 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위

B. Function Scope와 Block Scope

• Block Scope : 중괄호로 시작하고 끝나는, 중괄호 단위의 범위

• Function Scope : 함수 단위의 범위

  	let	const	var
  유효 범위	Block Scope	Block Scope	Function Scope
  재할당	가능	불가능	가능
  재선언	불가능	불가능	가능

C. 전역변수

• Global Scope에서 선언된 함수, var로 선언된 변수는 window 객체와 연결

var A = '123';
console.log(window.A); // 123

• 선언 키워드(var, let, const) 없이 선언된 변수는 전역 변수로 취급

2. Closure

(외부 함수의 변수에 접근할 수 있는 내부)함수와 그 함수가 선언된 어휘적 환경의 조합

다음은 MDN의 Closure에 나와있는 예시

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

• 이 함수의 특이한 점은 함수안에 내부 함수가 존재한다는 점과 내부 함수에는 자신만의 지역변수가 없다는 점이다.

• 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재하기때문에 makeFunc()의 실행이 끝나면 name 변수에 더 이상 접근할 수 없게 될 것으로 예상되는 것이 일반적이다.

• 하지만 이 경우 함수가 리턴되면서, 리턴하는 함수(displayName)가 클로저를 형성하기 때문에 makeFunc함수의 실행이 종료되어도 name변수에 접근이 가능하다.

• 클로저는 함수(displayName)와 함수가 선언된 어휘적 환경의 조합이다.

• 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다(유효범위: displayName함수 Scope, makeFunc함수 Scope, Global Scope) ,

• 즉 클로저가 형성될 때, 유효 범위 내에 있는 모든 변수를 기억

3. Parameters

함수에서는 매개변수(parameters)를 통해 전달받은 인자를 사용할 수 있는데, 전달인자(arguments)의 길이가 유동적일 때 사용할 수 있는 방법 두 가지를 배웠다.

A. Rest Parameter ES6

Rest parameter를 이용해 매개변수를 지정해주는 방법이다.

매개변수의 자리에 ...[매개변수 이름]을 입력해준다.

이 때 매개변수는 배열의 형태로 전달된다.

function getMaxNum(...nums) {
    console.log(nums); 
}
getMaxNum(3,5,8,10);
// [3,5,8,10]

• Rest 파라미터 nums에 전달인자들이 배열형태로 전달되기 때문에 reduce 등 배열 method의 사용 가능

B. arguments ES5

function getMaxNum() {
    console.log(arguments); 
}
getMaxNum(3,5,8,10);
// [3,5,8,10]

• 다만 이 arguments객체는 배열같아 보이지만, 실제 배열이 아니다. 이를 유사배열이라 부른다.
• 따라서 배열의 method를 사용할 수 없다.

4. 객체지향 프로그래밍

하나의 모델이 되는 청사진(Blueprint)을 만들고(Class), 그 청사진을 바탕으로 한 객체(Object)를 만드는(Instance) 프로그래밍 패턴

A. 객체 기본개념

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

1. 객체 : 관련된 데이터와 함수의 집합(객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다.)

2. 객체를 구성하는 값은 어떠한 형식이라도 가능하다.(객체, 문자열, 숫자, 배열, 함수 등)

3. 그 중 함수를 제외한 부분을 프로퍼티(속성), 함수 부분을 메소드라고 부른다. (위 객체는 4개의 프로퍼티와 두개의 메소드로 이루어져 있다.)

   //위 객체의 greeting 메소드만 빼 왔다.
   
   greeting: function() {
     alert('Hi! I\'m ' + this.name.first + '.');
   }

4. this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.

5. 따라서 위에서의 this 는 person객체와 동일하다.

B. 객체지향 JavaScript

객체지향 프로그래밍이 Class를 바탕으로 한 Instance 객체를 만드는 프로그래밍 패턴이라고 했다.

자바스크립트에서 어떻게 클래스와 인스턴스를 만들고 활용할 수 있을까.

1. 클래스(Class) 만들기

• 클래스는 보통 이름의 첫 글자를 대문자로 설정한다.

가. 생성자 함수를 이용한 방법 ES5

function Car(name) {
  	this.name = name;		//프로퍼티(속성) 정의
}

Car.prototype.drive = function(){
    console.log(this.name + '가 운전을 시작합니다.')		//메소드 정의
}

• 일반적인 함수와 생김새가 비슷하지만, 생성자 함수의 특징은 아무것도 리턴하지 않는다는 점이다. 생성자 함수는 단순히 프로퍼티와 메소드를 정의한다.

나. class 선언을 통한 방법 ES6

class Car {
    constructor(name) {
    	this.name = name;		//프로퍼티(속성) 정의
    }
}

Car.prototype.drive = function(){
    console.log(this.name + '가 운전을 시작합니다.')		//메소드 정의
}

• 클래스를 선언하기 위해서는 클래스의 이름과 class이름을 사용해야 한다.
• constructor 메소드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드이다.
• constructor메소드는 클래스 내에 한 개만 존재해야한다.

다. 프로퍼티와 메소드 정의

• 생성자 함수나 class선언을 통해 클래스를 만들면서 그 안에 속성과 메소드를 함께 정의해도 무방하지만, 보통은 클래스내에 프로퍼티만 정의하고 메소드는 prototype을 이용해 정의한다.

2. 인스턴스(Instance) 만들기

let avante = new Car('avante');
avante.name; 	//'avante'
avante.drive();	//'avante가 운전을 시작합니다'

• new키워드를 이용해 객체 인스턴스를 만들 수 있다.
• 이제 avante 인스턴스는 클래스에 저장된 속성과 메소드를 모두 사용할 수 있다.

오늘 하루

1. TIL 작성은 했는데 객체지향프로그래밍 부분이 아직 완전히 이해가 된 상태는 아니다 ㅠㅠ 주말에 좀 더 파봐야지..
2. pre 코스의 절반이 끝났다. 이렇게 9번만 더하면 수료라는거~ 시간 빠르다.
3. 이번 주말은 좀 효율적으로 보내보기로