javascript - 내부 기능

codeit 으로 공부하면서 정리한 내용입니다.

새벽 5시에 일어나는 것은 힘든 것 같다... 화이팅!

오늘의 동기부여 대사
지금은 싫고, 똑바로 보고 싶지않고, 피하고 싶겠지만, 용기내서 똑바로 쳐다 보면 그곳에서 가치를 찾을 수 있을 것이다.

forEach와 map

배열의 메소드

• foreach: 첫 번째 memeber는 요소의 값들이 / 두 번째는 index 값들이
• map은 return 을 가진다.

// forEach와 map
const members = ['one', 'two', 'three']

for (let member of members){
	console.log(member);
}

members.forEach(function (member) {
	console.log(`${memeber}님이 입장하셨습니다.`);
})

members.forEach((member, index) => {
	console.log(`${index} ${memeber}님이 입장하셨습니다.`);
})

members.forEach((member, index, arr) => {
	console.log(`${index} ${memeber}님이 입장하셨습니다.`);
  	console.log(arr);
})

['one', 'two', 'three'].forEach((member, index, arr) => {
	console.log(`${index} ${memeber}님이 입장하셨습니다.`);
  	console.log(arr);
})

['one', 'two', 'three'].map((member, index, arr) => {
	console.log(`${index} ${memeber}님이 입장하셨습니다.`);
  	console.log(arr);
})

const newMembers = members.map((member, index) => {
	return index + member;
})

// 새로운 배열이 생긴다.
// map은 return 을 가진다.
console.log(newMembers) // [ '0one', '1two', '2three' ]

filter와 find

filter
- return 값이 배열
- 여러 값을 찾는다.
find
- return 값이 값
- 원하는 값을 찾으면 종료된다.

원하는 값이 없는 경우 undefined 를 출력한다.

const data = [
  { userName: '막대기', phoneNumber: '01012341111', email: 'stick@go_do_it.kr' },
  { userName: 'young', phoneNumber: '01012342222', email: 'kang@go_do_it.kr' }
];

// 첫 번째 방법
data.find((el) => {return el.userName === 'young'});
// 두 번째 방법
data.find((el) => el.userName === 'young');


const name = data.filter((el) => {
  return el.userName === 'young';
})
console.log(name);

some과 every

• some: 조건을 만족하는 요소가 1개 이상 있는지
• every: 모든 요소가 조건을 만족하는지 or 조건을 만족하지 않는 요소가 1개 이상 있는지

const numbers = [1, 2, 3, 4, 5, 6];

const someReturn = numbers.some((el) => el > 5);
const everyReturn = numbers.every((el) => el > 5);

const someReturn = numbers.some((el, i) => {
	console.log('some:', i);
  	return el > 5;
});

const everyReturn = numbers.some((el, i) => {
	console.log('every:', i);
  	return el > 5;
});

reduce

• Accumulate 누산기

numbers.reduce((acc, el, i, arr) => {
	return nextAccValue;
}, initialAccValue)


const numbers = [1, 2, 3, 4];

const sumAll = numbers.reduce((acc, el, i) => {
  	console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`;
	console.log('acc: ', acc);
  	console.log('el: ', el);
  	console.log('-----------;);
                
	return acc + el;
}, 0);

console.log('sumAll:, ', sumAll);

sort 메소드

• 배열을 정렬할 수 있다.

const numbers = [3, 4, 2, 1, 5];

numbers.sort();

console.log(numbers);

// 오름차순
numbers.sort((a, b) => a - b);

// 내림차순
numbers.sort((a, b) => b - a);

reverse 메소드

const letters = [5, 4, 3];

letters.reverse();

console.log(letters);	// 3, 4, 5

새로운 데이터 구조

Map

• 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷하다.
• 메소드를 통해서 값을 추가하거나 접근할 수 있다.

// map 생성
const code = new map();

// set 메소드
code.set('title', '문자열 key');
code.set(2017, '숫자형 key');
code.set(true, '불린형 key');

// get 메소드
console.log(code.get('title')) // 문자열 key
console.log(code.get(2017))	 //  숫자형 key // 
console.log(code.get(true)) // 불린형 key

// has 메소드
console.log(code.has('title')); // true
console.log(code.has('name')); // false

// size 프로퍼티
console.log(code.size); // 3

// delete 메소드
code.delete(true);
console.log(code.get(true)); // undefined

// clear 메소드
code.clear();
console.log(code.get(2017)); // undefined
console.log(code.size); // 0

Set

• 여러 개의 값을 순서대로 저장한다는 점에서 배열과 비슷하다.
• set 만의 메소드를 사용해야한다.
• 중복을 허용하지 않는 값들을 모을 때

// Set 생성
const newSet = new Set();

// add 메소드
newSet.add(1); // { 1 }
newSet.add(2); // { 1, 2 }
newSet.add(3); // { 1, 2, 3}

console.log(newSet);

// size 프로퍼티
console.log(newSet.size); // 3

// delete 메소드
newSet.delete(3);

// clear 메소드
newSet.clear();


for (const number of newSet){
	console.log(number);
}