CodingCredit

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. (라고한다.) 예를들어 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하는 경우가 그렇다. 이런 경우 유용한 것이 바로 new연산자와 생성자 함수이다. About 생성자 함수 생성자 함수와 일반함수에 기술적인 차이는 없다. 다만 생성자 함수는 다음 두 관례를 따른다. 함수 이름은 일반명사로 짓는다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 new연산자를 붙여 실행한다. function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this.isAdmin = false; this.sayHi = function()..

About Arrow Function 화살표 함수는 항상 익명함수이다. 화살표 함수는 메소드 함수가 아닌 곳에 표현하는 것이 가장 적합하다. 따라서 생성자로서 사용할 수 없다. 화살표 함수라는 함수표현식이 생긴 2가지 이유 짧은 함수를 표현하기 위해서 화살표함수를 상용하면 짧은 함수를 간략하고 간단하게 표현할 수 있다. this를 바인딩하지 않기 위해서 화살표 함수가 나오기 전까지 모든 새로운 함수는 어떻게 그 함수가 호출되는지에 따라 자신의 this 값을 바인딩했다. 함수가 생성자인 경우: 새로운 객체 엄격모드 함수호출의 경우: undefined 함수가 '객체메서드'로서 호출된 경우: 문맥 객체 이러한 this의 바인딩은 객체지향 스타일로 프로그래밍을 할 때 많은 어려움을 준다. func..

애니메이션 애니메이션의 속성은 아래와같이 구성된다. animation-name : @keyframes 이름 (자유롭게 작성가능) animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용 animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier ) animation-delay : 애니메이션을 시작하기 전 지연시간 설정 animation-iteration-count : 반복 횟수 지정 animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며) animation-fill-mode : 애니메..

HTML_데이터속성 ( data-) data-속성은 요소의 확장 가능성을 염두에 두고 디자인되었다. ... js에서 접근하기 javaScript에서 data속성을 읽기 위해서 dataset 속성을 사용한다. var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" CSS에서 접근하기 css의 속성선택자를 사용하여 데이터에 따라 스타일을 바꿀 수 있다. article[data-columns='3'] { width: 400px; } article[data-c..

이벤트리스너에 매개변수 전달하기 이벤트리스너로 함수를 실행하고자 할때, 원하는 매개변수를 넣는 방법! 함수에 바로 매개변수를 넣어서 이벤트리스너에 할당하면 함수가 바로 실행되므로 다른방법이 필요하다. 바로 익명함수! 익명함수를 사용하면 쉽게 해결할 수 있다. //아래의 함수를 이벤트 리스너에 할당하자. function test(user) { console.log(user.age); } //이벤트리스너에 함수가 할당되지 않고, 바로(클릭과상관없이) soon.age값이 바로 콘솔에 찍힌다. aElement.addEventListener('click', test(soon)); //이벤트리스너에 함수가 할당되어 정상적으로 작동! aElement.addEventListener('click&#..

논리연산자 ( with shortcut circuit) 이미지출처: mdn 논리연산자 이를 토대로, 단락평가(Shortcut circuit)를 할 수 있다. 논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행한다. (거짓 표현식) && expr은 거짓 표현식으로 단락 평가됩니다. (참 표현식) || expr은 참 표현식으로 단락 평가됩니다. "단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻이다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문이다. 예를들어 return order = order || 1 여기서 order값이 참이면 order값을 그대로 쓰고, order값이 거짓이면 1을 리턴하게된다. ..