mirror18

다시말해서, undefined는 자료형이 결정되지 않은 변수이고,  

null은 자료형은 객체인데, 비어있는 변수이다.    

출처: https://enarastudent.tistory.com/entry/null과-undefined의-차이 [Coding Story]

$.fn

jQuery 객체에 사용자 정의 메소드를 추가하여 사용하는 방법

https://annotations.tistory.com/89

use strict

잠정적인 에러를 막아주는 ES5에서 새롭게 나온 directive입니다.

https://moon9342.github.io/javascript-use-strict

extend는 jquery에 기본으로 내장되어 있는 함수

$.extend( object1, object2 );

이런식으로 사용해서 두 개 이상이 객체를 합칠 수 있게 해주는 건데, 

object1 부분에 설정 안했을 경우 기본값으로 사용할 옵션값을 넣고 

object2 부분에 사용자가 정의할 옵션값을 넣어서 사용하려고 씀

근데 저 object2 부분에 option이라는 변수를 넣고,

그 변수 안에 우리가 설정할 사용자 정의 옵션 값들을 넣어서 사용하기 위해서

function () <- 이 괄호 안에 option이라는 변수를 먼저 선언

실행문에서 저 option 안에 들어갈 값들을 써서 실행하도록 구조를 짜서 사용했엇구요

//scroll
$.fn.setCheckShow = function (options) {
    var settings = $.extend({
        classPrefix: 'scroll'
    }, options);

    this.each(function () {
        var $selector = $(this)
        var scrollTop = 0;
        var offsetTop = 0;
        var windowHeight = 0;
        var elementHeight = 0;
        var startShow = 0;
        var endShow = 0;
        var classPrefix = settings.classPrefix;
        var isCounted = false;

        checkShow();
        $(window).on('scroll resize', function () {
            checkShow();
        });

        function checkShow() {
            scrollTop = $(document).scrollTop();
            offsetTop = $selector.offset().top;
            windowHeight = $(window).height();
            elementHeight = $selector.outerHeight();
            startShow = offsetTop - windowHeight;
            endShow = offsetTop + elementHeight;
            if (scrollTop > startShow) { //아래
                $selector.addClass(classPrefix + '-show');
            }
            if (scrollTop > endShow) { //위
                $selector.removeClass(classPrefix + '-show');
            }
        }
    }); // end of each
} // end of definition of method      

$('section').setCheckShow();

---

init()

init() 함수는 패키지가 로드될 때 가장 먼저 호출되는 함수로, 패키지의 초기화 로직이 필요할 때 선택적으로 사용하면 된다.

https://thebook.io/006806/ch02/05/04/

반복문 for while

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration

javascript - var let const 비교설명 (부제:const 객체, const 배열을 사용하는 이유)

1. var (변수 재선언 가능)

변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있습니다.

이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 

같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있습니다. 

이를 보완하기 위해 ES6부터 let, const가 추가되었습니다.

2. let (변수 재선언 불가능, 변수 재할당 가능)

let은 변수의 재할당은 가능하지만 var처럼 재 선언(let a = b)은 되지 않습니다. 

실제로 재선언 후 크롬 개발자도구에서 확인해보면, 

아래 이미지와 같은 에러 문구를 확인하실 수 있습니다.

3. const (변수 재선언 불가능, 변수 재할당 불가능)

const의 경우 constant(상수)의 의미 그대로 한 번만 선언하고 또 값을 재할당을 통해 바꿀 수도 없습니다. 

4. 결론

재할당이 필요없는 경우, const를 사용해 불필요한 변수의 재사용을 방지하고, 

재할당이 필요한 경우 let을 사용하는 것이 좋음.

출처: https://backstreet-programmer.tistory.com/76 [글쓰는 개발자]

암시적 형변환 : 자바스크립트 엔진이 자동으로 변환시키는 것

숫자 형 + 문자 형 = 문자형 / var a = 10+"10" // a는 문자 "1010"

불린 형 + 문자 형 = 문자형 / var a = true+"10" // a는 문자 "true10"

불린 형 + 숫자 형 = 숫자형 / var a = true+10 // a는 숫자 11 

true = 1 / false = 0

명시적 형변환 : 개발자가 수동으로 변환시키는 것

-webkit-print-color-adjust

배열은 0부터 시작 userName[0]

배열의 가장 친한 친구 반복문

*변수의 정의 : 데이터를 저장하는 공간

변수의 종류

전역변수 : 전역에서 사용하는 변수

지역변수 : 특정 영역에서만 사용하는 변수

매개변수(파라미터) : 함수 외부에서 함수 내부로 데이터를 전달

function func1(num1, num2){

var local1 = "지역변수";

}

---

Parameter(인자, 매개변수)와 Argument(인수)

책을 볼때마다 매개변수나, 인자값, 인수값 이야기를 하는데

명확히 개념을 잡기 위해서 기록한다.

Parameter(인자,매개변수) : 함수 선언에 사용하는 입력 변수

Argument(인수) : 함수 호출에 사용하는 입력 변수

function nextPage(index) { // 인자, 매개변수}

function leftClick() {

    var wrap = $('ul');

    wrap.find('li').on({

        click: function(){

            index = $(this).index();

            wrap.nextPage(index); // 인수

        }

    });

}

Posted in: javascript, jquery Tagged: Argument, Parameter, 매개변수, 인수, 인자

---

멤버변수(프로퍼티) : 클래스 내부에 만들어짐 객체에서 사용하는 정보를 담다.

복합연산자 : += -=

(증감연산자 : ++ --) + (변수) = 전위 연산자 || 후위 연산자

전위 연산자 || 후위 연산자의 차이점

전위는 자기 자신을 먼저 증가

후위는 다른 변수에 넘겨주고 증가

후위를 더 많이씀

*함수의 정의 : 알고리즘, 로직을 묶어서 재사용하는 일종의 포장방법

함수의 종류

1_자바스크립트 코어 함수(라이브러리) 예)alert() document.write()

2_사용자 정의 함수

*클래스의 정의 : 연관된 함수 묶는 방법

인스턴스 = 객체

인스턴스를 생성 후 접근 연산자를 이용

클래스 내부 변수 : 프로퍼티 || 멤버변수

클래스 내부 함수 : 메서드 || 멤버함수

document.write();

객체 접근연산자 함수();

변수이름 만들 때 주의사항

01_숫자로 시작하면 안돼요.

var 1st = 10; // 에러

02_대소문자 구분: name과 Name은 완전히 다른 변수입니다.

03_변수는 대문자가 아닌 소문자로 시작하세요.

암묵적인 룰

04_변하지 않는 환경 변수의 값을 담는 상수 변수는 모두 대문자로 만들어 주세요.

var DB_NAME = "webdongne"

상수의 값을 담는 변수는 구분해주기 위해 모두 대문자로

JAVA에서는 수정 불가 자바스크립트는 가능

암묵적인 룰

05_여러 단어가 조합되는 경우 다음과 같이 낙타 표기법(camelcase)으로 작성해 주세요

일종의 관행

06_자바스크립트에서 이미 정의도니 예약어(키워드)를 사용하면 안돼요.

[break, case catch, continue 등등] 

데이터 종류

숫자(number)

논리(Boolean)

문자(String)

함수(Function)

클래스(Class)

클래스 인스턴스(Class Instance)

undefined 변수의 기본 초깃값

null 변수를 초기화할 때 사용하는 값

#1

var data1 = 10;

var data1 = 20;

var data1 = 30;

#2

var data1 = 10;

data1 = 20;

data1 = 30;

최종적으로 30이라는 값은 똑같지만

#1은 똑같은 저장공간이 세 번 만들어지는 것

#2 data1이라는 저장공간이 한 번 만들어졌음

실무에서는 #1처럼 하면 안됨

출처 : 웹프로트엔드 개발자를 위한 필독서! 자바스크립트 + jQuery 완전정복 스터디