기본적으로 알아야할 javascript 개념

최근에 자바스크립트를 공부하고 있습니다. 
생활코딩의 https://opentutorials.org/course/743 자바스크립트 강좌를 보며, 몇 가지 기본적인 내용들을 정리하였습니다.

간단한 예제소스와 함께 자바스크립트 기본 개념을 살펴보도록 하겠습니다.

==와 ===의 차이

• ==는 데이터 형과 관계없이 값이 같다면 true를 return 합니다.

• ===는 데이터 형도 같아야 true를 return 합니다. 

• 조금 더 명확한 ===를 사용하는 것을 추천합니다.

ex)
1 == '1' (true) / 1 === '1' (false)
null == undefined (true) / null === undefined (false)

참조, https://dorey.github.io/JavaScript-Equality-Table/

변수의 유효범위

• function의 중괄호 안에서 변수를 선언할때, 지역변수로 설정이 된다.

• if나 for문의 중괄호 안에서 변수를 선언할때, 지역변수로 설정이 안된다. (전역변수로 설정)
  
  
  

전역변수를 잘 사용하는 방법

• 전역변수를 사용함으로써 변수의 이름이 충돌하는 상황이 발생할 수 있습니다.

• 따라서, 전역변수를 잘 사용해야 합니다.

ex) 하나의 객체에 묶어서 전역변수를 최소화 합니다.

    var myApp = {};
    myApp.calculator = { left: null, right: null };
    myApp.coordinate = { left: null, right: null };

ex2) 익명함수를 사용하여 지역변수로 만들어서 사용합니다.
    (function() {
        var myApp = {};
        myApp.calculator = { left: null, right: null };
        myApp.coordinate = { left: null, right: null };
    })();

정적 유효범위

• 정의되는 시점의 전역변수의 값을 바로보는 것을 정적 유효범위라고 합니다.

• 사용되는 대상에 따라서 가지고 있는 변수에 맞게 값이 달라지는 것을 동적유효범위라고 합니다.

ex) 정적유효범위 예제
    var i = 5;
    function a() {
        var i = 10;
        b();
    }
    function b() {
        console.log(i);
    }
    a(); // 5 출력

내장 메소드

• 객체가 기본적으로 가지고 있는 메소드를 의미합니다.

• Array 객체에 내장되어있는 sort() 메소드 사용 예제.

ex) 배열 객체에 내장되어있는 메소드인 sort()의 인자값으로 함수를 전달하여, 정렬 방식을 조작할 수 있습니다.

function sortFunction() {
  return a-b; //오름차순 정렬 (내림차순은 b-a)
}
var numbers = [1, 3, 20, 13, 34];
console.log(number.sort(sortFunction));

클로저

• 외부함수가 종료된 이후에도 내부함수를 통해서 지역변수에 접근이 가능한 기술을 말합니다.
  

ex)
var temp = "global hello";

function outer() {

    var temp = "outer hello";

    function inner() {

        console.log(temp);  

    }

    return inner;

}

var k = outer();

k(); // outer hello

ex2) 함수(객체)의 선언 위치에 따라서 동적/정적 유효범위가 달라집니다.

var temp = "global hello";

function outer() {

var temp = "outer hello";

    return inner;

}

function inner() {

    console.log(temp);

}

var k = outer();

k(); // global hello

private variable 사용 방법과 이유

• 작업이 매우 길어지고 많은 사람들이 함께 작업할때 변경되지 않아야할 값이 변경이 일어나는 것을 막을 수 있습니다.

• 또한, 값의 변경이 조심스럽게 일어나야하는 경우 안정적으로 값을 변경 시킬 수 있습니다.
  

ex)
function factory_movie(title) {
  return {
    get_title: function() {
      return title;
    },
    set_title: function(_title) {
      // TODO: type check
      title = _title;
    }
  }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');

alert(ghost.get_title());
alert(matrix.get_title());

ghost.set_title('공각기동대');
alert(ghost.get_title());
alert(matrix.get_title());

클로저 응용과 예제

• 동일한 context를 참조하기 때문에 i 값은 모두 5로 출력

• 각각 다른 context를 만들어주기 위해서 클로저를 사용합니다.

ex) 클로저 사용 전

var arr = [];
for (var i = 0; i < 5; i ++) {
  arr[i] = function() {
    return i;
  }
}

for(var index in arr) {
  console.log(arr[index]()); // 5 5 5 5 5 
}

ex) 클로저 사용 후

var arr = [];
for (var i = 0; i < 5; i++) {
  arr[i] = (function(id) {
    return function() {
      return id;  
    }
  })(i);
}

for ( var index in arr) {
  console.log(arr[index]()); // 0 1 2 3 4 
}

ex) for문 안에서 var 대신 let을 사용하게 된다면?
- 클로저를 사용하지 않아도 됩니다. let은 기본적으로 블록스코프 변수(지역변수)이기 때문입니다.

var arr = [];
for (let i = 0; i < 5; i ++) {
  arr[i] = function() {
    return i;
  }
}

for(var index in arr) {
  console.log(arr[index]()); // 0 1 2 3 4
}

자바스크립트에서 매개변수(parameter) 개수 체크 방법

• 자바스크립트는 굉장히 유연해서 함수에서 정의한 매개변수 개수와 실제로 함수를 call할때 전달한 매개변수의 개수가 달라도 오류를 발생시키지 않는다. 

• 하지만, 반드시 입력 매개변수 개수와 함수가 정의한 매개변수의 개수가 같아야할 경우가 있습니다. 이때 함수의 length와 arguments의 length를 사용하여 체크할 수 있습니다.

ex) 

function one(arg1) {
  console.log('one.length: ', one.length); // 1
  console.log('arguments.length: ', arguments.length); //2
}
one('val1', 'val2');

function에 내장 메소드인 apply()란?

ex)
o1 = { var1: 1, var2: 2, var3: 3 };
o2 = { var1: 10, var2: 50, var3: 100, var4: 25 };
function sum() {  //object의 속성 값을 더하는 함수
  var _sum = 0;
  for(name in this) {
    _sum += this[name];
  }
  return _sum;
}
alert(sum.apply(o1));
alert(sum.apply(o2));

객체 생성 방법

• 객체는 다양한 방법으로 생성할 수 있습니다.

• 또한, 자바스크립트에서 함수는 객체이다.

ex) 객체 리터럴
var obj = {
  name: '리두',
  age: '29'
  introduce: function() {
    console.log('my name is '+this.name);
  }
}

ex) new 키워드 사용
function Person() {
  //person
}
var obj = new  Person();

new 키워드를 사용하여 객체를 생성하면 재사용성을 높일 수 있다.

ex)
function Person(name) {
  this.name = name,
  this.introduce = function() {
    console.log('my name is ' + this.name);
  }
}

var person1 = new Person('리두');
var person2 = new Person('홍길동');

window란?

• 모든 변수와 함수는 window라는 전역객체의 프로퍼티이다.

• nodejs의 경우는 window가 아니라 global이 존재합니다.

ex)
function test() {
  console.log('test');
} 
test(); // test
window.test(); // test

this의 사용

• this는 현재 context(맥락)를 말한다. 즉, this가 불린 영역의 전역객체를 의미합니다.

ex)
function test() {
  console.log(this); //window
}
ex)
var obj = {
  func: function() {
    if( o === this ) {
      console.log("o === this"); // o === this
    }
  }
}

Prototype

• 객체 안에 프로퍼티를 의미합니다.

• 상속을 할때 사용합니다.

ex)
function test() { }
console.log(test.prototype); // {}
test.prototype.name="dylee";
console.log(test.prototype); // {name: "dylee"};

상속을 어떻게 사용하는가?

ex)
function Person(name) {
  this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function() {
  return 'My name is ' + this.name;
}

function Programmer(name) {
  this.name = name;
}
Programmer.prototype = new Person(); // Person 객체 상속
var p1 = new Programmer('egoing');
console.log(p1.introduce());

표준 내장 객체

• Standard Built-in Object, 자바스크립트가 우리에게 기본적으로 제공하는 내장 객체를 의미합니다. 

• Object, Function, Array, String, Boolean, Number, Math, Date, RegExp가 있습니다.
  
  

프로토타입을 활용한 배열의 확장

• 배열에서 랜덤하게 하나의 아이템을 뽑는 메소드 만들기

ex) 기존 
var arr = new Array('1','2','3','4','5');
function getRandomValueFromArray(array) {
  var index = Math.floor(array.length * Math.random());
  return array[index];
}
console.log( getRandomValueFromArray(arr) );

ex) 확장
Array.prototype.random = function() {
  var index = Math.floor(this.length * Math.random());
  return this[index];
}
console.log( arr.random() );