MDN- re-introduction JavaScript

 

React 공부 시작하려는데, React페이지에서 JavasScript를 다시 보고 올 수 있는 링크를 주는 친절함을 베풀었다.

타고 넘어가 보니 한 페이지에 보기쉽게 JavaScript 정리가 되어있어 한번 쭈욱~ 훑어보고 왔다ㅎㅎ 

 

developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

A re-introduction to JavaScript (JS tutorial)

 

--------------------------------------------
표준 내장객체 및 메소드 

Number
String
Boolean
Symbol (new in ES2015)
Object
ㄴ Function
ㄴ Array
ㄴ Date
ㄴ RegExp
null
undefined 

--------------------------------------------

javascript에서 var와 let/const와의 차이점 

일반적으로 자바스크립트에서 var를 이용해서 변수 선언시 블록 범위에 제한이 없지만, 
ECMAscript2015 부터 let과 const 선언을 사용하면 블록 범위 변수를 만들 수 있음. 

--------------------------------------------
제공하는 for 사용법 

for (var i = 0; i < 5; i++) {
  // Will execute 5 times
}

for (let value of array) {
  // do something with value
}

for (let property in object) {
  // do something with object property
}

--------------------------------------------

&& 및 || 연산자는 단락 논리를 사용하므로 두 번째 피연산자를 실행할지 여부는 첫 번째 피연산자에 따라 다릅니다. 
이는 속성에 액세스하기 전에 null 개체를 확인하는 데 유용합니다.

var name = o && o.getName();

--------------------------------------------
switch 문은 숫자 또는 문자열을 기반으로 여러 분기에 사용할 수 있습니다.

--------------------------------------------
Object 
JavaScript 객체는 이름-값 쌍의 단순한 모음으로 생각할 수 있습니다. 따라서 다음과 유사합니다.

Dictionaries in Python.
Hashes in Perl and Ruby.
Hash tables in C and C++.
HashMaps in Java.
Associative arrays in PHP.

객체 생성 방법 두가지.
var obj = new object();
var obj = {}; // *****별이 다섯개 ~

두 방법은 의미상 동일함. 두 번쨰는 객체 리터럴 구문이라고 하며 더 편리하고. JSON 형식의 핵심이며 항상 선호되어야 함. 

접근할때는 .을 이용하여 값에 접근. 

--------------------------------------------

Array 
Array는 특별한 유형의 객체. 객체와 달리 []로 선언. 

var a = new Array();
a[0] = 'dog';
a[1] = 'cat';
a[2] = 'hen';
a.length; // 3

혹은 
var a = ['dog', 'cat', 'hen'];
a.length; // 3

var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101

존재하지 않는 인덱스에 접근시 undefined를 반환. 
type of a[90]; // undefined


Array 요소에 접근시, 

for (var i = 0; i < a.length; i++) {
  // Do something with a[i]
}

아래 표기법은 ECMA2015 부터 가능해짐. 
for (const currentValue of a) {
  // Do something with currentValue
}

for..in 루프를 사용하면 배열을 반복할 수도 있지만 배열 요소가 아니라 배열 인덱스를 반복한다.

 

제공하는 메소드 

a.pop() // 마지막 요소를 Remove and returns.
a.push(item) // 마지막에 요소를 추가.
a.shift() // 첫번째 요소를 Remove and returns.
a.unshift(item) // 배열의 시작부분에 요소를 추가.
a.reverse()  // Reverses the arrays.
a.sort([cmpfn]) // 선택적 비교를 이용한 정렬
이외에 slice, concat, 등


----------------------------------------

Funciton

function makePerson(first, last) {
  return {
    first: first,
    last: last,
    fullName: function() {
      return this.first + ' ' + this.last;
    },
    fullNameReversed: function() {
      return this.last + ', ' + this.first;
    }
  };
}

var s = makePerson('Simon', 'Willison');
s.fullName(); // "Simon Willison"
s.fullNameReversed(); // "Willison, Simon"

----------------------------------------

prototype  

Java 가 class를 이용해 객체를 생성한다면, JavaScript는 prototype을 이용해 객체를 생성한다.

prototype을 이용하면 runtime에 기존 객체에 메서드를 추가할 수 있음.

-----------------------------------------

prototype을 이용한 문자열 거꾸로 출력.

 

var s = 'Simon';
s.reversed(); // TypeError on line 1: s.reversed is not a function

String.prototype.reversed = function() {
  var r = '';
  for (var i = this.length - 1; i >= 0; i--) {
    r += this[i];
  }
  return r;
};

s.reversed(); // nomiS

-----------------------------------------

클로저 ..? 너는 다음 기회에