Front-End: Web (163) 썸네일형 리스트형 [js]tilde(~)와 double tilde(~~) tilde(~) 연산자 비트 연산자. NOT의 기능을 한다. 2진수의 0 1 로 바꾼다. const a = 5; // 0000000000000101 console.log(~a); // 1111111111111010 // expected output: -6 const b = -3; // 1111111111111101 console.log(~b); // 0000000000000010 // expected output: 2 하지만 저것을 콘솔에 실행시켜 보면 expected output과 같이 -6,2 가 나온다. 이를 이진수로 직접 눈으로 확인 하는 법은 없을까? toString() 메서드를 이용하여 이진수로 변환하기 toString() 메서드를 이용하면 10진수를 이진수로 바꿀 수 있다. const a =.. [js] 변수를 사용하기 전에 꼭 알아야할 "TDZ(Temporal Dead Zone)" TDZ란? 직역하면 일시적 사각지대 let, const, class 구문의 유효성을 관리함 즉, 변수를 선언 및 초기화하기 전 사이의 사각지대를 말함 (선언 및 초기화 전에 변수를 사용하게 되면 ReferenceError 에러가 발생함) 따라서 변수를 선언하기 전에 변수를 절대 사용하지 말자! TDZ의 영향을 받는 구문 const let class constructor() 내부의 super() 기본 함수 매개변수(Default Function Parameter) const 변수 😃 상단에서 본 사진과 동일하다. 꼭 const 변수를 선언한 후 사용하도록 하자. const pi = 3.14; pi; // 3.14 let 변수 😭 let도 선언 전 줄까지 TDZ의 영향을 받는다. count; // throw.. [js] 객체 복사: Object.assign vs. object spread object spread는 항상 새로운 객체를 생성함 const a = { name: 'Joe Bloggs' } const b = { ...a, age: 27 }; console.log(a === b) //=> false Object.assign은 이미 존재하는 객체를 mutate하게도 가능함 const a = { name: 'Joe Bloggs' } const b = Object.assign(a, { age: 27 }); console.log(a === b) //=> true Object.assign을 활용해서 객체를 복사하려면 첫 번째 파라미터로 빈 객체를 넣으면 된다. const a = { name: 'Joe Bloggs' } const b = Object.assign({}, a, { age: 27.. [JavaScript] eval() 함수를 사용하지 마세요! eval() is evil! eval()문자로 표현된 JavaScript 코드를 실행하는 함수.php, javascript와 같은 스크립트 언어에서 사용할 수 있다.eval(string)매개변수string : 자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있음반환값주어진 코드를 평가하여 얻은 값. 값이 없다면 undefined를 반환(예제)console.log(eval('2 + 2'));// expected output: 4console.log(eval(new String('2 + 2')));// expected output: 2 + 2console.log(eval('2 + 2') === eval('4').. [js] lastIndexOf (+ 활용법 with indexOf) array.indexOf(s)가 앞에서부터 보고 문자열(s)가 나온 최초의 인덱스를 반환한다면(없다면 -1을 반환) array.lastIndexOf(s)는 그 반대로 뒤에서부터 본다. 그래서 이 두 메서드를 활용하면, arr.indexOf(s) === arr.lastIndexOf(s) 해당 조건을 만족하는 arr는 문자열 s가 한 번 밖에 등장하지 않는다. 참고 자료 String.prototype.lastIndexOf() - JavaScript | MDN lastIndexOf() 메서드는 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 -1을 반환합니다. developer.mozilla.org [js] includes vs in Array.includes() array 내 값이 존재하는지 확인 in operator 객체 내 key가 존재하는지 확인 (array의 경우, 해당 index가 존재하는지 확인) 예제 var arr = [5]; console.log('Is 5 is an item in the array: ', arr.includes(5)); // true console.log('do we have the key 5: ', 5 in arr); // false console.log('we have the key 0: ', 0 in arr); // true 참고 자료 https://stackoverflow.com/questions/48499181/what-is-the-difference-between-in-operator-an.. [js] Math.floor vs trunc vs parseInt Math.floor vs trunc vs parseInt Math.floor(): 작은 정수로 소수점 버림 (-3.2 -> -4, 2.3 -> 2) trunc() : 소수점 버림 (-3.2 -> -3, 2.3 -> 2) parseInt() : Math.floor()와 동일하게 작동, 두 번째 파라미터로 n진수로 변환 가능(default Value: 10) [CSS] Grid Garden - grid 속성을 배워보자 display: grid; grid-template-columns 세로로 그리드 설정 grid-template-rows 가로로 그리드 설정 grid-column-start/end grid-column-start/end : n 그리드 몇 세로선부터 시작할 것인지/끝낼 것인지 (음수로 두면 뒤에서 부터) end를 더 낮은 값으로 두어 설정할 수도 있다. ex) grid-column-start: 5; grid-column-end: 2; grid-column-start/end: span n span을 이용하여 n만큼 열의 넓이 지정하기 grid-column : grid-column-start / grid-column-end grid-column-start와 grid-column-end를 줄인 속성 ex) gri.. 이전 1 2 3 4 5 6 7 ··· 21 다음
