JAVASCRIPT 초급 강의 1

JAVASCRIPT 초급 강의 1

모든 예제는 브라우저 개발자 도구에 복붙하셔서 바로 확인하실 수 있습니다.

읽고 지나가지 마시고 예제들을 직접 확인해보세요

1.자바 스크립트 데이터 유형

객체유형

1. Number

2. String

3. Boolean

4. Object

5. Array

6. Function

객체가 아닌 유형

1. null

2. undefined

 2. 표기법

 var prop = ' 속성이름' ;

 객체[prop]

 3. Console 스타일

 console.log('%c this is console object', 'color : red; font-weight : bold; font-size:200px');

 4. 메모리 공간 변수에 데이터를 대입할 때

 1. pass-to-value (복사)

 예시) 원시데이터 : Number, String, Boolean, null, undefined

 var current_year = 2016 // Number Data Type(숫자 리터럴)

 var c_year = current_year;

 // 변수에 담긴 값을 변화(교체)

 current_year = 2017;

 console.log(c_year); // 2016?2017?

 2. pass-to-reference(참조)

 예시) 복합 데이터(자료형) Object, Array, Function, ... 

 var iropke = {};

 iropke.location = '역삼';

 iropke.members = 38;

console.log('iropke', iropke);

var clone_iropke = iropke // {location :'역삼' , members :38}

clone_iropke.type ='Agency';

console.log('clone_iropke', clone_iropke);

console.log('iropke:',iropke);

clone_iropke = iropke = null;

console.log('iropke:', iropke); // null

console.log('clone_iropke:',clone_iropke); // null? < 참조된 객체가 출력된다> 

---> 즉 원시데이터 값이 아닌 데이터들은 값에 의한 복사가 아닌 객체 주소를 참조한다고 보면된다

     참조된 주소에 데이터를 주고받기 때문에, 같은 주소를 참조하는 변수는 같은 결과를 보인다

     casacade적 속성은 값을 복사하는 경우에 의미가 있겠지 

     stack heap 메모리 와 비슷한 듯 하다

// 그 자체의 값(리터럴)의 경우 변수에 할당 시에 값이 복사된다.

3. Application 초기화 과정

  초기 변수 설정

 var parent;

 

 var grand_parent;

console.log(parent, grand_parent); // undefined

5. 유형(Type) 변경하기 

 1.  Number -> String

 1.1 '{number}'

 1.2 {number} + ''

 1.3 String( {number})

 1.4 {number}.toString()

 2. String {숫자형 문자} --> Number

 2.1 -0,*1, /1 // +는 안된다 그냥 문자추가가 되어버림

 2.2 숫자형 문자 앞에 +를 붙인 경우

 2.3 Number({숫자형 문자})

 2.4 parserInt(data, 10), parseFloat(data,10)

 3. Boolean 형 변환 {data} --> Boolean

 3.1 Boolean({data})

 3.2 !!{data}

 4. 자바스크립트의 모든 빌트인(네이티브) 객체의 리터럴 값 //? 무슨말인지?

var num, str, boo, fuc, arr, obj;

// ※ 특별한 경우가 아니라면 new 생성자() 가 아닌 리터럴을 사용하는 것이 권장됩니다.

num = 180;          // new Number()

str = 'how';        // new String()

boo = true;         // new Boolean()

fuc = function(){}; // new Function()

arr = [];           // new Array()

 

obj = {};           // new Object()

 5. 연관배열 -- 자바스크립트 배열은 실제 배열이 아니라, 객체이며 배열처럼 보이게 만든 유사품과 같다.

var cssList = [];

cssList[0] = 'font-size';

cssList[1] = 'flex';

cssList['maker'] = 'yamoo9';

console.log(cssList);

console.log(cssList);

//자바스크립트에서 객체의 type을 정확히 return해주는 함수

function type(data){

    return Object.prototype.toString.call(data).slice(8,-1).toLowerCase();

}

 --> Object 함수의 toString 함수를 call로 빌려써서 data를 Stringify 하고 해당 String을 적절하게 slice(subStirng)한후 소문자화 하면 

      type을 제대로 체크할 수 없는 자바스크립트에서 정확하게 type체크가 가능해진다. 약간 꼼수?