클로저앞서 렉시컬 스코프와 클로저는 매우 밀접하게 연관되어 있다고 말했다. 클로저란 무엇일까?클로저 : 함수와 함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하여 외부 함수가 종료된 후에도 내부 함수가 외부 변수에 접근할 수 있도록 하는 기능이다.여기서 렉시컬 환경은 또 무엇일까? 렉시컬 환경렉시컬 환경은 "자바스크립트 엔진이 변수와 함수 선언을 관리하기 위해 사용하는 구체적인 공간"을 말한다.렉시컬 스코프는 "함수의 정의 위치를 기준으로 스코프가 결정되는 규칙"을 의미하는 것으로 렉시컬 환경과는 다른 의미를 가진다.예시:function makeAdder(x) { return function(y) { return x + y; }}const add3 = makeAdder(3);co..
자바스크립트 호이스팅과 스코프자바스크립트 엔진에서는 코드를 실행하기 전에 변수와 함수 선언을 먼저 처리한다.이로 인해 마치 선언이 코드의 최상단으로 끌어올려진 것처럼 동작하는 것을 호이스팅이라고 부른다.또한 변수나 함수가 어떤 범위(scope)에서 유효한지에 따라 여러 가지 특징적인 동작을 보인다. 호이스팅자바스크립트 엔진은 코드를 실행하기 이전에, 변수 선언문이나 함수 선언문을 미리 해석하여 선언을 위한 메모리를 할당한 뒤, 코드가 실행될 때 변수나 함수를 미리 사용할 수 있게 준비해 둔다.예시: console.log(score); // undefinedvar score;score = 100;console.log(score); // 100 일반적으로 "아직 선언되지 않은 변수를 console.log로 ..
변수변수란데이터를 저장하기 위해 이름을 부여한 메모리 공간을 의미한다. 프로그램을 작성할 때 필요한 값을 저장하고 꺼내 쓰는 역할을 한다.변수 선언변수를 사용하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.선언 키워드 : var, let, constES6버전에서 var의 단점을 보완한 let, const 가 도입되면서 var는 잘 사용하지 않는다.선언 후 초기화를 해주지 않으면 변수의 값에는 쓰레기 값이 들어간다. var로 선언을 하면 자동으로 undefined로 초기화가 된다.변수의 생성과정선언초기화 (undefined를 할당주는 단계)할당var와 let의 차이점var는 선언과 초기화가 동시에 된다. 그래서 할당 전에 호출하면 '..
객체 메소드 1. Object.assign() 객체 복제 user를 복사하고 싶다고 그냥 cloneUser에 대입해서 될까? const user = { name : 'susukkang', age : 30 } const cloneUser = user; 답은 '아니다' user 변수에는 객체 자체가 들어가 있는 것이 아니라, 객체가 저장되어 있는 메모리 주소인 객체에 의한 참조값이 저장된다. 그러므로 cloneUser에는 데이터가 들어가지않고 참조값이 들어간다. Object.assign() 사용 const newUser = Object.assign({}, user); 이렇게 사용해야 newUser에 user의 값들이 복제된다. 병합1 const newUser2 = Object.assign({gender:'f..
중복되는 기능을 하나의 파일로 관리하여 다른 파일에도 적용 가능하도록한다. 1. 파일 저장 모듈화된 기능을 저장할 파일을 아래 경로에 만든다. 위 생성된 파일에 2,3번을 추가한다. 2. 태그 동적 추가 및 CSS 적용 id는 확실하게 지어주는 것이 좋다. 'bar' 보단 'scroll-bar-indicator'로 지정한다. $('').css({ width: '50%', height: '5px', backgroundColor: 'cornflowerblue', position: 'fixed', left: 0, top:0 }).prependTo($('body')); 3. 이벤트 추가 $(document).scroll(function() { let x = $(document).scrollTop() * 100 ..
🔻화살표 함수, Arrow Function 자바의 람다와 비슷한 개념이다. 자바의 람다는 익명 객체의 추상 메소드를 표현하는 기술이었지만, 자바스크립트의 화살표 함수는 익명 함수를 표현하는 기술이다. 기본 구문 const add = (a, b) => a + b; 함수 선언 방법 1. 함수 선언문 function f1() { console.log('f1'); } f1(); 2. 함수 표현식 (리터럴) == 익명함수 const f2 = function () { console.log('f2'); } f2(); 익명이므로 그냥 호출할 수가 없어 변수에 저장하여 호출한다. 변수에 저장하지않고 호출하는 방법인 즉시호출이 있다. 즉시호출 전체를 묶고 호출한다. (function() { console.log('f2_1..
자바스크립트에서 객체를 여러개 만들 때, 유의해야 할 점은 실수로 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다. 🔻일반적인 객체 생성 o1.name = '홍길동'; o1.hello = function() { console.log('hello'); }; o2.name = '아무개'; o2.hllo = function() { console.log('안녕'); } 위 코드의 문제점은 오타를 내도 제어하지 못한다는 것이다. o2의 hello를 hllo로 잘못 작성하여 o1과 o2는 다른 객체로 생성되었다. 객체를 여러개 만들 때, 유의해야 할 점은 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다. 생성자 함수는 이 점을 보완할 수 있다. 🔻생성자 함수 자바의 클래스 개념을 가지고 있다. 자바의 생성자..
🔻스크롤 이벤트🔻 특정 위치로 스크롤이 내려가면 배경색과 글씨색을 바꾼다. 기본 뼈대 Title 스크롤 위치 확인하기 window.scrollY : 현재 문서나 요소의 세로(수직) 스크롤 위치를 나타내는 속성이다. document.getElementById('div1').getBoundingClientRect().top getBoundingClientRect().top 으로 문서 좌측 상단 기준으로 'div1' 의 위치를 알 수 있다. div1 요소가 화면의 맨 위에 위치하고 있다면, 위의 코드는 0을 반환한다. div1이 화면 위쪽에서 내려간 위치에 있다면, 양수의 값이 반환하며, div1이 화면 아래에 있다면, 음수의 값이 반환한다. 이벤트 전체코드 Title Lorem ipsum dolor sit ..
🔻배경 이미지 조작🔻 스트라이트 이미지 활용한다. 스프라이트 이미지는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것으로 연속된 이미지가 하나의 이미로 합쳐져 있다면 backgroundPosition을 이동시켜 움직이는 것 같은 효과를 보여준다. 🔻heart🔻 '두근두근' 버튼을 누르면 backgroundPosition을 이동시킨다. 기본 뼈대 배경 이미지 조작 이벤트 원본이미지에서 하나의 하트만 보이게 너비 지정을 한다. 버튼을 누를 때마다 x의 위치를 감소시켜 이미지를 왼쪽으로 이동시킨다. 보이는 영역은 고정이고 연속된 이미지가 왼쪽으로 움직이면서 애니메이션과 같은 효과를 보여준다. 🔻puma🔻 사진을 클릭하면 스프라이트 이미지의 위치값이 변한다. 한 번 더 클릭하면 위치이동을 멈춘다. 기본 ..
🔻사진 슬라이더🔻 콤보박스로 선택한 값에 따라 사진을 이동시킨다. 키보드 방향키로도 사진 이동가능하게 한다. 기본 뼈대 고양이 고양이1 고양이2 고양이3 고양이4 고양이5 이벤트
