Lucky Charms Clover

👋🏻 JavaScript

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Array 오브젝트의 배열 엘리먼트 복사와 Generic을 알아보자

Array.prototype.copyWithin() 범위 값을 복사해 같은 오브젝트에 설정한다. 변경된 Array 오브젝트를 반환한다. 파라미터는 총 3개로 1번째만 필수다. 1번째 파라미터: 복사한 값을 설정할 시작 인덱스 2번째 파라미터: 복사 시작 인덱스 3번째 파라미터: 복사 끝 인덱스 (바로 앞까지) 3번째 파라미터를 작성하지 않은 경우 복사한 값을 설정할 시작 인덱스는 1이고, 복사를 시작할 인덱스는 3이다. 즉 list의 1번째 인덱스부터 복사 값을 붙여 넣을 건데, 2번째 파라미터에서 3번째 인덱스부터 복사를 시작할 거고 어디까지 복사를 끝낼지 3번째 파라미터를 설정하지 않았기 때문에 "D"부터 끝까지 복사하게 된다. 따라서 D부터 끝까지 값을 복사해서 1번째 인덱스에 붙여넣는다는 말! c..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] 템플릿 리터럴(Template Literal)을 알아보자

템플릿 리터럴(Template Literal) `문자열` `문자열 ${표현식} 문자열` tag(함수 이름) `문자열 ${표현식} 문자열`로 쓸 수 있다. 백틱 안에 표현식을 작성하는데, 표현식을 ${표현식} 형태로 작성해 =아래와 같이 쓰인다. console.log(`ABC`) // ABC const one = 1, two = 2; const result = `1+2는 ${one + two}이 된다`; console.log(result) // 1+2는 3이 된다 줄바꿈을 할 때도 쓰인다. ES5처럼 \n을 사용하지 않고 백틱 안에서 줄을 바꿀 수 있다. console.log("ES5-1라인\n2라인") // ES5-1라인 // 2라인 console.log(`1라인 2라인`) // 1라인 // 2라인 ta..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] prototype을 살짝! 알아보자

prototype과 __proto__ (야매 주의) 이번 강의는 잘 이해를 못 했지만 최대한 이해한 부분을 적어봤다. 적으면서 이해가 안되거나 궁금한 부분은 다시 알아봐야겠다. 🥹 프로토타입은 어떤 객체의 속성이나 메서드를 정의하는 템플릿? 모음집? 같은 녀석이라고 이해했다. 아래 코드를 보면 Person이라는 생성자 함수를 만들었고, 이 함수의 프로토타입에 sayHello라는 메서드를 추가했다. 이로써 생성자 함수 Person을 사용해 만든 객체들은 모두 sayHello() 메서드를 공유하게 된다. 그래서 person1, person2들은 Person의 프로토타입을 상속 받아서 sayHello() 메서드를 사용하는 것을 볼 수 있다. // 생성자 함수 정의 function Person(name) { t..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Object 변환에 대해 알아보자

Object.entries() 열거 가능한 오브젝트의 {key: value}를 [[key, value]] 형태로 변환한다. const obj = {music: "음악", book: "책"}; const list = Object.entries(obj); for (let keyValue of list) { console.log(keyValue) }; // [music, 음악] // [book, 책] 위에서는 키가 영문자일 때 별도로 키값을 분류하지 않고 작성한대로 반환했다. 하지만 아래처럼 숫자와 문자가 섞여 있다면 숫자 -> 문자 순서로 분류하기에 작성한 순서가 중요하다면 해당 메서드를 사용해선 안된다. const obj = {10: "십", book: "책", 7: "칠"}; const list = Ob..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Object 오브젝트 중 is 메서드와 복사를 알아보자

Object.is() 두 개의 파라미터의 값과 값 타입을 비교해 같으면 true / 아니면 false를 반환한다. 아래의 코드를 보면 Number 10과 String 10은 타입이 다르기 때문에 false가 반환된다. 빈 객체의 경우 똑같을 것 같지만 false가 나오는 이유는 참조형인 객체의 특성 상 각자 참조하는 메모리의 값이 다르기 때문에 같지 않다고 인식하기 때문이다. 애초에 해당 메서드는 오브젝트끼리 비교하기 위해 만들어진 목적이 아니기도 하다. const result = Object.is(10, "10"); console.log(result) // false const one = {}, two = {}; console.log(Object.is(one, two)) // false 이 is() 메..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] String 오브젝트 중 다양한 메서드를 알아보자

String.prototype.startsWith() 대상 문자열이 첫 번째 파라미터의 문자열로 시작하면 true / 아니면 false를 반환한다. 정규 표현식은 사용할 수 없으며 두 번째 파라미터는 옵션으로, 비교 시작 인덱스를 작성할 수 있다. (디폴트 0) 시작하는지를 확인하는 부분이 정규 표현식의 캐럿과도 같다. const target = "ABC"; console.log(target.startsWith("AB")); // true console.log(target.startsWith("BC")); // false console.log(/^AB/.test(target)) // true 위에서 말한 두 번째 파라미터(옵션)를 넣으면 비교를 시작할 인덱스를 정할 수 있다. 예컨대 1번째 인덱스부터 B..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] String 오브젝트 중 유니코드(Unicode)를 알아보자

Unicode 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 국제 표준 이전에는 문자 체계도 다르고 인코딩 방식도 달라 문자 간의 상호 호환성이 없었는데, 이러한 문제점을 유니코드를 통해 해결할 수 있게 됐다. 유니코드는 'U+0031' 과 같이 생겼다. U+는 접두어고, 0031은 문자를 고유한 코드 포인트(Code Point)라는 숫자로 나타낸 것이다. 이 코드 포인트는 문자 코드라고도 부른다. U+0031은 숫자 1을 뜻하고, U+0041은 영어 알파벳 대문자 A를 뜻한다. 이 코드 포인트를 통해 문자나 이모지를 표현하는데, 대부분 4자리 이상의 UTF-16 진수 형태를 띄고 있다. (UTF-16은 16비트(2바이트) 단위로 문자를 인코딩하는 방식) 110만개 정도 표현..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Number 오브젝트를 알아보자

Number 오브젝트 JS는 IEEE 754에 정의된 64비트 부동 소수점으로 수를 처리한다. 1) 부동 소수점 컴퓨터에서 실수를 표현하는 방식 중 하나다. 소수점 이하의 숫자를 '이진법'(컴퓨터는 0과 1로 이루어져 있으니)으로 표현하며 소수점의 위치와 지수를 사용해 값을 나타낸다. 예컨대 십진법에서의 0.1은 이진법으로 정확히 표현할 수 없다. 0.1을 이진법으로 변환하면 무한 소수가 되기 때문에 부동소수점은 이러한 수를 근삿값으로 표시한다. IEEE 754 표준은 가장 널리 사용되는 부동소수점 표현 방식으로, 64 비트 또는 32비트 형식으로 저장되는데 JS의 Number 데이터 타입은 64비트 형식을 사용한다. 2) 64비트를 사용한다는 건 숫자 1을 처리하든 1억을 처리하든 수를 처리할 때 JS..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] getter, setter를 알아보자

그 전에 Object.defineProperty를 알아보자 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정해 객체를 반환한다. 해당 메서드를 사용해 객체 o에 속성 'a'를 정의하고 있다. value: 속성 'a'의 값으로 37이 할당됐다. writable: 속성 'a'의 값을 변경할 수 있도록 허용한다. true면 속성 값은 수정 가능하다. enumerable: 속성 'a'가 열거 가능하도록 설정한다. true면 for...in 루프나 Object.keys() 등 메서드를 사용할 수 있다. configurable: 속성 'a'의 구성을 변경할 수 있도록 허용한다. 아래와 같이 코드를 작성하면 console.log(o.a) 에서 37이 반환된다. var o = {}; // 새로운 객체 생..

👋🏻 JavaScript/📖 자바스크립트 ES6+

[JS] Default Value를 알아보자

Default Value 값을 할당하지 않으면 디폴트 값(사전에 정의된 값)을 할당한다. // 할당된 값이 없을 경우 const [one, two, five = 50] = [10, 20]; console.log(five) // 50 // 할당된 값이 있을 경우 const [one, two, five = 50] = [10, 20, 70]; console.log(five) // 70 아래의 경우 오른쪽 one의 값인 10이 왼쪽 one 프로퍼티의 값으로 분할 할당된다. const [one, two = one + 20, five = two + 50] = [10] console.log(two) // 30 console.log(five) // 80 파라미터에서도 동일하다. ten에 10이 설정되고, two에는 디..

썸머몽
'👋🏻 JavaScript' 카테고리의 글 목록 (2 Page)