[JavaScript] 모같코 2주차(1)

지난주 복습

퀴즈

22살이 아닌사람 골라서 이름과 나이만 출력하도록 하기
if 문 제외 filter, map, reduce함수 사용

const studentsArray = [
  {
    id: 1,
    name: "이재준",
    age: 23
  },
  {
    id: 2,
    name: "양지훈",
    age: 26
  },
  {
    id: 3,
    name: "신지인",
    age: 22
  },
  {
    id: 4,
    name: "김내림",
    age: 22
  },
  {
    id: 5,
    name: "변영신",
    age: 22
  },
  {
    id: 6,
    name: "김서영",
    age: 22
  }
];
const print = array => {
    //map
    //array.map(p => p.age !== 22 && console.log(p.name, p.age));

    //filter
    //const student = array.filter(stu => stu.age !== 22);
    //student.forEach(stu => {console.log(stu.name)});

    //array.filter(stu => stu.age !==22 && console.log(stu.name, stu.age));

    //reduce
    //array.reduce((acc, current) => {current.age !== 22 ? console.log(current.name, current.age) : 0 } ,0);
    
    //array.reduce((acc, current) => {current.age !== 22 && console.log(current.name, current.age)}, 0);
};
print(studentsArray);

어렵다

1. 단축평가논리계산법

true && true = true
true && false = false
true || false = true
false || false = false

뒤에서 더 자세하게 나온다.

2. 프로토타입과 클래스

class Animal{
	constructor(type, name, sound){
    	this.type = type;
        this.name = name;
        this.sound = sound;
    }
	say(){
    	console.log(this.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 cat = new Cat('야옹이', '야옹');

dog.say(); //멍멍
cat.say(); //야옹

extends : 상속 키워드
constructor내의 super()함수가 상속받은 클래스의 생성자 가르킴

class Food{
	constructor(name){
    	this.name = name;
        this.brands = [];
    }
    addBrand(brand){
    	this.brands.push(brand)
    }
    print(){
    	console.log(`${this.name}을/를 파는 음식점들 : `)
        console.lgo(this.brands.oin(', '));
    }
}
const pizza = new Food('피자');
pizza.addBrand('피자헛');
pizza.addBrand('도미노 피자');
pizza.print(); 
//피자을/를 파는 음식점들 :
피자헛, 도미노 피자

3. 삼항 연산자

조건 ? true일때 : false일때

4. Truthy and Falsy

function print(persion){
	console.log(person.name);
}
const person = {
	name: 'sin'
};
print(person);

위의 코드에서 문제
1)person이 null일 경우 => const person = null;
2)person이 undefined인 경우 => print();

function print(person){
	if(person === undefined || person === null){
    	console.log('person이없음');
        return;
    }
    console.log(person.name);
}
const person = null;
print(person)

이렇게 해결가능, 이때 더 !Falsy를 이용하면 더 축약가능

function print(person) {
  if (!person) {
    console.log('person이 없네요');
    return;
  }
  console.log(person.name);
}
const person = null;
print(person);

undefined
null
0
' '
NaN

다섯 개의 값은 모두 Falsy한 값 !(Falsy한 값) === true
NaN은 Not A Number

const notnum = parseInt('야호~', 10); //뒤의 10은 10진법 의미
console.log(notnum); //NaN

5개의 Falsy한 값 외의 모든 값은 True

5. 단축 평가 논리 계산법

논리 연산자를 더 유용하게 사용

1) &&

const dog = {
  name: '멍멍이'
};
function getName(animal) {
  if (animal) {
    return animal.name;
  }
  return undefined;
}
const name = getName();
console.log(name);

위와 같은 코드는 animal값이 주어지지 않아도 에러가 발생하지 않음
&&를 이용해 더 단축된 코드 짤 수 있음

const dog = {
  name: '멍멍이'
};
function getName(animal) {
  return animal && animal.name;
}
const name = getName();
console.log(name); // undefined
const name2 = getName(dog);
console.log(name2); //멍멍이

A && B에서 A가 Truthy한 값이면 B가 결과값, A가 Falsy면 A가 결과값

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

2) ||

const namelessDog = {
  name: ''
};
function getName(animal) {
  const name = animal && animal.name; //둘 중 하나 false라면 false
  return name || '이름이 없는 동물입니다.'; //name false면 뒤 출력
}
const name = getName(namelessDog);
console.log(name); // 이름이 없는 동물입니다.

A || B에서 A가 Truthy한 값이면 A가 결과값, A가 Falsy면 B가 결과값

6. 함수의 기본 파라미터

function calculateCircleArea(r){
	return Math.PI * r * r;
}
const area = calculateCircleArea();
console.log(area); // NaN

r값을 넣어주지 않으면 NAN 결과값 나옴

fucntion calculateCircleArea(r = 1){
	return Math.PI * r * r;
}
const area = calculateCircleArea();
console.log(area);

이렇게 함수의 기본 파리미터 설정 가능

const calculateCircleArea = (r = 1) => MAth.PI * r * r;

화살표 함수에서도 이용 가능

7. 조건문 더 스마트하게 쓰기

1) 특정 값이 여러 값 중 하나인지 확인해야 할 때

function isAnimal(text) {
  return (
    text === '고양이' || text === '개' || text === '거북이' || text === '너구리'
  );
}
console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

위의 코드를

function isAnimal(name) {
  const animals = ['고양이', '개', '거북이', '너구리'];
  return animals.includes(name);
}
//const isAnimal = name => ['고양이', '개', '거북이', '너구리'].includes(name); 이것도 가능
console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

이렇게 쉽게 고칠 수 있다.

2) 값에 따라 다른 결과물을 반환 해야 할 때

function getSound(animal) {
  if (animal === '개') return '멍멍!';
  if (animal === '고양이') return '야옹~';
  if (animal === '참새') return '짹짹';
  if (animal === '비둘기') return '구구 구 구';
  return '...?';
}
console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

위의 코드를

06. 비구조화 할당 (구조 분해) 문법
07. spread 와 rest 문법
08. scope 의 이해
3장. 자바스크립트에서 비동기 처리 다루기
01. Promise
02. async/await
4장. HTML 과 JavaScript 연동하기
01. 카운터
02. 모달
마무리
참고 문헌
 수정 요청하기
05. 조건문 더 스마트하게 쓰기
이번에는 조건문을 조금 더 스마트하게 쓰는 방법에 대해서 알아보겠습니다.

특정 값이 여러 값중 하나인지 확인해야 할 때
만약, 여러분이 특정 값이 여러 값 중 하나인지 확인을 해야 하는 상황이 생겼다고 해봅시다.

그러면, 이러한 시도를 할 수도 있을 것입니다.

function isAnimal(text) {
  return (
    text === '고양이' || text === '개' || text === '거북이' || text === '너구리'
  );
}

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false
비교해야 할 값이 많아질 수록 코드는 길어집니다.

이러한 코드를 간단하게 해결 할 수 있는방법은, 배열을 만들고 배열의 includes 함수를 사용하는 것 입니다.

function isAnimal(name) {
  const animals = ['고양이', '개', '거북이', '너구리'];
  return animals.includes(name);
}

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false
어떤가요? 훨씬 깔끔하죠?

원한다면, animals 배열을 선언하는 것도 생략하고, 화살표 함수로 작성할 수도 있습니다.

const isAnimal = name => ['고양이', '개', '거북이', '너구리'].includes(name);

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false
물론, 코드가 짧다고 해서 무조건 좋은것은 아닙니다. 단, 코드가 짧으면서도 읽었을 때 어떤 역할을 하는지 잘 이해가 될 수 있어야 비로소 좋은 코드 입니다.

값에 따라 다른 결과물을 반환 해야 할 때
이번에는 주어진 값에 따라 다른 결과물을 반환해야 할 때 사용 할 수 있는 유용한 팁을 알아보겠습니다.

예를 들어서, 동물 이름을 받아오면, 동물의 소리를 반환하는 함수를 만들고 싶다고 가정해보겠습니다.

function getSound(animal) {
  if (animal === '개') return '멍멍!';
  if (animal === '고양이') return '야옹~';
  if (animal === '참새') return '짹짹';
  if (animal === '비둘기') return '구구 구 구';
  return '...?';
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구
if 문의 코드 블록이 한줄짜리라면 { } 를 생략 할 수도 있습니다.

만약 여기서 우리가 배운 switch case 문을 사용하여 다음과 같이 구현 할 수도 있습니다.

function getSound(animal) {
  switch (animal) {
    case '개':
      return '멍멍!';
    case '고양이':
      return '야옹~';
    case '참새':
      return '짹짹';
    case '비둘기':
      return '구구 구 구';
    default:
      return '...?';
  }
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구
참고로 switch 문에서 return 을 할 때에는 break 를 생략해도 됩니다.

우리가 방금 구현한 코드는 큰 문제는 없지만, 이걸 깔끔하게 해결 할 방법을 알고 나면 좀 맘에 들지 않는 코드의 형태입니다.

이 코드를 더욱 깔끔하게 작성하는 방법을 알려드리겠습니다.

function getSound(animal) {
  const sounds = {
    개: '멍멍!',
    고양이: '야옹~',
    참새: '짹짹',
    비둘기: '구구 구 구'
  };
  return sounds[animal] || '...?';
}
console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

이렇게 가능

8. 비구조화 할당(구조분해) 문법

1) 비구조화 할당시 기본값 설정

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}
//const { a, b = 2 } = object; 함수에서만 가능한 것 아님
print(object);
// 1
// 2

비구조화 할당에서 b값이 주어지지 않았을 때 초기값 설정 가능

2) 비구조화 할당시 이름 바꾸기

const animal = {
	name: '멍멍이',
    type: '개',
};
const nickname = animal.name;
console.log(nickname);
//const {name: nickname} = animal
//console.log(nickname); 으로 표현 가능

3) 배열 비구조화 할당

const array = [1, 2];
const [one, two] = array;
console.log(one);
console.log(two);

const array2 = [1];
const [one, two = 2] = array2;
console.log(one);
console.log(two);

8. spread와 rest

1) spread

const slime = {
  name: '슬라임'
};
const cuteSlime = {
  ...slime,
  attribute: 'cute'
};
const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};
console.log(slime); //{ name: '슬라임' }
console.log(cuteSlime); //{ name: '슬라임', attribute: 'cute' }
console.log(purpleCuteSlime); //{ name: '슬라임', attribute: 'cute', color: 'purple' }

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals); //["개", "고양이", "참새"]
console.log(anotherAnimals); //["개", "고양이", 참새", "비둘기"

4)rest

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};
const { color, ...rest } = purpleCuteSlime; //꼭 rest일 필요 없음
console.log(color); //purple
console.log(rest); //{ name: '슬라임', attribute: 'cute' }

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};
const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);
const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);

결과

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one);
console.log(rest);

결과

9. scope의 이해

scope 이해

var value = 'hello!';
function myFunction() {
  var value = 'bye!';
  if (true) {
    var value = 'world';
    console.log('block scope: ');
    console.log(value);
  }
  console.log('function scope: ');
  console.log(value);
}
myFunction();
console.log('global scope: ');
console.log(value);

결과

var은 Function Scope로 선언이 되므로, if문 블록 내부에서 선언한 value값이 블록 밖의 value에도 영향을 미침

2) Hoisting이해

myFunction();

function myFunction() {
  console.log('hello world!');
}

에러안남, 자바스크립트 엔진이 위 코드를 해석하는 과정에서 아래와 같이 받아드림.

function myFunction() {
  console.log('hello world!');
}

myFunction();

이러한 현상이 Hoisting

console.log(number);

위 코드는 에러

console.log(number);
var number = 2;

위 코드는 undefined 출력
왜냐하면 자바스크립트 엔진이 해석할 때는 아래와 같음

var number;
console.log(number);
number = 2;

const와 let은 hoisting이 발생하지 않고, 에러가 발생함