Front-End: Web/JavaScript (97) 썸네일형 리스트형 [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) [코딩애플] js part 3-13. Optional Chanining(?.) / Nullish Coalescing (??) 신문법) ?. / ?? 연산자 (optional chaining) 자바스크립트에서 여러 문자, 숫자를 한 변수에 저장하고 싶다면, Object. var user = { name: 'kim', age: 20 }; 꺼내 쓰려면, user.name; // 'kim' use.age; // 20; ?. (optional chaning 연산자) 왼쪽에 있는 자료가 비어있으면, 오른쪽을 실행해주지 않는다. 즉, ?. 왼쪽이 null, undefined면 점안찍어주고 undefined 남겨준다. 언제쓰나? 중첩된 object 자료에서 자료뽑을 때 reference 에러 없이 안전하게 뽑을 수 있음 예로 들어보자. 중첩된 object를 만들어보자. var user = { name: 'kim', age: {value: 2.. [코딩애플] js part 3-12. class로 만들어보는 2D 게임 class로 만들어보는 간단한 2D 게임 (배웠으면 써먹어야하니까) 자바스크립트만으로도 간단한 게임을 만들 수 있다. HTMl, CSS, JS만으로 만든 게임 중 해볼만한 명작: candy box, Synergism 우리는 크롬 공룡 게임을 만들어 보자. 게임 개발 원리와 구현 방법 화면에 네모, 원 그릴 수 있어야 함 (네모 위에 공룡, 선인장 등 그림을 입힘) -> 태그를 이용하면 자바스크립트로 간단하게 네모를 그릴 수 있다. 프레임마다 코드실행 가능해야 (애니메이션을 위해) 예로 들어서 공룡이 방향키를 누르면 60px 이동해야 한다. 근데 순간이동하면 안되겠지. 서서히 60px로 이동시켜야 한다. 그러면 1초에 60번 정도 +1px 해주면 된다. 그래서 1초에 60번 움직이도록 자바스크립트 코드를 .. [코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기 shadow DOM과 template으로 HTML 모듈화하기 shadow DOM이란? 가끔 보면 복잡한 HTML 태그가 있는데, 이렇게 작성하면 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다. 이게 div 태그가 맞는지 확인해보자.  확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다. 이제 다시 보면,  div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까! 이처럼 태그 하나를 써서 태그 세 개가 .. 이전 1 2 3 4 5 6 ··· 13 다음