https://jsisweird.com/ JS is weirdA fun and tricky JavaScript quizjsisweird.com 자바스크립트만의 매력이라고 할 수 있는 요상한 문법들을 다룬 사이트가 있다JS is weird 라는 사이트는'연산'과 '타입 변환'을 중심으로 자바스크립트 문제 25개를 풀 수 있는 곳이다 평소에 생각하지 못했던 문법들이 나와서 심심할 때 재미 삼아 풀어볼 만하다! 오늘은 그 중에서 생각해 볼 만한 문제 8개를 풀이해보려고 한다  1. true + false 👉 1 "+" 연산시 boolean 은 number 타입으로 변환된다.그러면 1 + 0 이 되니까, 결과는 1이다.  2. [,,,].length 👉 3 빈 공간에는 undefined 가 들어간다.마지막의..

Javascript 유니버스 탐험 완료 🚀👩‍🚀 Redux 를 만들고, React 팀의 멤버였던 Dan Abramov 가 생각하는 Javascript를 알 수 있었고조금 더 넓은 시야로 언어를 바라볼 수 있게 되었다.  https://justjavascript.com/ Just JavaScriptJust JavaScript will help you develop a rock-solid understanding of how JavaScript works through intuitive visual explanations and learning challenges.justjavascript.com

javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다. 각각의 부분에 대해 알아보자. 링크 javascript: 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다. 주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다. 링크 '링크'를 누르면 콘솔 창에 '클릭'이 출력된다. void(0) void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다. const sum = void(5+5); console.log(sum); // un..

정규식에 사용할 패턴이 변할 가능성이 있거나, 외부에서 패턴을 가져오는 경우 변수를 사용해야 한다. 변수를 활용하기 위해서는 RegExp 객체의 생성자 함수를 사용해서 정규식을 생성할 수 있다. 기본 사용법 pattern 변수를 먼저 생성한 다음, 정규식 생성자 함수에 값을 넣어준다. 생성자 함수의 경우 빗금(/ /)이 아닌 따옴표("")를 사용한다. const str = "abcdef"; const pattern = "abc"; const regex = new RegExp(pattern); str.match(regex); // true 추가 활용 const pattern = "abc"; const regex1 = new RegExp(pattern, "g"); // 플래그 추가 const regex2 =..

export 모듈 내의 식별자를 다른 모듈에서 접근하기 위해선 export 키워드를 통해 내보내기 한다. 내보내는 대상은 함수, 변수, 클래스 모두 가능하다. 반드시 모듈의 최상위 위치해야 한다. import 타 모듈에서 내보낸 식별자들을 가져오기 위해선 Import 키워드를 사용한다. 가져올 식별자와 타 모듈의 경로를 함께 작성한다. 반드시 파일의 최상위에 위치해야 한다. named exports 개별 식별자를 내보내는 것을 의미한다. 중괄호({})로 식별자들을 감싸 export, import를 사용한다. // a.js const a = 1; function foo(){ // ... } export { a, foo }; // b.js import { a, foo } from './a.js'; conso..

Map Map 객체는 key와 value의 쌍으로 이루어진 collection이다. 사용법 - Map 객체 생성하기 Map 생성자 함수로 만들 수 있다. 이터러블을 인수로 전달받으며, 키와 값으로 이루어진 요소여야 한다. 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(['key1', 'value1'], ['key2', 'value2']); Map 객체는 중복 Key를 가지지 않는다. key가 중복될 경우, 마지막 값으로 입력된다. - 요소 개수 확인하기 size 프로퍼티로 요소의 개수를 받아온다. const count = map.size; // 2 위에서 생성한 map의 개수는 2개이므로 2가 반환된다. - 요소 추가하기 set 메서드를 사용해 Map 객체에 요소..

10진수 -> n진수 변환 `number` 는 10진수 값 let number = 1023; let binary = number.toString(2); // 2진수 let octal = number.toString(8); // 8진수 let hex = number.toString(16); // 16진수 n진수 -> 10진수 변환 let decimal; let binary = "1111"; decimal = parseInt(binary, 2); // 2진수 -> 10진수 let octal = "177"; decimal = parseInt(octal, 8); // 8진수 -> 10진수 let hex = "3ff"; decimal = parseInt(hex, 16); // 16진수 -> 10진수 n진수에서 n..

화살표 함수를 제외한 모든 함수에서 arguments 객체를 사용할 수 있다. arguments arguments 객체를 통해 함수 호출 시 전달한 인자들을 참조할 수 있다. 유사 배열 객체이기 때문에 인덱스 프로퍼티와 length 프로퍼티 등을 가지고 있다. 사용 방법 arguments로 입력해주면 바로 사용할 수 있다. 배열처럼 index 프로퍼티로 값에 접근할 수 있으며 인자로 받은 값의 갯수를 length 프로퍼티로 받을 수 있다. function sum(x, y, z) { console.log(arguments[0], arguments[1], arguments[2]); // 1, 5, undefined console.log(arguments.length); // 2 arguments[1] = 3..

매개변수와 인자는 동일한 의미 같지만 다르다. 프로그래밍 전반에서 자주 쓰이는 만큼 두 차이를 정확하게 알아보자! function message(name){ // name -> 매개변수 return `Hi, ${name}`; } console.log(message('John'))'; // 'John' -> 파라미터 // 'Hi, John' 인자(argument)란? 인자는 함수를 호출할 때 전달되는 값을 의미한다. 매개변수(parameter)란? 매개변수는 함수에서 전달된 인자를 받아들이는 변수를 의미한다. 함수 내에서 지역변수로 사용된다. 매개변수와 인자 자바스크립트 특성상 느슨하기 때문에 함수를 호출할 때 인자 값, 개수 등을 정확하게 검사하지 않는다. function message(name){ re..