Achievement Goals

Scope: 변수 접근 규칙

• JavaScript의 Scope의 의미와 적용 범위를 이해할 수 있다

//범위를 고려해야 되는 이유? 코드가 작동하는 데에 있어서 작동의 분별을 파악할 수 있다.
let name = 'daniel';
function scopeStudy() {
  let name = 'sungwoo';
  console.log(name); //sungwoo
}
console.log(name); //daniel
scopeStudy();
console.log(name); //daniel

//////////////////////////////////////////

let name = 'daniel';
function scopeStudy() {
  name = 'sungwoo';
  console.log(name); //sungwoo
}
console.log(name); //daniel
scopeStudy();
console.log(name); //sungwoo

//안에서 밖을 참조 O / 밖에서 안을 참조 X
//로컬 스코프 내에서 찾는 게 없다면 전역으로
//무조건 가까운 곳부터 시작
  

• JavaScript의 Scope 주요 규칙을 이해할 수 있다
  • 중첩 규칙

//함수 안의 함수 가능
function a() {
  let b = 'banana';
  return function() {
    return b;
  }
}
a()(); // banana;

• block level vs. function level

//blcok는 중괄호(예쁜 괄호)를 기준으로 스코프가 돌고
for(let i=0; i<5; i++) {
  console.log(i);
}
console.log(i); //레퍼런스 에러

//function은 함수를 기준으로 스코프가 돈다
//지금은 var가 전역변수로 취급되기 때문에 for문 밖을 나와도 콘솔에 찍힘
for(var i=0; i<5; i++) {
  console.log(i);
}
console.log(i); //5

//블록과 펑션을 구분하는 건 let과 var임

• let, const, var의 차이

let은 block level, 재선언 안 됨, 재할당 됨
const는 block level, 재선언 안 됨, 재할당 안 됨
var는 function level, 재선언 됨, 재할당 됨

태초에 var밖에 없었으나 불변성 유지를 원했던 프로그래머들은.. let과 const를 만들었음. 이제 var는 사용하지 않음..

• 전역 변수와 전역 객체의 의미

전역 객체: window, global과 같은 최상위 객체. 사실 어떠한 함수나 변수든 앞에 window가 붙여져 있는데, 보기 쉽게 생략해 놓은 것임.
전역 변수: 전역 객체에 선언한 변수와 var. var 키워드로 선언한 변수는 전역 객체에 이어진다. let과 const는 아님.

Closure

• Closure의 의미와 Closure가 가지는 Scope Chain을 이해할 수 있다

//함수 안의 함수. 외부 함수의 변수에 접근할 수 있는 내부 함수
//함수 안의 함수는 로컬, 부모 함수, 전역 객체까지 전부 변수를 받을 수 있음
function a() {
  let b = c;
  return function d() {
    return b;
  }
}
a()(); //c
b; //레퍼런스 에러

• Closure의 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

//커링
function curring(tag) {
  let startD = `<${tag}>`;
  let endD = `</${tag}>`;
  return function closure(text) {
    return `${startD}${text}${endD}`
  }
}
let divMaker = curring('div');
divMaker('안녕하세요');
//"<div>안녕하세요</div>"
let spanMaker = curring('span');
spanMaker('안녕하세요');
//"<span>안녕하세요</span>"

//서로에게 절대 영향을 주지 않음

//함수 안의 함수를 프라이빗하게 저장할 수 있음
function a() {
  let priviteNum = 0
  return {
    p: function() { priviteNum++ },
    m: function() { priviteNum-- },
    t: function() { return priviteNum }
  }
}

let b = a();
b.p();
b.p();
b.p();
b.t() // 3

매개변수

• Parameter의 갯수가 유동적인 함수를 만들 수 있다

//rest파라미터
function param(a, b, ...arg) {
return `${a}와 ${b}와 ${arg}`
}
//arguments
function arg() {
  return `${a}와 ${b}와 ${arguments[0]}`
}
//arg 키워드는 객체이기 때문에 배열로 사용할 수 X
//그냥 사용하게 되면.. [object Arguments]라고 뜸

• ES6에서 사용하는 Rest parameter 및 ES5의 방법인 8 arguments 키워드를 이용할 수 있다
• Default parameter를 사용할 수 있다

function defaultParam(start, end = '시칠리아') {
  return `시작과 끝은 ${start}부터 ${end}입니다.`
}
//만약 여기에 매개변수 한 개만 쓰게 된다면 default param이 발동. 두 개 쓰면 쓰여진 대로

function defaultParam2(start = '서울', end) {
  return `시작과 끝은 ${start}부터 ${end}입니다.`
}
defaultParam2(undefined, '시칠리아');
//default param이 중간에 들어가게 되면 언디파인드 선언으로 ㅇㅋ

객체 지향 JavaScript

• 객체 지향 프로그래밍의 기본적인 컨셉을 이해할 수 있다

  청사진. 현실의 있는 것을 똑같이 복사하려고 할 때 사용됨.

  • class, instance 등의 용어를 이해할 수 있다

    class: 청사진
    instance: 청사진을 본따 만든 것들
    constructer: 본딸 때 실행되는 생성자 함수
    prototype: 메서드를 정의할 수 있음. 뼈대에 붙인다..고 생각하면 편하다

  • new키워드를 사용해 instance를 생성할 수 있다

function Wannaone (name, age, part) {
  this.name = name;
  this.age = age;
  this.part = part;
}
Wannaone.prototype.behavior = function() {
  return `${this.name}이 ${this.part}을(를) 한다!`
}

let jihun = new Wannaone('jihun', 21, '랩');
jihun.behavior();

• ES6 class 키워드를 사용할 수 있다

class Wannaone {
  constructor(name, age, part) {
    this.name = name;
    this.age = age;
    this.part = part;
  }
  behavior() {
    return `${this.name}이 ${this.part}을(를) 한다!`
  }
}
let jihun = new Wannaone('jihun', 21, '랩');
jihun.behavior();

• prototype을 이용해 클래스의 원형을 만드는 방법을 이해할 수 있다