일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- improve-iq-by-up-to-10%!
- css variables
- css grid
- flex-basis
- Engoo
- close together
- just-one-small-sip
- css
- Sass
- Express
- Object.create
- flexbox
- regExp
- es6
- 무료 백엔드 배포
- node
- Node.js
- express-handlebars
- select by attribute
- module wrapper function
- img 확대
- flex-shrink
- flex-grow
- shit-christmas
- 정규표현식
- css 오버레이
- JS
- ajax
- Prototype
- 디자인패턴
- Today
- Total
목록2021 프론트 엔드 로드맵 따라가기/JS (56)
전역에 사용된 var가 함수 안과 if 나 loop 안에서 어떤 차이를 보이는지에 주목하자. // Global Scope var a = 1; let b = 2; const c = 3; // function test() { // var a = 4; // differ from global a // var b = 5; // var c = 6; // console.log(`Function Scope: ${a} ${b} ${c}`); // } // test(); // Block Scope (if, loop, etc... wrapped in culry braces..) // if(true) { // var a = 4; // same as global a // let b = 5; // const c = 6; // c..
val = Math.PI; val = Math.E; val = Math.round(2.4); // 2 val = Math.ceil(2.3); // 3 val = Math.floor(2.7); // 2 val = Math.sqrt(81); // 9 val = Math.abs(-2); // 2 val = Math.pow(8, 3); // 512 val = Math.min(4,6654,4,3,1); // 1 val = Math.max(4,6654,4,3,1); // 6654 val = Math.random(); val = Math.floor(Math.random() * 20);
Number() String() ~.toString() parseInt() parseFloat() 등이 있고 문자열과 숫자를 더하면 숫자가 자동으로 문자열로 형 변환된다.
값을 비우는 것이 의도적인지 아닌지가 포인트인것 같다. null 같은 경우에는 의도적으로 값을 비우고자 할 때 사용되어지고, undefined는 초기화를 하지 않거나 선언하지 않은 변수를 호출하려 할 때 사용되어지는 것 같다.
DOM Document Object Model의 약자. HTML, XML문서 의 프로그래밍 인터페이스이다. 해당 문서들을 구조화된 표현으로 제공하여 프로그래밍 언어가 해당 요소들을 다룰 수 있도록 한다. window object 브라우저에 해당하며 DOM문서를 포함하고 있는 객체. 최상위이기 때문에 가지고 있는 메서드들을 점표기법 없이 사용 가능하다. 아래는 기타 여러가지 하위 object or methods // WINDOW METHODS / OBJECTS / PROPERTIES console.log(123); // Alert // alert('Hello'); // Prompt // const input = prompt(); // alert(input); // Confirm // if (confirm(..
Object literal 말고 객체를 생성할 수 있는 방법이 두 가지 더 있다. 하나는 prototypes와 함께 constructor function을 생성하는 것이고, 다른 하나는 es6에서 class를 이용하는 것이다. 1) Constructor function 이용하기 생성자 함수를 만들 때는 항상 함수의 이름 맨 앞이 대문자여야 한다. 매개변수에는 해당 객체의 properties 명을 전달한다. 그 후, 해당 생성자를 new 키워드와 함께 사용하여 인스턴스화(구체화)를 통해 객체를 생성 하면 된다. Object literal로 생성한 것과 다른 점은 앞에 해당 객체의 이름이 적힌다는 것이다. 다음과 같이 object에 methods를 추가할 수도 있다. 또한 JS는 프로토타입 기반언어인데 해당..
함수를 만들 때 매개변수의 기본 값을 설정할 수 있다. 아래의 코드는 매개변수의 기본 값이 존재하기 때문에 정상적으로 작동한다. function addNums(num1 = 1, num2 = 1) { console.log(num1 + num2); } addNums(); es6 또는 es2015 부터는 화살표 함수 표현을 이용할 수 있다. 아래는 위와 같은 코드이다. const addNums = (num1 = 1, num2 = 1) => { return num1 + num2; } console.log(addNums(5, 5)); 만약 화살표 함수의 내용이 한 문장으로 이루어져있다면 다음과 같이 축약 표현이 가능하다. 괄호가 사라지고 return 키워드가 없어진 것을 확인할 수 있다. const addNums..
조건을 적을 때 ==를 이용하면 데이터 형을 무시하고 비교하려 한다. ===를 사용하면 데이터 형을 무시하지 않고 비교한다. Conditional(ternary) Operator (삼항 조건 연산자) 조건에 따라 결정된 값을 변수에 할당하고자 할 때 주로 이용된다. const x = 10; const color = x > 10 ? 'red' : 'blue'; console.log(color); switch 조건문과 case문이 일치하면 해당 case문의 명령을 수행
javascript object notation의 약자로, 자바스크립트 객체 표기법이며 api 통신 등에 사용된다. object literal과 비슷하게 생겼으나 약간 다른 점이 있다. 아래 사진을 보면 key에 "(Double Quotes)가 붙어있으며, String을 표기할 때도 "가 붙어있다. 이 형식을 벗어나면 오류가 생긴다고 한다. JSON.stringify()를 이용해 해당 object literal을 json 문자열로 변경할 수 있다.