→ 알고리줌 문제를 풀고, 섹션이 넘어갈 수록 자바스크립트 기초에 대한 중요성을 느껴서 추석 연휴 시작 전에 정리하는 시간을 갖기로 했다. 다 알고 있는 내용이라고 생각했는데 막상 적용하려면 적용하지 못하는 부분이 꽤나 있던 것을 알 수 있었다
✔️ 연산자
1. 산술 연산자
let a = 1; a++; //1 ++a; //3 console.log(a);👉🏻 console.log(a++); 를 할 때에는 1을 더하기 직전 값을 보여주고 console.log(++a); 를 할 때에는 1을 더한 다음의 값을 보여준다는 차이가 있다.
2.대입 연산자
let a = 1; a = a + 3;let a = 1; a += 3;👉🏻 위와 대입 연산자는 덧셈 말고 뺄셈 등에서도 적용 가능하다.
✔️ 조건문
1. switch/case 문
const device = 'iphone'; switch (device) { case 'iphone': console.log('아이폰!'); break; case 'ipad': console.log('아이패드!'); break; case 'galaxy note': console.log('갤럭시 노트!'); break; default: console.log('모르겠네요..'); }👉🏻 switch/case 문은 특정 값이 무엇이냐에 따라 다른 작업을 수행 할 수 있게 해준다.
✔️ 함수
1.템플릿 리터럴
function hello(name) { console.log(`Hello, ${name}!`); } hello('velopert'); //Hello, velopert!
✔️ 객체
1. 비구조화 할당
👉🏻 비구조화 할당을 사용하지 않으면 배열에서 하나씩 뽑아서 변수에 할당해줘야 하는데,
비구조화 할당을 사용할 경우 좌측에는 변수명 집합 우측에는 해당 변수에 할당할 배열만 넣어주면 알아서 할당된다.
2. 배열 비구조화
// 기본 문법(비구조화 할당 x) const colorList = ['red', 'yellow', 'green']; const red = colorList[0]; const yellow = colorList[1]; const green = colorList[2]; // 비구조화 할당 문법 const [red, yellow, green] = ['red', 'yellow', 'green'];
3. 객체 비구조화
// 기본 문법(비구조화 할당 x) const colors = { red : 'RED', yellow : 'YELLOW', green : 'GREEN' }; const red = colors.red; const yellow = colors.yellow; const green = colors.green; // 비구조화 할당 문법 const { red, yellow, green } = { red : 'RED', yellow : 'YELLOW', green : 'GREEN' };
✔️ 반복문
1. for문
for (초기 구문; 조건 구문; 변화 구문;) { 코드 }👉🏻 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복한다. for 문을 사용 할 때 보통 i++ 를 해서 1씩 증감하는 형태로 사용한다.
2. while문
let i = 0; while (i < 10) { console.log(i); i++; }👉🏻 while문은 특정 조건이 참이라면 계속해서 반복하는 반복문이다. while 문을 사용 할 때에는 조건문이 언젠간 false 가 되도록 신경써야 한다.
3. for...of문
let numbers = [10, 20, 30, 40, 50]; for (let number of numbers) { console.log(number); } //10 //20 //30 //40 //50👉🏻 for...of문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문이다.
- 객체가 지니고 있는 값에 대하여 반복을 하고 싶다면, for...in 구문을 사용해도 된다.
✔️ 배열 내장함수(⭐️⭐️⭐️)
1.forEach
const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; superheroes.forEach(hero => { console.log(hero); });👉🏻 forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.
2. map
const array = [1, 2, 3, 4, 5, 6, 7, 8]; const squared = array.map(n => n * n); console.log(squared);👉🏻 map은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어진다.
3. indexOf
👉🏻 indexOf 는 원하는 항목이 몇번째 원소인지 찾아주는 함수이다.
4. findIndex
👉🏻 배열 안에 있는 값이 객체이거나, 배열이라면 findIndex 사용하기
5. find
👉🏻 find 함수는 findIndex랑 비슷한데, 찾아낸 값이 몇번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환한다.
6. filter
const todos = [ { id: 1, text: '자바스크립트 입문', done: true }, { id: 2, text: '함수 배우기', done: true }, { id: 3, text: '객체와 배열 배우기', done: true }, { id: 4, text: '배열 내장함수 배우기', done: false } ]; const tasksNotDone = todos.filter(todo => todo.done === false); console.log(tasksNotDone);//결과 [ { id: 4, text: '배열 내장 함수 배우기', done: false } ];👉🏻
filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.
7. splice
const numbers = [10, 20, 30, 40]; const index = numbers.indexOf(30); numbers.splice(index, 1); console.log(numbers); //결과 [10, 20, 40]👉🏻 splice 는 배열에서 특정 항목을 제거할 때 사용한다. splice를 사용 할 때 첫번째 파라미터는 어떤 인덱스부터 지울지를 의미하고 두번째 파라미터는 그 인덱스부터 몇개를 지울지를 의미한다.
8. slice
const numbers = [10, 20, 30, 40]; const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지 console.log(sliced); // [10, 20] console.log(numbers); // [10, 20, 30, 40]👉🏻 배열을 잘라낼 때 사용하는데, 중요한 점은 기존의 배열은 건들이지 않는다는 것이다. slice 에는 두개의 파라미터를 넣게 되는데 첫번째 파라미터는 어디서부터 자를지, 그리고 두번째 파라미터는 어디 전까지 자를지 를 의미합니다.
9. join
const array = [1, 2, 3, 4, 5]; console.log(array.join()); // 1,2,3,4,5 console.log(array.join(' ')); // 1 2 3 4 5 console.log(array.join(', ')); // 1, 2, 3, 4, 5👉🏻 join 은 배열 안의 값들을 문자열 형태로 합쳐준다.
10. reduce(⭐️⭐️⭐️)
Q. 주어진 배열에 대하여 총합을 구해야 하는 상황이라면?
const numbers = [1, 2, 3, 4, 5]; let sum = array.reduce((accumulator, current) => accumulator + current, 0); console.log(sum);👉🏻 reduce 함수에는 두개의 파라미터를 전달합니다. 첫번째 파라미터는 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);Q. 주어진 배열에 대하여 평균을 구해야 하는 상황이라면?
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);
