간단히 코어 자바스크립트에 대한 내용을 복습하는 시간을 가졌다.
큼지막한 주제를 토대로 복습하였다.

• 변수와 상수의 차이점
• Null과 undefined의 차이점
• 연산자의 종류와 비교 연산자
• 템플릿 리터럴 (ES6)
• 화살표 함수
• for 문
• continue vs break
• 배열 내장 함수
• 객체 생성자
• 클래스

변수와 상수

변수	상수
let 키워드 사용	const 키워드 사용
값 재할당 가능	값 재할당 불가능
뚜껑이 열린 박스	자물쇠로 닫힌 박스

Null & undefined

Null은 빈 박스로 설정해놓은 상태이고, undefined은 아직 설정은 안 한 상태이다.

비교연산자 (=== vs ==)

우선 연산자의 종류로는 산술연산자,대입연산자,논리연산자,비교연산자,증감연산자가 있다.

비교연산자에서 ===와 ==가 있는데 차이점은 ==은 타입 검사를 안 한다는 점이다.
예를 들어서 ==를 사용하면 숫자 1과 문자 '1' 이 동일한 값으로 간주된다.
그리고, 0 과 false 도 같은 값으로 간주된다.

두 값이 일치하는지 비교 할 때에는 == 대신 === 를 사용 할 것을 권장한다.
== 를 사용하다보면 실수를 할 확률이 높아지기 때문이다.

템플릿 리터럴

ES6에 템플릿 리터럴이라는 문법이 있는데, 예시를 보면 기억하기 쉽다.

function hello(name) {
 console.log(`Hello, ${name}!`);
}
hello('Matthew');

화살표 함수

function이라는 키워드 대신에 =>를 사용한 것이다. 코드를 간결하게 쓸 수 있다는 장점을 가지고 있다.

주의할 점은 객체 안에 함수를 넣을 때, 화살표 함수로 선언한다면 제대로 작동하지 않는다. 왜냐하면, function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키게 되는데, 화살표 함수는 그렇지 않기 때문입니다.

for ... of

for...of문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문입니다.

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

for ... in

for...in문은 객체에 관한 반복문을 돌리기 위해서 만들어진 반복문입니다.

const user = {
  name: 'Song',
  residence: 'Gwacheon',
  age: 26
};

for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

continue vs break

continue는 다음 루프를 실행하도록 하는 키워드이며, break는 반복문을 끝내기 위해 사용되는 키워드이다.

for (let i = 0; i < 10; i++) {
  if (i === 4) continue; // 다음 루프를 실행
  console.log(i);
  if (i === 8) break; // 반복문을 끝내기
}

배열 내장 함수

forEach, map, indexOf, findIndex, find, filter, splice, slice, shift & pop, concat

forEach

forEach 는 기존에 우리가 배웠던 for 문을 대체 시킬 수 있다.

const places = ['Seoul', 'Gwacheon', 'Suwon', 'Anyang'];

for (let i = 0; i < places.length; i++) {
  console.log(places[i]);
}

//forEach 사용
places.forEach(place => {
  console.log(place);
});

map

map 은 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어진다. 예를 들면 제곱을 이용한 함수이다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = [];

array.forEach(n => {
  squared.push(n * n);
});

console.log(squared);

indexOf

indexOf 는 배열 안에 원하는 항목이 몇번째 원소인지 찾아주는 함수입니다.

findIndex & find

배열 안에 있는 값이 객체이거나, 배열이라면indexOf로 찾을 수 없습니다. 이럴 때는
findIndex를 사용합니다.

find 함수는 findIndex 랑 비슷하지만 찾아낸 값이 몇 번째인지 알아내는 것이 아니라, 찾아낸 값 자체를 반환합니다.

filter

filter 함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듭니다. 예를 들어 자연수가 있는 집합 배열에서 10보다 작은 자연수만 추릴 때 filter 함수를 사용합니다.

splice & slice

splice 함수는 배열에서 특정 항목을 제거할 때 사용합니다.

slice 는 splice 랑 조금 비슷하지만 배열을 잘라낼 때 사용하는데, 중요한 점은 기존의 배열은 건들이지 않는 다는 것입니다.

shift & pop

shift 는 첫번째 원소를 배열에서 추출해줍니다. 추출하는 과정에서 배열에서 해당 원소는 사라집니다.

pop 은 맨 마지막 항목을 추출합니다. 추출하는 과정에서 배열에서 해당 원소는 사라집니다.

concat

concat 은 여러개의 배열을 하나의 배열로 합쳐준다.

객체 생성자

function User(type, name, age) {
  this.type = type;
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log(this.name);
  };
}

const user1 = new User('Song', '민혁', '26');
const user2 = new User('Kang', '동원', '25');

user1.sayHi();
user2.sayHi();

클래스

ES6에서부터는 class라는 문법이 추가되었는데요, 우리가 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현 할 수 있게 해준다. 추가적으로 상속도 훨씬 쉽게 해줄 수 있다.

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
}

class Dog extends Animal {
  constructor(name, sound) {
    super('개', name, sound);
  }
}

class Cat extends Animal {
  constructor(name, sound) {
    super('고양이', name, sound);
  }
}

const dog = new Dog('멍멍이', '멍멍');
const dog2 = new Dog('왈왈이', '왈왈');
const cat = new Cat('야옹이', '야옹');
const cat2 = new Cat('냐옹이', '냐옹');

dog.say();
dog2.say();
cat.say();
cat2.say();