07_유용한 JS지식

이번에는 여러가지 작업하는데 유용한 문법들을 공부해보겠다

 

삼항연산자

 

이전 글에서 잠깐 다룬적 있는데,

 

조건 ? A : B

 

꼴의 문법으로 조건이 충족할때는 A, 그렇지 않을때는 B를 실행하여 굳이 if else문을 사용하지 않아도 된다.

 

 

 

Truthy and Falsy

 

False와 같은 값들이란 의미로

 

undefined

null

0

''

NaN

false

 

값들이 있다 이 이의외 값은 모두 Truthy 즉, 참으로 구분되게 된다.

 

특히 null채킹을 할때

 

function print(person) {
  if ( !person ){
    return;
  }
  console.log(person.name);
}
const person = {
  name: "mingyu"
};

print(person); //mingyu

처럼 false 값이 들어오면 오류대신 그냥 빈값 반환을 하는것으로 알 수 있다.

 

그렇다면 truthy한 값을 true로 바꾸려면 어떻게 해야할까?

단순하게 !를 두번 쓰면된다.

 

 

let value = 3;
console.log(value); //3
console.log(!value) //false
console.log(!!value); //true

즉, 위처럼 나타나게 된다. 물론 if문 안에 value를 그대로 써도 작동하긴 한다.

 

 

단축평가 논리 계산법

 

const dog = {
  name : '멍멍이'
};

function getName(animal){
  if (animal){
    return animal.name;
  }
  return undefined;
}


const name = getName();
console.log(name)

위 코드는 dog객체를 입력받아서 이름을 출력하는 단순코드인데, falthy한 값이 오면 return하는 코드이다. 위코드를 간단히 만들 수 있는 방법이 있다.

 

먼저 아래 코드를 이해해보자.

 

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

쉽게 생각해서 &&는 앞에 오는것이 false면 뒤에있는걸 검사할 필요가 없기 때문에 앞의것의 값을 가지게 되고 앞이 true면 뒤에있는것도 검사를 해봐야 하기에 가져가는 것이다.

 

 

console.log(true || 'hello');  //true
console.log(false || 'hello'); //hello
console.log('hello' || 'bye'); //hello
console.log(null || 'hello');  //hello
console.log(undefined || 'hello') //hello

 

or는 반대로 앞에것이 false면 뒤에것을 검사해 보아야 하지만, 앞에것이 true면 검사할 필요가 없다. 

즉, and 연산자와 반대라고 생각하면 될 것 같다. 이를 이용해서 위 코드를 줄인다면

 

const dog = {
  name : '멍멍이'
};

function getName(animal){
  return animal && animal.name;
}


const name = getName();
console.log(name)

 

위 코드처럼 줄일 수 있을 것이다.

 

함수의 기본 파라미터

 

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

const area = calculateCircleArea(4);
console.log(area);

const area2 = calculateCircleArea();
console.log(area2);

함수에 인자를 넣어주지 않았을때 기본값을 지정하는 방법이다.

 

위에 내용들을 간단히 종합해서 아래와같이 좀 더 보기같은 코드를 짤 수 있다.

 

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

객체의 key,value값을 이용한건데 나는 파이썬을 이용하여 공부해와서 딕셔너리 개념과 약간 유사하다고 느꼈다.

 

비 구조화 할당(구조 분해)

 

말 그대로 객체의 구조를 분해해서 할당할 수 있다는 것이다. 간단한 예시를 먼저 보자

 

const object = { a : 1};

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

a,b 값이 정상적으로 입력된 것을 알 수 있다.

 

const animal ={
  name : '멍멍이',
  type : '개'
};

const { name : nickname} = animal;

console.log(nickname); //멍멍이

이를 활용하여 이름도 바꿀 수 있는데, nickname을 조회해도 멍멍이가 나오는것을 알 수있다.

주의할 점은 이렇게 한다고 animal의 구조가 바뀌는건 아니란 것이다.

 

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

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

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

깊은 곳에서 따올때는 위처럼 비구조화 할당을 여러번해도 되지만

 

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

const {
  state:{
    information:{
      name,languages:[firstLang,secondLang]
    }
  },
  value
} = deepObject

const extracted = {
  name,
  firstLang,secondLang,
  value
};

console.log(extracted);

위 코드처럼 비구조화 할당 한번에 할수도 있다. 하지만 오히려 이경우 한번에 비구조화 할당을 하는것이 더 지저분한 느낌이 든다.. 그때그때 조금 더 깔끔해 보이는 것으로 하면 될 것 같다.

 

 

 

배열 비구조화 할당

 

배열에도 비구조화 할당을 적용할 수 있다.

 

const array = [1];


const [one,two =2] = array;

console.log(one); //1
console.log(two); //2

console.log(array) //[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 purplecuteslime = cuteslime;
purplecuteslime.color = 'purple';

위처럼 purple을 넣어주게 되면 결국 purplecuteslime과 cuteslime이 가르키는 객체가 같아져서 두 객체 모두에 purple이 추가되게 된다.

 

rest

 

객체,배열,함수의 파라미터에서 사용할 수 있다.

해당 객체에서 남는부분을 빼오게 된다.

 

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

const {color, ...cuteslime} = purplecuteslime;
console.log(color);//purple
console.log(cuteslime);
//{name: "슬라임", attribute: "cute"}


const {attribute, ...slime} = cuteslime;
console.log(slime)
//{name: "슬라임"}

spread와 약간 반대의 개념이라 생각할 수도 있을것 같다.

 

배열에서도 사용할 수 있다.

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

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

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

 

물론 함수에서도 사용할 수 있다. 함수의 인자가 정해지지 않은 경우에 유효하며 이전 글에서의 reduce내장함수를 곁들이면 조금 더 이쁜 코드를 작성할 수 있다.

 

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

console.log(sum(1,2,3,4,5,6,7,8)) //36

const numbers = [1,2,3,4,5,6,7,8];
console.log(sum(...numbers))

2번재 코드블럭처럼 넣어줄 수도 있다.

 

 

 

scope

 

global scope, 함수형 scope등이 있다.

 

프로그래밍 언어지식이 어느정도 있다면 전역변수와 지역변수 개념이라고 생각하면 될 것 같다.

 

const value = "hello";

function myFunction() {
  console.log("my Functions : ");
  console.log(value);
}

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

myFunction();
otherFunction();

console.log("global scope :", value);

즉, 함수 안에서 설정한 값은 그 안에서만 유효하다.

 

 

 

단 헷갈릴 수 있는 개념이 있는데, var는 함수단위로, let은 블록 단위로 유효성이 존재하게 된다. 그렇기 때문에 var보단 let이 사용이 더 권장된다. 이전에 다루었던 hoisting과도 연관되어 있다.