hands on js - 손풀기 예제(계속 업데이트됨)

[목표]

Javascript를 많이 사용하는 개발자를 위한

손풀기 예제 모음입니다. 

 

자료구조에 대한 익숙함과

항상 자료의 변형에 대해 준비성을 갖기 위해

손풀기 예제 모음을 만들었습니다.

 

예제는 계속해서 업데이트 되고 있습니다. 

 

---

/**
 * 🚗간단퀴즈
 * 반복되지 않은 첫 문자 구하기
 *
 */
const noRepeat = (word) => {
	let obj = {};
	word.replace(/\S/g, function(element){
		obj[element] = isNaN(obj[element]) ? 1 : obj[element] + 1;
	});

	for(let key in obj){
		if(obj[key] <= 1){
			return key;
		}
	}
	return "This are all repeat words"	
}

//────────────────────────────────────────────
/**
 * 🚗Array 특징
 * 인자로 받은 배열을
 * 새로운 변수에 받아라
 * 
 * 복사한 배열은
 * 원본 배열에서 모든 값에 + 1를 하라
 * 
 * 두 배열을 출력하라 
 */

const correctSpread = (arr) => {
	let arr2 = [...arr];
	arr[0] = 10;
	console.log("arr : ", arr) ;
	console.log("arr2 : ", arr2); 	
}

const wrongSpread = (arr) => {
	let arr2 = arr;
	arr[0] = 10;
	console.log("arr : ", arr) ;
	console.log("arr2 : ", arr2); 	
}

//────────────────────────────────────────────
/**
 * 🚗Map - Array 내장함수
 * 이 함수는 
 * 짝수 일때 '짝수' 라는 문자열을 나타내고
 * 홀수는 홀수 숫자 그대로 나타낸다.
 * 
 * 파라미터로 들어온 원본을 손대지 않고
 * 가공한 배열을 리턴해주시오.
 * 
 * map은 원본을 손 대지 않고
 * 원본 데이터를 가공해 리턴만 해준다. 
 * 
 * 다음 map이 틀린 부분을 수정하시오
 */
const oldMap = (arr) => {
	let result = [];
	const temp = [...arr];
	result = temp.map(item => {
		if(item % 2 == 0){
			return '짝수'
		}
		if(item % 2 != 0){
			return item
		}
	});
	console.table(result);
}
const newMap = (arr) => {
	let result = arr.map(item => {
		if(item % 2 == 0){
			return '짝수'
		}
		if(item % 2 != 0){
			return item
		}
	});
	console.table(result);
}

//────────────────────────────────────────────
/**
 * 🚗Spread Operator
 * Spread operator를 이용하여
 * 두 배열을 합쳐라
 */
const combineArr = (arr1, arr2) => {
	let combineArr = [...arr1, ...arr2];
	console.log(combineArr);
}

//────────────────────────────────────────────
/**
 * 🚗Destructing Array
 * 변수 a,b,c를 
 * 배열로 넘어온
 * '사과','배','딸기'라는 값으로
 * 한 줄로 선언해보기
 * 
 */
const declareVariables = (arr) => {
	let [a, b, c] = [...arr];
	
	console.log("a : " , a);
	console.log("b : " , b);
	console.log("c : " , c);
}

//────────────────────────────────────────────
/**
 * 🚗Destructing Object & Rest Parameter
 * 인자로 받은 배열은 
 * [x, y, a,b,c,d] 가 있다면
 * x,y는 string으로
 * 나머지는 배열로 선언을 
 * 한줄로 해보기
 */

const declareOnce = (arr) => {
	let [a, b, ...rest]= arr;
	console.log(rest);
}

//────────────────────────────────────────────
/**
 * 🚗 Destructing Object
 * 인자로 받은 배열은 이름의 집합이다. 
 * 배열의 길이는 3이다.
 * 배열 각 요소를 변수로 선언하는 한 줄의 코드를 작성하라
 */

const declareName = (arr) => {
	const [ name1, name2, name3 ] = arr;
	console.log("name1 : " , name1);
	console.log("name2 : " , name2);
	console.log("name3 : " , name3);
}

//────────────────────────────────────────────
/**
 * 🚗Default Parameter
 * 두 개의 숫자를 더하는 함수를 만들고
 * 하나의 값만 들어왔다면 다른 값은 기본값 5로 지정하라
 */

const add = (a = 5, b) => {
	return a + b;
}

//────────────────────────────────────────────
/**
 * 🚗Spread Operator
 * 인자로 객체를 받는다.
 * 
 * 객체의 기본 값을 설정해준다.
 * 
 */
const defaultVal = (obj) => {
	let dftVal = {
		배기량: '1200cc',
		가격: '1500만원',
		상호명: '부릉좋아바이크',
		번호: '0805004949'
	}
	let result = {
		...obj,
		...dftVal
	}
	return result;
}

//────────────────────────────────────────────
/**
 * 🚗Spread Operator 심화버전
 * 
 * 헬멧이 인자로 들어온 객체의 키에 없다면
 * 기본 헬멧이라고 선언해주고 리턴하라
 */

const defaultVal2 = (obj) => {
	let dftVal = {
		배기량: '1200cc',
		가격: '1500만원',
		상호명: '부릉좋아바이크',
		번호: '0805004949'		
	}
	if(!obj?.헬멧){
		console.log("여기 타나요?");
		obj.헬멧 = '기본헬멧';
	}
	let result = {
		...dftVal,
		...obj
	}
	return result;
}

// let obj = {
// 	마후라 : '일제',
// 	백시트: true,
// 	장갑: 'TRK120X',
// }
// console.log(defaultVal2(obj));

//────────────────────────────────────────────
/**
 * 🚗Find - Array 내장함수
 * Inventory라는 인자를 받는다. 
 * 해당 인자는 name, quantitiy로 구성되어 있고
 * 과일의 이름과 과일 수량을 나타낸다. 
 * 과일명이 apple인 값만 return 하는
 *  메소드를 만들어라
 * 
 * 🎈Array 내장함수에서 
 * 🎈중괄호를 생략하면 return을 생략할 수 있다. 
 * 🎃미쳐따...!!!
 */

//👉중괄호 생략버전
const extractApple1 = (inventory) => 
	 inventory.find(fruit => 
		 fruit.name == 'apple'
	);

//👉중괄호 미생략 버전
const extractApple2 = (inventory) => {
	return inventory.find(fruit => {
		return fruit.name == 'apple'
	});
}

// const inventory = [
// 	{ name : 'bear' , quantity: 20 },
// 	{ name : 'grape' , quantity: 30 },
// 	{ name : 'orange' , quantity: 40 },
// 	{ name : 'mango' , quantity: 50 },
// 	{ name : 'banana' , quantity: 60 },
// 	{ name : 'apple' , quantity: 10 },
// ];

//────────────────────────────────────────────
/**
 * 🚗Filter
 * 인자로 문자(열)을 받는다.
 * 문자(열)을 포함하는 요소를 출력한다.
 * 
 */
const fruits = ['apple', 'bear', 'banana', 'grape', 'orange'];

//👉중괄호 생략버전
const filterItems1 = (query) => fruits.filter(item => item.toLowerCase().indexOf(query) != -1);

//👉중괄호 생략버전
const filterItems2 = (query) => {
	return fruits.filter(item => {
		return item.toLowerCase().indexOf(query) != -1;
	});
}

// console.log(filterItems2('ban'));

 

---

  🎈인자1: 숫자가 담긴 배열 (Array)
  🎈인자2: 몇번 반복되었는지 알고 싶은 숫자 (int)
   
  특정 숫자가 배열에 몇번 반복되어 나타나는지 출력하라

[내가 쓴 해답] 

const repeatNumber = (arr, num) => {
	let count = 0;
	for(let i in arr){
		if(arr[i] == num){
			count ++;
		}
	}
	return count;
}

[인기 많은 해답] 

function solution1(array, n) {
	var answer = 0;
	let Array = array.filter((item) => item === n)
	console.log(Array);
	answer = Array.length

	return answer;
}

 

---