[TIL] 2020. 05. 15. OOP_Scope_Closure

harrycod·2020년 5월 15일
1

TIL

목록 보기
12/110
post-thumbnail

오늘 배운 것

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. 따라서 위에서의 thisperson객체와 동일하다.

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. 이번 주말은 좀 효율적으로 보내보기로
profile
다 늦은 밤, 달밤의 개발일기

2개의 댓글

comment-user-thumbnail
2020년 5월 15일

처음 객체지향을 접했을 때 어렵지만 멋지다고 생각했어요. 사람, 동물, 사물 등의 행동 그리고 특징들을 프로그래밍적으로 표현한다는 게 말이죠. 프로그램이 실행되면 내가 짠 코드가 마치 살아있는 생물처럼 흘러간다니?? 제가 게임프로그래밍을 배워서 좀 더 쉽게 와닿아요 ㅋㅋ 캐릭터라는 객체(클래스)를 생성하고 방향키에 따라 위치를 얼마만큼 움직일지 메소드로 지정하면 그 캐릭터는 프로그래밍적으로는 위치 변수값이 변하고 그래픽적으로는 앞으로 몇 발자국 움직이는 게 보이거든요! 이번주도 수고 많으셨습니다:) 다음주도 화이팅해요 ㅎㅎ

1개의 답글