문성

이번에는 자바스크립트에 비교적 최근에 추가된 문법인, 구조 분해 할당(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}`; 따옴표 말고도 ``(백틱) 을 둘러싸서 표현할 ..

이번에는, 객체의 원시형(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") 와 같이 이름을 지정할수도 있습니다. 그러나 서로 다른 변수에 이름이 같은 심볼형이 선언된다고 해도, 두 심볼형은 서로 달라서 비교 연..

이번 글에서는, 옵셔널 체이닝(optional chaining) 문법에 대해 알아보겠습니다. 옵셔널 체이닝은 비교적 최근에 추가된 문법으로, 알아두면 코드를 줄이거나 개선하는데 많은 도움이 될 것입니다. 그리 어려운 문법도 아니니, 글을 끝까지 읽고 한번 본인의 코드에 옵셔널 체이닝을 적용시켜보도록 합시다! 1. 옵셔널 체이닝(optional chaining) 우리가 특정 객체의 프로퍼티나 메소드에 접근하려면, 점 표기법(.) 이나 대괄호 표기법([]) 을 이용합니다. 아래와 같이 말이죠. let obj = { a : 1 } console.log(obj.a); 그러나, 객체에 존재하지 않는 값에 접근하려고 하면, TypeError 가 발생합니다. 이는 당연한 에러이지만, 어떤 상황에서는 존재하지 않는 값..

이번 글에서는, 객체 리터럴과 객체 생성자 이외에 새롭게 객체를 만들 수 있는 new 연산자와 생성자 함수에 대해 알아보도록 하겠습니다. 1. new 연산자, 생성자 함수 보통, 객체를 처음 선언할 때는 객체 리터럴을 주로 사용합니다. 아래와 같이 말이죠. let user = { name: "moonsung", age: 17 } 그러나, 위와 같은 유사한 객체를 여러번 만들어야 하는 일이 생길 수 있을 때에는, 매번 위와 같이 객체를 직접 선언해야 하고, 이는 코드의 가독성 및 재사용성을 떨어뜨립니다. function User() { this.name = "moonsung"; this.age = 17; } let user = new User(); 따라서 위의 코드처럼 생성자 함수 User를 선언하고, n..