Java Script :: 문법(2)

📝 조건문 더 스마트하게 쓰기

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

💬 includes 함수 사용

// function 함수
function isAnimal(name) {
  const animals = ['고양이', '강아지', '사자', '호랑이'];
  return animals.includes(name);
}

// 화살표 함수 
const isAnimal = name => ['고양이', '강아지', '사자', '호랑이'].includes(name);

console.log(isAnimal('강아지'));    // true
console.log(isAnimal('노트북')); // false

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

💬 배열 활용

function getSound(animal) {
  const sounds = {
    강아지: '멍멍',
    고양이: '야옹',
    참새: '짹짹'
  };
  return sounds[animal] || '...?';
}

console.log(getSound('강아지')); // 멍멍
console.log(getSound('참새'));  // 짹쨱

💬 객체 활용

function getSound(animal) {
  const tasks = {
    강아지() {
      console.log('멍멍');
    },
    고양이() {
      console.log('고양이');
    },
    참새() {
      console.log('짹짹');
    }
  };
  if (!tasks[animal]) {
    console.log('...?');
    return;
  }
  tasks[animal]();
}

getSound('강아지');  // 멍멍
getSound('참새');   // 짹쨱

📝 비구조화 할당 문법

💬 객체 내의 값 추출하여 변/상수로 바로 선언 가능

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a);  // 1
console.log(b);  // 2

💬 함수의 파라미터에서의 비구조화 할당

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

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

const object = { a: 1 };

// 파라미터에서 설정 시, 
function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

// 파라미터에서 설정하지 않을 시, 
const { a, b = 2 } = object;

console.log(a);  // 1
console.log(b);  // 2

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

💬 : 문자 사용

const animal = {
  name: '산체',
  type: '강아지'
};

const nickname = animal.name;
// const { name: nickname } = animal

console.log(nickname);   // 강아지

위 코드의 주석처리는 'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미

💡 배열 비구조화 할당

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

💡 깊은 값 비구조화 할당

💬 비구조화 할당 문법 2번 사용

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {  // key 이름으로 선언된 값이 존재하다면, 바로 매칭
  name,              // name: name,
  languages,         // languages: languages,
  value              // value: value
}; 

console.log(extracted); 
// {name: "velopert", languages: Array[3], value: 5}

💬 비구조화 할당 문법 1번 사용

...

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);
// {name: "velopert", languages: Array[3], value: 5}

⚠ name, languages, value 값만 추출되며, state, information 값은 따로 추출되지 않음

📝 spread 와 rest

💡 spread 문법

💬 객체 또는 배열을 펼칠 때 사용

💬 기존의 것을 건드리지 않고, 새로운 객체를 만들 때 유용

// 기본 코드
const dog = {
  name: '우유'
};

const mildDog = {
  name: '우유',
  personality: 'mild'
};

const whiteMildDog = {
  name: '우유',
  personality: 'mild',
  color: 'white'
};

// spread 연산자 사용
const dog = {
  name: '우유'
};

const mildDog = {
  ...dog,
  personality: 'mild'
};

const whiteMildDog = {
  ...mildDog,
  color: 'white'
};

console.log(dog);            // Object {name: "우유"}
console.log(mildDog);        // Object {name: "우유", personality: "mild"}
console.log(whiteMildDog);  // Object {name: "우유", personality: "mild", color: "white"}

💬 배열에서의 사용(여러 번 사용 가능)

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

// 여러 번 사용
const someAnimals = [...animals, '비둘기', ...animals];
console.log(someAnimals);   // ["강아지", "고양이", "참새", "비둘기", "강아지", "고양이", "참새"]

💬 함수 인자와 spread

파라미터 : 함수에서 값을 읽을 때의 그 값

인자 : 함수에서 값을 넣어줄 때의 그 값

const myFunction(a) { // 여기서 a : 파라미터
  console.log(a);     // 여기서 a : 인자
}

myFunction('Hello, World'); // 여기서 'Hello, World' : 인자

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6];
// 일일이 대입
const result = sum(
  numbers[0],
  numbers[1],
  numbers[2],
  numbers[3],
  numbers[4],
  numbers[5]
);

// spread 사용
const result = sum(...numbers);

console.log(result);

💡 rest 문법

💬 객체, 배열, 그리고 함수의 파라미터에서 사용

⚠ 추출한 값의 이름이 꼭 rest일 필요X

💬 객체에서의 rest

const whiteMildDog = {
  name: '우유',
  personality: 'mild',
  color: 'white'
};

const { color, ...mildDog } = whiteMildDog;  // 비구조화 할당 문법과 함께 사용
console.log(color);  // white 
console.log(mildDog);   // Object {name: "우유", personality: "mild"}

💬 배열에서의 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;  // 배열 비구조화 할당

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

const [..rest, last] = numbers;  // error

💬 함수 파라미터에서의 rest

// 함수 사용
function sum(a, b, c, d, e, f, g) {  // 7개의 파라미터
  let sum = 0;
  if (a) sum += a;
  if (b) sum += b;
  if (c) sum += c;
  if (d) sum += d;
  if (e) sum += e;
  if (f) sum += f;
  if (g) sum += g;
  return sum;
}


// rest 파라미터 사용 
function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3, 4, 5, 6);  // 6개의 인자
console.log(result);  // [1, 2, 3, 4, 5, 6]

sum 함수에서 매개변수 값이 맞지 않아 g 값 = undefined 이기 때문에, 결과는 NaN 가 되어버려 함수에서 하나하나 유효한 값인지 확인해야 함 => rest 파라미터가 유용

📝 Scope

💡 Scope

💬 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위

💡 종류

💬 Global (전역) Scope: 코드의 모든 범위에서 사용 가능

💬 Function (함수) Scope: 함수 안에서만 사용 가능

💬 Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용 가능

Reference

벨로퍼트와 함께하는 모던 자바스크립트