[Javascript] 자바스트립트 기초 다시 체크하기

---

→ 알고리줌 문제를 풀고, 섹션이 넘어갈 수록 자바스크립트 기초에 대한 중요성을 느껴서 추석 연휴 시작 전에 정리하는 시간을 갖기로 했다. 다 알고 있는 내용이라고 생각했는데 막상 적용하려면 적용하지 못하는 부분이 꽤나 있던 것을 알 수 있었다

---

✔️ 연산자

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);

---

• 참조
  배열 및 객체의 비구조화 할당
  벨로퍼트