Etc/Frontend

07.13 공부일지 - Javascript 2주차

z.zzz 2021. 7. 14. 18:39

Variable.js

1. use strict
    - use strict를 사용하는 이유
      : JavaScript - flexible => 비상식적인 코드 사용 가능
           ex) 선언되지 않은 변수에 값 할당

 

2. 변수
    var, let, const

var : 선언과 초기화가 동시에 진행
   1) 변수의 중복 선언이 허용
   2) 변수 hoisting
      : 변수를 어디에 선언했던 상관없이 변수 선언을 가장 위로 끌어 올리는 것(변수 할당 전에 값을 찍어보면 undefined 나옴)
   3) block level scope 무시

var의 단점을 보완하기 위해 등장한 변수 선언 방식 : let, const

let : mutable data type(값을 변경할 수 있음)

const : immutable data type(값을 변경할 수 없음)

 

3. Data Types
   1) primitive type : number, string, boolean, undefined, null, symbol
   2) object/reference type : 6가지 제외한 나머지 data type
        ex) object, function, array 등

   ✔ number
      JavaScript는 변수를 선언할 때 data type을 따로 명시하지 않아도 됨
      // special numeric values : Infinity, -Infinity, NaN(Not a Number), bigint(길이 제약X)

   ✔ string
      char 타입 없음

      cf) template literal : ``(백틱) 이용
           1) ``안에 있는 문자열 그대로 출력
           2) 표현식 삽입  예) template = `1 + 2 = ${1 + 2}`;   //"1 + 2 = 3"

   ✔ undefined : 값이 할당되지 않은 것

   ✔ symbol : 고유의 key 값을 부여 
       Symbol() -> symbol 값은 외부로 노출되지 않음
           예) const symbol1 = Symbol('id');
                console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);   //value: id, type: symbol

   ✔ object
        예) const itsMe = { name : 'Jay', age : 100 };
              console.log(itsMe);      //{name: "Jay", age: 100}
             //itsMe = { name : 'JavaScript', age : 26 };
             const는 재할당이 금지 = 객체에 대한 '참조'를 변경하지 못함. 하지만 이 때 객체의 'property'는 보호X   
                                                       => 할당된 객체의 내용(프로퍼티의 추가,삭제,값의 변경)은 변경할 수 있다

              itsMe.age = 200;

              console.log(itsMe);       //{name: "Jay", age: 200}

5. Dynamic Typing
   C, Java     -> 정적 타입 언어
   JavaScript -> 동적 타입 언어
                         =>타입이 바뀔 수 있음
   예) foo = 3;
        console.log(typeof foo);    //number
        foo = { name : 'foo' };
        console.log(typeof foo);    //object

 


Operator.js

연산자

     **= : 지수연산
      예) 3**=5 (3의 5승)

     == : Loose equality -> 값이 같으면 같다
     ===Strict equality -> 값과 type이 모두 같으면 같다

console.log('' === false);        // false(string/bool)
console.log(null === undefined);  // false(null, undefined)

 

for문

for ... of 반복문

    for of 문 사용 조건 : 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야함

forEach 반복문

    forEach문 사용 조건 : 오직 Array 객체에서만 사용가능

    ✔ for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행

 


Function.js

① 함수 리터럴

   리터럴이란? 선언함과 동시에 값 또는 코드를 지정해주는 것

//변수에 함수 리터럴을 할당
var f = function add(x, y) {
   return x + y;
}

 

② 화살표 함수

     function 키워드 대신 화살표 =>를 이용한 좀 더 간략한 함수 선언 방식

const add = (x, y) => x + y;
console.log(add(2, 5));   //7

 

③ Rest 파라미터

     Rest 파라미터 :  매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수. 함수에 전달된 인수들의 목록을 배열로 전달받음

function foo(...rest) {
  console.log(Array.isArray(rest));         // true
  console.log(rest);                                       // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);          //인수 목록이 배열로 전달됨

 

④ Default 파라미터

     parameter에 default 값을 지정해서 인자가 전달되지 않을 경우 default 값으로 대체

function multiply(a, b = 1) {
  return a * b;
}

 

⑤ 함수 표현식

const print = function () {   // anonymous function
        console.log('print');
}; print();
const printAgain = print;
printAgain();

 

⑥ 콜백 함수

     인자로 전달되어 상황에 맞게 호출되는 함수

addsub = function(a, b, callback){
        callback(a+b, a-b);      //callback의 변수로 각 값을 넣어서 보냄
}

addsub(8, 2, function(result1, result2){     //function은 받은 결과값을 출력
        console.log(result1);
        console.log(result2);
}

 

 

⑦ IIFE : Immediately Invoked Function Expression(즉시실행함수)

     선언과 동시에 호출

     (함수 선언)();

(function foo() {
     alert('foo);
})();

'Etc > Frontend' 카테고리의 다른 글

[JavaScript] 콜백 함수(callback function)란?  (0) 2023.03.21
내비게이션 바에서 링크를 클릭했을 때 클릭된 내용을 본문에 나타내기  (0) 2021.08.11
07.13  (0) 2021.07.14
2021.07.11  (0) 2021.07.11
2021.07.07  (0) 2021.07.07