[JavaScript] - ICE Breaking(1)

ICE Breaking

최근 NodeJs 강의를 듣게 되었으며, 약 5년전에 잠시 해보았던 JavaScript에 대하여 다시 한번 돌아보는 시간을 가지게 되었다. 약 5년전 Smart TV에 구동되는 Web Application 개발을 하면서 JavaScript에 대하여 공부를 했었고 알고 있다고 생각 했었으나, 다시 한번 강의를 들어보니 나에게 JavaScript는 생소한 언어가 되어 있었다. 긴 시간을 거슬러 다시 한번 되돌아보자는 마음으로 해당 언어에 대하여 정리를 해보고자 한다.

(기본적인 C or Java 언어의 문법을 알고 있다는 가정하에 정리)

Syntex

Naming Convention

- 변수, 함수 : 소문자, 두 번째 단어부터 첫 글자 대문자.(카멜 표기법(CamelCase)을 따른다.)

- 생성자 함수 : 각 단어의 첫 글자 대문자.

Variable(변수) 선언

- 선언부에 Data Type을 기재 하지 않는다.

- 'var' Key word로 변수 선언.

- 선언문이 위치한 영역에 따라 전역/지역 변수 결정.

- 'var'을 사용하지 않을경우 전역(global) 변수로 선언.

- 'var' 선언했을 경우 delete 문으로 삭제 불가, 생략 했을 경우는 삭제 가능.

global object(전역객체)

- JavaScript가 실행되기 위해 반드시 필요.

- 기본 API를 제공하는 수단.

- Browser에서는 window 변수에 할당 되어짐.

- 모든 global(전역) 변수는 global 객체의 하위 property로 저장.

* global 변수의 사용을 권장하지 않는다.(관리 차원)

function(함수) 선언

- 선언부에 Return Type을 기재하지 않는다.

- 'function' key word로 함수 선언

- 함수 객체를 변수에 할당(표현식)

function f() {     console.log('hello f'); } f(); //함수 호출 var f2 = function() {    console.log('hello f2'); } f2();

Hosting : 모든 선언문은 실행영역 가장 위로 끌어 올려진다. 

따라서 변수 scope 및 function 선언 위치에 따른 참조 오류가 발생되지 않는다.

Data Type

• Undefined
  - Data Type이 정해지지 않은 타입.(assign 될 때 type이 정해진다.)
• Null
  - 아무것도 참조하지 않은 값(null)
• Number
  - 정수 : -2^53 ~ 2^53
  - 실수 : 64bit floating point(IEEE 754)
  - NaN : 숫자가 아님. (Not a Number)
• String
  - "string" or 'string' (두 가지 혼용 사용 가능)
• Boolean
  - true | false
• Object
  - null 또한 Objecet Type

* 암묵적 형변환(JavaScript는 모든 연산에 있어 암묵적 Type Casting 작업이 수행된다.)

  모든 산술연산은 피연산자를 number로 형변환

var i = 10; var j = "10"; i + j;  // '1010; i - j;  // 0 i > j; // false i < j; // false i == j; // true 0 == false; // true undefined == null; // true " " == false;  // true j + 0;  // '100; j - 0;  // 10 i + '';  // 1 true - 0;  // 1 false - 0;  // 0 null - 0;  //0 nudefined - 0;  //NaN " " - 0;  // 0 true + " ";  // 'true' false + " ";  // 'false' null + " ";  // 'null' undefined + " ";  // 'undefined'

• Number 형으로 변환
  - 산술 연산자 : -, *, /
  - Number형 변환 실패 결과는 NaN
  

"10" - 0; //10  true - 0;  //1  false - 0; //0

• String 형으로 변환
  

10 + ""; // "10"

• Boolean 형으로 변환

!!null; //false

Object

• 기본 순수 객체
• 모든 Javascript 객체의 최상위 객체
• 생성방법
  - 생성자 함수 : new Object()
  - 객체 리터럴(JSON) : {}
• 존재 하지 않는 Property에 값을 할당 하면 새롭게 생성

var obj = new Object(); obj.name  = 'lee'; obj.age = 31; //or var obj = { name: 'lee', age = 31 }

• 주요 함수(모든 Javascript 객체 타입에게 호출 가능)
  
• hasOwnProperty('prop name') : 상속되지 않은 고유의 프로퍼티 인가?
• isPrototypeOf() : 이 객체가 다른 객체의 프로토 타입인가?
• propertyIsEnumberable('prop name') : for-in 문으로 출력할 수 있는가?
• toString() : 문자열로 반환
• toLocaleString() : 지역화 문자열로 반환
• valueOf() : 기본값 반환

Object Property 접근

• Dot (.) operator : obj.name;
• Square brackets( [] ) : obj['name']

var obj = new Object(); obj.name = 'lee';      // property 생성 obj['age'] = 27;        // property 생성 var name = obj.name;  // 'lee' // or var name = obj['name'] // 'lee'

값의 복사

• Premitive Type : 값에 의한 복사
• Object Type : 참조에 의한 복사

var a = 10; var b = a; b = 20; console.log('a:%d, b:%d', a, b); // a:10, b:20 var objA = new Object(); objA.value = 10; var objB = objA; objB.value = 20; console.log('a:%d, b:%d', objA.value, objB.value); // a:20, b:20

배열(Array)

• 생성자 : new Array();
• 표현식 : [1 ,2 ,3];
• .length (배열의 길이)

var myCars = new Array(); myCars[0] = "aaa"; myCars[1] = "bbb"; myCars[2] = "ccc"; //or var myCars = new Array("aaa", "bob", "ccc"); //or var myCars = ["aaa", "bbb", "ccc"];