이고브 이고브

자바스크립트의 데이터 복사원시 값(String, Number)를 복사할 때, 복사한 값은 메모리 공간에 할당되지 않기에 복사 이전의 값을 바꿔도 바뀌지 않음 (깊은 복사)참조 값(배열, 객체, 함수)를 복사할 때, 동일한 메모리 공간을 바라보고 있어, 이전의 값을 바꾸면 동일하게 값이 바뀜 (얕은 복사)// 얕은 복사const shllowCopy1 = 1;let shllowCopy2 = shllowCopy1;shllowCopy2 = 2console.log(shllowCopy1); //1console.log(shllowCopy2); //2// 깊은 복사const deepCopy1 = {number: 1};let deepCopy2 = deepCopy1;deepCopy2.number = 2console.log..

파일 업로드를 구현하면서 마주했던 상황에 대해 정리하고자 한다. * 예제는 jQuery로 작성되었습니다. (필요하다면 javascript로 전환해 사용권장드립니다.) 1. 필수로 파일을 1개 이상 등록해야하는 경우 2. 파일의 확장자를 체크해야 하는 경우 3. 파일 이름에 특정 기호가 들어갔는지 확인해야하는 경우 function validation_file() { // 1. 하나 이상의 파일 필수 등록 if ($("#fileId").val().trim() == "") { alert("파일을 등록해주세요."); $("#fileId").focus(); return false; } // 2. 파일 확장자 체크 const FILE_NAME = $("#fileId").val(); const FILE_LENGTH ..

객체 - 상태(state)를 나타내는 프로퍼티 + 동작(behavior)을 나타내는 메서드 - 메서드는 프로퍼티를 참조하고 변경할 수 있어야한다. 2022.10.25 - [javascript] - 자바스크립트 객체 생성 방법 this - 생성자 함수 또는 생성된 인스턴스를 참조하는 변수로 함수를 호출하면 함수 내부에 전달된다. - 객체의 메서드 / 생성자 함수 내부에서만 의미가 있고 나머지는 전역변수로 window를 잡는다. - strict mode가 적용된 일반 함수 내부의 this에는 undefined로 나온다. - 화살표 함수는 this가 적용되지 않는다. (부모의 함수를 받아서 사용) bind / call / apply : 일반 함수는 window가 this를 바라보는데 이것들을 쓰면 this를 ..

객체를 생성하게 된다면 고유의 prototype을 가진다. // Func 객체는 prototype을 만든다. function Func(name, age) { this.name = "kwak"; this.age = 30; } // new를 통해 객체를 선언하면, // obj안에는 __proto__이 생기는데 이 __proto__는 Func의 prototype을 바라본다. const obj = new Func(); 큰 구조 1. 생성자 함수를 만든다. 2. 생성자 함수의 prototype이 생긴다. 3. 생성자 함수를 통해 객체 하나를 만든다. prototype : 함수 객체에 존재 __proto__ : 모든 객체에 존재

프로토타입을 이용한 상속 let objFunc = function() { this.one = "one"; this.two = "two"; } let obj = new objFunc(); objFunc.prototype.two = "one"; objFunc.prototype.three = "three"; console.log(obj.one); // one console.log(obj.two); // one console.log(obj.three); // three console.log(obj.check); // undefined 기본적인 prototype chain function chain1() {} chain1.prototype.foo = "bar"; var chain2 = new chain1(); c..

call, apply, bind : this를 지정, 함수호출 방식과 관계없다. const kwak = { name : "kwak", }; function showName() { console.log(this.name); } showName(); showName.call(kwak); 객체 수정 - apply는 배열을 사용하는 것이 call과 다르다. function updateObj(age, gender) { this.age = age; this.gender = gender; } updateObj.call(kwak, 30, "M"); // updateObj.apply(kwak, [30, "M"]); console.log(kwak); bind : 함수의 this값을 영구히 바꿀 수 있다. const bin..

setTimeout : 설정한 시간이 지난 후 함수를 실행 setInterval : 설정한 시간 간격으로 함수를 반복 clearTimeout : 예정된 setTimeout을 제거 clearInterval : 예정된 setInterval을 제거 - setTimeout function fn() { console.log("3"); } setTimeout(fn, 3000); /* 동일한 표현 setTimeout(function() { console.log("3"); }, 3000); */ // 파라미터 전달 function paramFunc(name) { console.log(name); } setTimeout(paramFunc, 3000, "kwak"); - setInterval & clearInterval ..

const minus = (x, y) => x - y; function result(fn, x, y) { return fn(x, y); } result(minus, 10, 1);// 9 // minus 대신 minus() 넣으면 result(x - y, 10, 1); 와 동일해진다. 함수 호출을 하면 return값이 대신 들어간다고 생각하면된다. minus()를 대신 넣으면 undefined - undefined가 된다. const click = () => () => { console.log("a"); }; document.querySelector("#id").addEventListner("click", click()); // 동일한 표현 document.querySelector("#id").addEve..