[JavaScript] 모같코 1주차

1. 변수와 상수

1) 변수

바뀔수 있는 값
let
#var 더 이상 사용안함

2) 상수

고정된 값
const

let a = 10;
const b = 20;

a = 20;

console.log(a);
console.log(b);

let num = 1; //숫자
let text = "hello"; //문자열(작은 따옴표나 큰 따옴표 사용)
let bool = true; //boolean형

3) null과 undefined

null : 값이 없음을 의미
undefined : 값이 아직 설정되지 않음을 의미

let nu = null; //값 없음 의미
let un;
console.log(un); //undefined 출력됨

2. 연산자

1) 산술연산자

const name = "yeongsin";
console.log("안녕하세요" + name + "입니다.");
console.log(`안녕하세요 ${name}입니다.`);

2) 대입연산자

3) 논리연산자

실행 순서는 NOT->AND->OR

//NOT
const name = "Yeongsin";
console.log(name); //yeongsin
console.log(!name); //false
console.log(!0); //true
console.log(!1); //false 
//0만 false
//if(0) => 실행안됨

//AND
console.log("aa" && "bb") //bb출력, 앞이 true이면 뒤 출력
console.log("aa" || "bb") //aa출력, 앞이 true이면 앞 출력

4) 비교연산자

const aa = 10;
const bb = "10";
console.log(aa == bb); //true
console.log(aa === bb); //false
console.log(aa !== bb); //true

3. 조건문

4. 함수

1) 함수 기본

function add(a, b){
	return a + b;
}
const sum = add(1, 2);
console.log(sum);

functino Hello(name){
	console.log(Hello, ' + name + '!'); //console.log(`Hello, ${name}!`);
}
hello('yeongsin');

2) 화살표 함수

const add = (a, b) => {
	return a + b;
};
const add2 = (a, b) => a + b;
console.log(add(1, 2));

5. 객체

1) 객체 기본

const dog = {
	name: '멍멍이', //키: 원하는 값
    age: 2,
    'sentence with spaces': true //공백이 있으면 따옴표로
};
console.log(dog.name); //멍멍이
console.log(dog.age); //2
console.log(dog); //{name: '멍멍이', age: 2, 'sentence with spaces': true}

2) 함수에서 객체를 파라미터로 받기

const my1 = {
	name: 'yeongsin',
    age: 22
};
const my2 = {
	name: 'sangho_lee',
	age: 21
};
// 1. 함수의 파라미터를 객체로
const myProfile = (my) => {
	console.log(my.name);
    console.log(my.age);
};
// 분해가능
const myProfile2 = (my) => {
	const {name, age} = my;
    console.log(name);
    console.log(age);
};
// 더 분해가능(비구조화할당)
const myProfile3 = ({name, age}) => {
	console.log(name);
    console.log(age);
    console.log(`이름은 ${name} 나이는 ${age}입니다.`);
};
myProfile(my1);
myProfile2(my1);
myProfile3(my1);

3) 객체 안에 함수 넣기

const dog = {
	name: '멍멍이',
    sound: '멍멍!',
    say: function say(){ //이름 없어도 됨, function()
    	console.log(this.sound);
    }
};
dog.say();
//화살표 함수로 선언한다면 제대로 작동하지 않을수도 있음

6. 배열

1) 배열 기본

const array = [1, 2, 3];
const objects = [{ name: '멍멍이'}, {name: '야옹이'}]; 
console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

2) 배열에 새 항목 추가, 배열 크기

push 함수 이용
length 값 확인

const objects = [{ name: '멍멍이'}, {name: '야옹이'}]; 
objects.push({
	name: '멍뭉이'
});
console.log(objects.length);

//배열에 추가하는 함수
const objectsAdd = (obj) => {
	objects.push(obj);
};
objectsAdd({name: '영신'});
console.log(objects);

//배열 크기 판단하는 함수
const objectsLen = (objects) => {
	if(objects.length !== 7){
    	console.log(`${objects.length}명 참석했습니다.`);
        return;
    }
	console.log("모두 참석하였습니다.");
};
objectsLen(objects);

7. 반복문

1) for...of

let numbers = [10, 20, 30, 40, 50];
for (let number of numbers){
	console.log(number);
}   

2) 객체의 정보를 배열 형태로 받아오는 함수

Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
Object.keys: [키, 키, 키] 형태의 배열로 변환
Object.values: [값, 값, 값] 형태의 배열로 변환

const doggy = {
	name: '멍멍이',
    sound: '멍멍'
};
console.log(Object.entries(doggy)); 
// [ [ 'name', '멍멍이' ], [ 'sound', '멍멍' ] ]
console.log(Object.keys(doggy));
// [ 'name', 'sound' ]
console.log(Object.values(doggy));
// [ '멍멍이', '멍멍' ]

3) 퀴즈

숫자로 이루어진 배열이 주어졌을 때, 해당 숫자 배열안에 들어있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 새로 만들어서 반환해보세요.

function biggerThanThree(numbers){
	const newNum = [];
    for(i of numbers){
		if(i > 3){
        	newNum.push(i);
        }
    }
    return newNum;
}
const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers));

8. 배열 내장함수

1) forEach

함수의 파라미터는 각 원소에 대하여 처리하고 싶은 코드를 함수로

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
superheroes.forEach(hero => {
  console.log(hero);
});

함수의 parameter hero는 각 원소를 가르킴

2) map

함수의 파라미터는 변화를 주는 함수(변화함수)

const array = [1, 2, 3, 4, 5, 6, 7, 8];
const square = n => n * n;
const squared = array.map(square); 
//const squared = array.map(n => n * n);
console.log(squared);

3) indexOf

원하는 항목이 몇번째 원소인지 찾아주는 함수

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const index = superheroes.indexOf('토르');
console.log(index);

4) findIndex, find

배열 안의 값이 객체나 배열이라면 indexOf 사용 불가 => findIndex
찾아낸 값 자체를 반환 => find

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); //2

const todo = todos.find(todo => todo.id ===3);
console.log(todo); 
//{id: 3, text: "객체와 배열 배우기", done: true}

5) filter

배열에서 특정 조건을 만족하는 값들만 추출하여 새로운 배열 만든다.
파라미터는 조건을 감사하는 함수, 이 함수의 파라미터로 각 원소의 값 받아옴

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const taskNotDone = todos.fillter(todo => todo.done === false);
//const taskNotDone = todos.filter(todo => !todo.done);
console.log(tasksNotDone);

6) splice, slice

splice : 배열에서 특정 항목을 제거
첫번째 파라미터 - 어떤 인덱스부터 지울지
두번째 파라미터 - 그 인덱스부터 몇개를 지울지
slice : 기존의 배열을 건들이지 않으며 배열을 잘라냄
첫번째 파라미터 : 어디서부터 자를지
두번째 파라미터 : 어디전까지 자를지

//splice
const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1); //2부터 1개 지움
console.log(numbers); //[10, 20, 40]
//slice
const sliced = numbers.slice(0, 2); //0부터 2전까지 지움
console.log(sliced); //[10, 20]
console.log(numbers); //[10, 20, 40] 바뀌지 않음

7) shift, pop, unshift

shift : 첫번째 원소를 배열에서 추출(배열에서 해당 원소 사라짐)
pop : 맨 마지막 항목을 추출(배열에서 해당 원소 사라짐, push의 반대)
unshift : 맨 앞에 새 원소 추가(shift의 반대)

//shift
const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value); //10
console.log(numbers); //[20, 30, 40]
//pop
const value2 = numbers.pop();
console.log(value2); //40
conosle.log(numbers); //[20, 30]
//unshift
numbers.unshift(5);
console.log(numbers);//[5, 20, 30]

8) concat, join

concat : 여러개의 배열을 하나의 배열로 합쳐줌, 기존 배열에는 영향없음
join : 배열 안의 값들을 문자열 형태로 합쳐줌

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
console.log(concated); //[1, 2, 3, 4, 5, 6]
console.log(concated.join()); //1,2,3,4,5,6
console.log(concated.join(' ')); //1 2 3 4 5 6
console.log(concated.join(', ')); //1, 2, 3, 4, 5, 6

9) reduce

두 개의 파라미터 가짐

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); //15

첫번째 파라미터 : accumulator(누적된 값)와 current를 파라미터로 결과를 반환하는 콜백함수
두번째 파라미터 : reduce함수에서 사용할 초깃값

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
	console.log({ accumulator, current});
    return accumulator + current;
}, 0);
console.log(sum);

결과

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum); //3

퀴즈 - 숫자 배열이 주어졌을 때 10보다 큰 숫자의 갯수를 반환하는 함수를 만드세요.

// reduce함수 사용
function countBiggerThanTen(numbers){
	const num = numbers.reduce((accumulator, current) =>{
    	if(current > 10){
        	accumulator += 1;
        }
    return accumulator;
    }, 0);
    return num;
}
// fillter함수 사용
function countFilter(numbers){
	const num = numbers.filter(number => number > 10);
    return num.length;
}
// map함수 사용	
function countMap(numbers){
	let count = 0;
    numbers.map(num => {
    	if(num > 10)
        	count++;
    })
    return count;
}
const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count);
const count2 = countFilter([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count2);
const count3 = countMap([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count3);