Lucky Charms Clover

전체 글

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

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

이번 건 웹 개발에서 사용하는 부분이 많지 않다. 그냥 참고 삼아 적어둔다. Math.trunc() : 소수를 제외한 정수를 반환한다. console.log(Math.trunc(12.56), Math.floor(12.56)); // 12, 12 console.log(Math.trunc(-12.56), Math.ceil(-12.56)); // -12, -12 console.log(Math.trunc("12.56"), Math.floor(true)); // 12, 1 Math.sign() : 값의 부호에 해당하는 값을 반환한다. 양수일 경우 1, 음수일 경우 -1, 0은 부호와 관계 없이 0으로 반환한다. console.log(Math.sign(5), Math.sign(-5)); // 1, -1 consol..

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

[JS] Array 오브젝트의 이터레이터 오브젝트 생성을 알아보자

Array.prototype.entries() Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다. 배열의 엘리먼트를 [key, value] 형태로 변환한다. for-of문으로 전개할 수 있다. 이터레이터는 다시 반복할 수 없다. Array 이터레이터 오브젝트는 [key, value] 형태로, 배열의 인덱스가 key가 되고 엘리먼트 값이 value가 된다. 끝까지 읽은 이터레이터 오브젝트는 다시 읽을 수 없고, 전부 읽고 나면 undefined가 뜬다. 그래서 아래 코드에서 한 번 더 콘솔을 찍으면 undefined가 찍힌다. const iterator = ["A", "B"].entries(); console.log(iterator.next().value); // [0, 'A'] co..

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

[JS] Array 오브젝트의 find, findIndex, fill, includes, flat, flatMap을 알아보자

Array.prototype.find() 배열의 엘리먼트를 하나씩 읽어가며 콜백 함수를 호출한다. 콜백 함수에서 true를 반환하면 종료된다. 1번째 파라미터: 콜백 함수 (파라미터: 엘리먼트, 인덱스, 배열 전체) 2번째 파라미터(opt): 콜백 함수에서 this로 참조할 오브젝트 반환: 배열 엘리먼트 OR undefined 아래처럼 find는 콜백 함수를 파라미터로 사용하며 해당 콜백 함수는 3가지 파라미터를 사용한다. const list = ["A", "B", "C"]; const cb = (val, idx, all) => val === "B"; const result = list.find(cb); console.log(result) // B const list = ["A", "B", "C"]; c..

👋🏻 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..

카테고리 없음

[JS] Array 오브젝트의 from(), of()를 알아보자

Array.from() 첫 번째 파라미터의 오브젝트를 Array 오브젝트로 변환한다. 알고리즘 문제를 풀 때 문자열을 배열로 만들려면 이렇게 하나보네? 하고 암 생각 없이 따라 썼던 메서드다. 파라미터는 총 3개로, 1번만 필수다. 1번째 파라미터: 변화 대상, 이터러블 오브젝트 2번째 파라미터: 전개할 때마다 호출할 함수 3번째 파라미터: 호출된 함수에서 this로 참조할 오브젝트 아래 코드처럼 Array-like 오브젝트 like를 배열 오브젝트로 변환해 반환했다. 문자열의 경우 문자 단위로 분리해 배열로 반환한다. const like = {0: "zero", 1: "one", length: 2}; const list = Array.from(like); console.log(list) // ['zer..

⚙️ 코딩테스트

[JavaScript] 프로그래머스 코딩테스트 레벨 2 : 카펫

📌 문제 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 📌 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다..

👋🏻 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() 메..

썸머몽
윤일무이