문성

이번에는 자바스크립트에 비교적 최근에 추가된 문법인, 구조 분해 할당(destructuring assignment) 에 대해 알아보도록 하겠습니다. 구조 분해 할당은 말 그대로 배열이나 객체 등의 이터러블을 분해하는 문법인데, 어떤 것이고 어떻게 사용할수 있는지, 지금부터 자세하게 알아보도록 합시다!! 1. 구조 분해 할당(destructuring assignment)let [v1, v2] = [1, 2]; console.log(v1); // 1 console.log(v2); // 2 let [v3, , v4] = [1, 2, 3]; console.log(v3); // 1 console.log(v4); // 3 let [v5, v6, ...rest] = [1, 2, 3, 4]; console.log(v5..

이번 글에서는 맵(Map), 셋(Set), 위크맵(WeakMap), 위크셋(WeakSet) 자료형에 대해 알아보도록 하겠습니다. 이 네가지 자료형은 배열과 객체와 비슷하지만, 이 둘 만으로는 부족했는지 오늘 다룰 자료형들이 추가적으로 등장했습니다. 따라서, 이 네가지 자료형들이 각각 무엇이고, 어떻게 사용하고, 기존의 배열과 객체와는 어떤 차이점이 있는지 지금부터 알아보도록 합시다! 1. 맵(Map), 셋(Set) let map = new Map(); let obj = { a: 1}; map.set("name", "moonsung"); map.set(17, "age"); map.set(obj, "object"); map.get("name"); // moonsung map.get(obj); // objec..

이번에는 이터러블(iterable) 에 대해 알아보도록 하겠습니다. iterable 을 한국어로 번역하면, 반복 가능한 이라는 뜻으로, 배열을 일반화한 객체 입니다. 따라서, 이터러블을 어떻게 만들고, 어떻게 사용하는지 지금부터 알아보도록 합시다! 1. 이터러블(iterable) let obj = { start: 1, end: 4, [Symbol.iterator]() { return { current: this.start, last: this.end, next() { if(this.current

이번에는 저번 글에 이어서, 배열의 메소드들에 대해 자세하게 알아보도록 하겠습니다. 저번 글에서는 배열에 대해 간단하게 알아보고 몇몇의 메소드들을 소개했었는데, 이번에는 존재하는 메소드들에 대해 방대하게 알아볼 예정이니, 끝까지 읽어주시고 모르는 메소드들을 습득해가시길 바랍니다! 1. 배열의 메소드 let arr = [1, 2, 3, 4, 5]; let arr_like = { 0: 1, 1: 2, [Symbol.isConcatSpreadable]: true, length: 2 } arr.splice(1, 1); // arr = [1, 3, 4, 5] arr.splice(0, 1, 2); // arr = [2, 3, 4, 5] arr.slice(1, 3); // [2, 3] arr.concat([6, 7,..

이번에는 자바스크립트의 배열(Array) 에 대해 자세하게 알아보도록 하겠습니다. 배열은 자바스크립트 뿐만 아니라 다른 언어에서도 자주 사용되며, 빠질 수 없는 중요한 자료형 중 하나입니다. 따라서, 단순 배열이 무엇인지 알아보는 것 뿐만 아니라, 내부적으로 깊게 파고들어보도록 합시다. 1. 배열(Array) let arr1 = new Array(); // 생성자 let arr2 = []; // 리터럴 먼저, 배열의 선언부터 알아봅시다. 배열은 객체와 마찬가지로, 각각 생성자 방식과 리터럴 방식으로 선언할 수 있습니다. 둘은 동일한 배열이므로, 어떤 방식이든 상관없지만, 보통은 리터럴 방식으로 선언하는게 일반적입니다. let arr = ["a", "b", "c"]; console.log(arr[0]); ..

이번에는 자바스크립트의 기본 자료형 중 하나인 문자열에 대해 자세히 알아보도록 하겠습니다. 아마, 자바스크립트를 처음 배울 때 가장 먼저 접하는 문법 중 하나이며, 모르시는 분들이 없을 것이라고 생각됩니다. 따라서, 우리가 기본적으로 아는 문자열 그 자체가 아닌, 더욱 깊이 파고들어서 자세하게 알아보도록 합시다! 1. 문자열 문자열은 기본적으로 ''(작은따옴표) 혹은 ""(큰따옴표) 로 둘러쌓여집니다. 아래와 같이 말이죠. let str1 = 'hello'; let str2 = "hello"; 이것이 우리가 흔히 알고있는 문자열의 모습이자, 사용 방법입니다. let str1 = ` hello world `; let str2 = `str1: ${str1}`; 따옴표 말고도 ``(백틱) 을 둘러싸서 표현할 ..

이번에는 자바스크립트의 숫자형에 대해서 자세하게 알아보도록 하겠습니다. 숫자형은 말 그대로 숫자인 자료형이며, 자바스크립트를 처음 배우기 시작할 때, 가장 먼저 배우는 자료형 중 하나입니다. 따라서, 이러한 기본적인 자료형을 더욱 깊이 파고들어 자세히 알아보도록 합시다. 1. 숫자형의 다양한 모습 let num1 = 100000000; let num2 = 1e8; console.log(num1 == num2); // true 위의 num1 변수는 숫자 1억을 담고 있습니다. 1억은 0이 8개이므로 1과 8개의 0을 차례대로 써주면 되지만, 그러기엔 0이 더 많아질수록 귀찮은 작업이 되고, 숫자의 크기를 알아보기 힘들어집니다. 따라서, 0을 나열하는것이 아닌 1e[0의 개수] 형식으로 대신 나타낼 수 있습..

이번 글에서는 원시형에서 일반 객체처럼 여러 메소드를 사용할 수 있게 해주는 존재인, 원시 래퍼 객체에 대해서 알아보도록 하겠습니다. 너무 당연하게 우리는 자바스크립트에서 숫자와 문자열 등의 원시 자료형에 .slice(), .toUpperCase() 같은 메소드를 쓰곤 하는데, 정작 원시형은 객체가 아니기 때문에 상식적으로는 메소드를 가지고 있지 않아야 합니다. 따라서, 내부적으로 어떠한 일이 일어나서 이러한 일이 가능하게 되는지 알아보도록 합시다! 1. 원시형(Primitive Type) 과 객체 아마 대부분의 분들이 잘 아실거라 생각하지만, 그래도 다시 한번 원시형은 무엇이 있고, 객체는 무엇인지 짚고 넘어가도록 합시다. 원시형은, 문자(string), 숫자(number, bigint), 불린(boo..

이번에는, 객체의 원시형(Primitive Type) 변환에 대해 알아보도록 하겠습니다. 원시형 변환에 대해 감이 확 오지 않을수도 있는데, 자바스크립트에서 서로 다른 타입간의 덧셈/뺄셈이나 값의 비교, 값의 출력 등 에서 우리도 모르게 자동적으로 일어나는게 객체의 원시형 변환입니다. 따라서 원시형 변환이 어떻게 일어나고, 어떻게 제어할 수 있는지 지금부터 알아보도록 합시다. 1. 변환 종류 객체의 원시형 변환은 크게 3가지로 분류됩니다. 바로, string, number, default 로 말이죠. 이 세가지를 통틀어서 hint 라고 합니다. hint는 간단하게 말해서 목표로 하는 자료형 이라고 생각하시면 됩니다. alert(obj); obj2[obj] = 1; 먼저, string 은 alert 로 객..

이번 글에서는 심볼형(Symbol) 에 대해 알아보도록 하겠습니다. 심볼을 사용하면 재미있는 것들을 할 수 있는데, 특히 객체에 값을 추가하는 부분에 있어서 독보적인 역할을 하기 때문에, 글을 끝까지 보시고 완벽하게 익히셔서 응용해보셨으면 좋겠습니다! 1. 심볼형(Symbol)let sb1 = Symbol(); let sb2 = Symbol("id"); let sb3 = Symbol("id"); console.log(sb2 == sb3); // false 먼저, 심볼형은 Symbol() 을 통해 만들 수 있습니다. 인자값 없이 그냥 만들수도 있고, Symbol("id") 와 같이 이름을 지정할수도 있습니다. 그러나 서로 다른 변수에 이름이 같은 심볼형이 선언된다고 해도, 두 심볼형은 서로 달라서 비교 연..