Modern JS - 유용한 JS 문법

* 기본 파라미터 사용법

function calculateCircleArea(r) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // NaN

- 이렇게 사용을 하면 Not a Number, undefined 가 나와버립니다.

// function 사용
function calculateCircleArea(r = 1) {
  return Math.PI * r * r;
}

const area = calculateCircleArea();
console.log(area); // 3.141592653589793

// arrow function 사용
const calculateCircleArea = (r=1) => Math.PI * r * r;

const area = calculateCircleArea();
console.log(area); // 3.141592653589793
==> 결과는 동일합니다.

- 위와 같은 방식으로 ES6 부터 사용이 가능합니다.

 

* 효율적인 조건문 사용법

- 여러 값 중 하나가 포함되는지 확인이 필요할 경우

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

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

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

console.log(isAnimal('개')); // true
console.log(isAnimal('노트북')); // false

 

* 값에 따라 다른 결과물을 반환시

- 일반적으로 if~else 문을 사용하지만 switch,case문이나 다른 깔끔하게 작성 가능한 코드들이 있습니다.

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

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

// 함수와 객체를 사용해서 작성하는 방법
function getSound(animal) {
  const sounds = {
    개: '멍멍!',
    고양이: '야옹~',
    참새: '짹짹',
    비둘기: '구구 구 구'
  };
  return sounds[animal] || '...?';
}

console.log(getSound('개')); // 멍멍!
console.log(getSound('비둘기')); // 구구 구 구

 

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

- 함수의 파라미터에 기본 값을 주는 방법

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}
print(object);
// 1
// 2

const object = { a: 1 };
const { a, b = 2 } = object;
console.log(a); // 1
console.log(b); // 2

 

* 깊은 값 비구조화 할당

- 객체 선언 시 동일의미 [key 이름으로 선언된 값이 존재하면, 바로 매칭시켜주는 문법, ES6의  object-shorthand 문법이라고 부릅니다]

const extracted = {
  name: name,
  languages: languages,
  value: value
}

const extracted = {
  name,
  languages,
  value
}

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

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

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

 

* spread, rest 문법 (ES6에서 도입되었습니다)

- spread: 객체나 배열을 펼칠 수 있습니다[기존의 객체, 배열은 건드리지 않으면서 사용이 가능합니다]

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

- ' ... ' 문자가 바로 spread 연산자 입니다.

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

- 배열에서도 사용이 가능합니다.

 

- rest: 객체, 배열, 함수의 파라미터에서 사용이 가능합니다.

const purpleCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'purple'
};

const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);

- 배열에서의 rest

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

const [one, ...rest] = numbers;

console.log(one);
console.log(rest);

- 파라미터의 갯수가 애매한 경우 사용방법

function sum(...rest) {
  return rest;
}
const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);

 

* JS scope에 대한 이해

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

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

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

const value = 'hello!';

function myFunction() {
  console.log('myFunction: ');
  console.log(value);
}

function otherFunction() {
  console.log('otherFunction: ');
  const value = 'bye!';
  console.log(value);
}

myFunction();
otherFunction();

console.log('global scope: ');
console.log(value);

==> 결과: 
myFunction:
hello!
otherFunction:
bye!
global scope:
hello!

- 코드 맨 윗줄에서 선언된 value: 전역 scope(어디서든지 사용이 가능합니다)

- 함수내부에서 선언한 변수는 함수안에서만 사용이 가능합니다.

- let 또한 마찬가지로 기능이 동작합니다.

 

- var의 경우? function socpe로 선언이 되며, if 문 블록 내부에서 선언한 value 값이 블록 밖의 value에도 영향을 미치게 됩니다.

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

==> 결과:
block scope:
world
function scope:
world
global scope:
hello!

 

* Hoisting

- 자바스크립트에서 아직 선언되지 않은 함수/변수를 "끌어올려서" 사용 할 수 있는 자바스크립트 작동 방식을 의미합니다.

myFunction();

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

==> 자바스크립트 엔진에서 코드를 해석하는 방식
function myFunction() {
  console.log('hello world!');
}

myFunction();

 - myFunction() 함수를 선언하기 전에, 호출을 하였습니다.

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

==> 결과: undefined

// 자바스크립트 엔진에서 코드를 해석하는 방식
var number;
console.log(number);
number = 2;

- const와 let은 hoisting이 발생하지 않고, 에러가 발생합니다.

 

가능한 var은 지양하고, let과 const를 사용합시다.