Javascript – 알아두면좋은 상식 과 용어

by Posted on
use strict(엄격모드) ≠ Sloppy mode(느슨한모드)

strict 는 엄격한 이란 뜻으로 ,  자바스크립트 코딩하는데 개발자에게  엄격함을강제한다.

“use strict” 또는 ‘use strict’ 로 선언하면 ,  선언한  이 후 부터  모두 적용받는데,
만약에 특정 함수내에서만 또는 ,  코드 일부 아래서만 적용하고싶다면 중간에 작성해도 선언 이후로 부터 효과 가 나타난다. (반드시 문장을 소문자로 작성해야함)
“USE STRICT” , “Use Strict”  , “Use strict” 오류는 없으나 작동은 안됨

<script language=”javascript”>

      a = 100;      // 오류 안남 ,
      ‘use strict’   // strict 선언, strict 선언 이후로  모든 코드가 적용됨
       b  = 100;    // 오류 발생 선언이 안되 발생  val1 is not defined

       let c;
       c = 100      //  정상처리 또는  var c , const c

</script>

<script language=”javascript”>

      a = 100;      // 오류 안남 ,

      function myFunction()
      {
            b = 100 ;  // 오류 안남 ,

            ‘use strict’  // 이후부터 엄격모드
             c = 100;  // not defined    
      }

</script>

 

hoisting (호이스팅)

– var 변수와 함수표현식에만 hoisting 이 일어난다.(O)
– let , const , 변수 할당등에는 hoisting 발생하지않음 (X)

일반적으로 , 프로그램에서 변수의 선언은 당연히 변수가 사용되기전에 선행되어야한다.
너무 당연한 이야기이다.

void main()  // 정상적인 순서
{
      int a , b , c;
      a = 1;
      b = 2;
c = a + b;
console.write(c);
}

void main()   // 비정상적인
{
a = 1;  // 오류발생
b = 2;
c = a +  b;
int a , b ,c ;
console.write(c);
}

문제는 javascript 에서는 저 비정상적인 코드가 정상적으로  실행이 된다.
javascript 소스로 보자.

<script language=”javascript”>
      a = 1;
      b = 2;
      c = a + b;
      var a , b, c;   // hoisting 대상
      console.log(c)   // c 는,, 아주 정상적으로 3 을 출력함
</script>

더 신기한건  var a , b, c; 부분에서,
a,b,c 가 초기화 될꺼같은데 초기화 되지않음 —

바로 hoisting(호이스팅) 이 발생해서 인데 실제 js parser 가  스크립트내에
존재하는 선언(var 와 함수표현식)를 최상단 으로 끌어올려,
선언한 효과를 내도록한다.

아래는 위의 소스가 hoisting(호이스팅)이 발생한 후 소스이다.

<script language=”javascript”>
     var a , b, c;      // hoisting 이 발생하여 소스상단으로 이동한 상태
     a = 1;
     b = 2;
     c = a + b;
     console.log(c)   // c 는,, 아주 정상적으로 3 을 출력함
</script>

<script language=”javascript”>
      var a;
      a = 10;
b = 20;
let c;
c = a + b;
      var b;
</script>

<script language=”javascript”>
var a;  // hoising 발생
 var b;
a = 10;
b = 20;
let c;   // let 은 hoisting 이 발생하지않음(X)
c = a + b;
</script>

 

javascript 함수  표현방법

일반변수 / 함수 표현식 / 화살표 함수

  // 함수(Function) : 일반적인 함수 선언문
function myfunction() {

  } 

  // 함수표현식(Function Expressions)
  var myfunction = function() {

   }

  // 화살표 함수(Arrow Function)
 var myFunction = () => {

 ~~ 여러줄 처리일 경우 return 이 필요하면 구현해줘야함

  }

// 화살표 함수(Arrow Function) – 처리가 한 줄 일경우 자동 리턴포함★
var myFunction = (a,b) => a+b;  // return a+b; 와 같음

 // 화살표 함수 – 매개변수 있는
 var myFunction = (p) => {
          console.log(p)
  }

 // First  Class Function
 // 함수를 변수처럼 다루는것으로, 변수에 함수를 할당 할 수 있고,
 // 변수에 함수를 담아  파라미터로 전달해서 함수로 실행 할 수 있는 기능
// 변수를 리턴하듯 함수자체를 리턴도 가능,,,,

var   fn = function() {   });  // 변수에 함수를 할당함

function testFn(f)  // f 변수가 함수를 받음
{
             f();    // 파리미터로 넘어온 변수(함수)를 함수로써 실행함
}

testFn(function() { console.log(“param funtion”); }); // 함수를 파리미터로 넘김

 

var , let , const

변수 선언 방식 이 차이

ㆍvar 
// 변수의 선언위치에 관계없이 변수가 사용이 가능해짐( hoisting 일어남)
// var a; 로 선언한 변수를 var a;로 또 선언해도 아무 문제가없음ㆍlet 
// 반드시 선언 후 사용해야함 ,var 처럼 사용한후 선언하면 오류남(hoisting 안함)
// 선언한 변수를 또 선언 불가 (너무 당연함)ㆍconst 
// 선언 후 변경이 불가능 한 상수가됨(선언시 반드시 초기화 해야됨)
const 는 다른 언어와 똑같고 ,  Typeless 한 javascript 에서는  데이터 타입에 따른 형식은 따로없다.Vanilla Javascript 사용시 ‘use strict’ 선언화 함께 let 이용을 대부분 추천함*

const myArray = [ 1, 2 ,3 , 4, 5 ];
myArray = [ 6,7,8,9,10] // const  선언과 함께 초기화 했기때문에 재할당은 오류남myArray[0] = 6;   // 그런데. 이렇게 index 로 접근하면,, 수정이 가능함… —
myArray[1] = 7;
myArray[2] = 8;
myArray[3] = 9;
myArray[4] = 10;

 

empty,  null, undefined, not defined , infinity,NaN

특수한 변수가 값.

let a = “” ;             // empty
let a = null            // null
let a;                     // undefined (초기화가 되어있지않음)
console.log(a)     //  not defined(선언 없이  변수를 사용할경우 선언되지 않음)
console.log(1/0)  // infinity (무한대)
“abc” / 2              // NaN (숫자가 아닌 문자열을 숫자로 다룰때)
Default and Rest parameters

 

// Default parameters
// ECMA6 함수  필수파라미터가 아닌경우 함수정의에서 기본값을 설정해줌

function myFuntion( name , address = ” ” , age = 0) { }
myFunction(“test”);
// Rest parameters
// ECMA6  함수의 파라미터가 배열형식경우  딱히 배열도 아니고,
function myFuntion( …names)  {  } // ‘.’ 세개와 변수명으로 파리미터를 설정함
myFunction(“test” , “test1” , “tes2” , “tes3”);

// 실제 [“test”,”test1″,”test2″,”test3″] 배열로 넘기면 안되고
// 그냥 파라미터를 여러개 넘기는데 받는 쪽에서 배열로 받음
// 다른언어의 string[] args 와 그냥 같은 느낌
Callback Function

사실 “비동기 함수 처리시” 처리가 끝나면,  부르는 함수의 의미로만 “Callback(콜백)” 이란 용어를 사용한다고 생각했었는데, “★비동기 처리던 , 동기 처리던” 함수처리가  끝나면 호출 되는 함수모두를 callback 함수로 라고한다.

let sVal;
sVal = 100;

function  fnSuccess() {   }
function fnFail() { };function  process( sVal , f1, f2)  // callback함수 전달  –  first-class function
{      if (sVal > 100 )
             f1();  //  fnSuccess 콜백함수
      else
             f2();  // fnFail 콜백함수
} 

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다