[8주차] 4. Javascript 유용한 문법(2)

Javascript 유용한 문법

단축 평가 논리 계산법(Short-circuit evaluation)

• 논리 연산자를 사용해서 코드를 더 짧게 쓰는 것을 의미
• 논리 연산자 사용 시 무조건 true 혹은 false 값을 사용하지 않아도 됨
• 리액트 사용하는 경우 이 문법을 사용해서 조건부 랜더링을 할 수 있다.
• falsy한 값들 : null, undefined, ‘ ‘, 0, NaN

&&(AND 연산자)

• 주로 특정 값이 유효할 때만 어떤 값을 조회해야 되는 상황에 사용(ex)값이 객체일 수도 있지만 객체가 아닐 수도 있는 상황)
• &&의 왼쪽에 위치한 값이 true나 truthy한 값이면 오른 쪽에 위치하는 값이 연산 결과가 된다.
• && 왼쪽에 위치한 값이 false혹은 falsy한 값일시 연산 결과 값은 &&의 왼쪽에 위치한 값이다.

||(OR 연산자)

• 어떤 값이 falsy하다면 대체로 사용할 값을 지정해줄 때 매우 유용
• 주로 어떠한 값이 없을 때 그거 대신에 이거 사용할래 상황에서 쓸 때 굉장히 유용
• ||의 왼쪽에 위치한 값이 true나 truthy한 값이면 왼 쪽에 위치하는 값이 연산 결과가 된다.
• ||의 왼쪽에 위치한 값이 false나 falsy한 값이면 오른 쪽에 위치하는 값이 연산 결과가 된다.

---

함수의 기본 파라미터

• 함수로 호출 시 원래 넣어야 할 파라미터를 넣지 않았을 때 기본 값으로 사용할 값을 지정하는 문법
• 파라미터를 넣어줘야 하는 함수인데 넣어주지 않았을 때 어떤 값을 기본값으로 만드는 것
• 단축 평가 논리 계산법 활용
  • || (OR 연산자) 사용 : 변수 선언 = 파라미터 || 파라미터 넣지 않았을 때의 기본값; 로 변수 선언 후 그 선언한 변수를 식에 넣어서 적용
• ES6 부터 방법
  • = 사용 : 함수의 괄호 안에 파라미터 = 파라미터 넣지 않았을 때의 기본값 형식으로 작성
• 화살표 함수에서도 사용 가능

---

조건문 더 스마트하게 쓰는 방법

특정 값이 여러 값 중 하나인지 확인해야 하는 상황일 때

• 변수선언 = [비교해주려는 값들];
• includes 배열 내장 함수 사용 : return 변수이름.includes(parameter);로 지정 -> 변수에 들어있는 배열 안에 parameter가 존재한다면 return 값은 true가 되고 존재하지 않는다면 false가 됨
• 화살표 함수 사용시 parameter => [비교해주려는 값들].includes(parameter); 로도 작성 가능

---

[조건에 따라 해야하는 작업이 달라질 때 객체 활용]

주어진 값에 따라 다른 결과를 반환해야 하는 경우

• 특정한 값일 때 그거에 맞는 특정 결과 반환
• 어떤 값을 넣어주느냐에 따라 반환하는 경우 객체 활용하는 것이 편하다.
• key:value 형태로 작성(쉼표로 구분)

function 함수이름(parameter) {
  객체 선언 = {특정값: 특정 결과};
  return 객체이름[parameter] || parameter가 객체 안에 없을 때 반환할 값;
}

특정 값이 무엇으로 주어지느냐에 따라 다른 코드를 실행하고 싶은 경우

• 객체 활용
• key : value 형태로 작성하되 value 위치에 특정 값에 따른 코드를 작성하면 됨’
• value 값으로 익명함수 function() {}(추천안함), value에 화살표 함수()=>{}, method 만들듯이 선언(){}등 설정 가능
• key: value 다 작성 후 parameter값과 key가 동일하지 않을 경우
  • 객체의 바로 밖에서 아래 코드 작성
    

    변수선언 = 객체이름[parameter];
    if(!변수이름) {parameter값과 key가 동일하지 않을 경우 도출할 내용}
    변수이름();​

---

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

• 코드 깔끔하게 작성할 때 유용
• 너무 과하게 사용하지 않기.
• 중괄호로 작성
• 객체에서 사용
• 함수의 파라미터에서도 사용 가능(값이 없을 때 기본값 설정하려면 함수의 괄호 안에 중괄호 d안에서 기본값 지정해주는 paramer = 기본값 형태로 작성)
• 비구조화 할당 시 기본값 지정해주고 싶을 때 = 사용

이름 바꾸는 방법

• const { 원래 key이름 : 새로 짓고 싶은 이름 } = 객체이름.원래key이름;
• 기존 객체가 갖고있던 key 이름이 바뀌는 것은 아니다.

배열 비구조화 할당

• 배열에도 비구조화 할당 가능
• ex)
  

  const array = [ 1, 2 ];
  const[one, two] = array;
  // 1은 one으로 2는 two로 꺼내지게 됨​

• 객체 비구조화 할당 처럼 기본 값 넣어주기 가능(=사용)

객체의 깊숙한 곳(여러 번 중첨)에 있는 값 꺼내기

• key : value가 많이 중첩되어 있는 상황에서 특정 key만 꺼내는 방법
• 비구조화 할당 여러 번 사용(아래 코드 반복)
• 상위 key 없을 경우 객체이름만 작성
  

  const{꺼내려는 key 값들} = 객체이름.맨처음key.중첩된key(차례대로 자신의 바로 상위 key까지 .으로 이어서 모두 작성); // 반복
  새로운 객체 선언 = {꺼내려는 key 값들};​

• 만약에 특정 개체를 만들 때 특정 key 이름으로 선언된 값이 이미 있다면 value 값을 입력하는 것을 생략해줘도 됨
• 비구조화 할당 한 번으로 여러 값 다 빼오기
  • 코드가 더러워져서 많이 사용하지는 않는다.
  • 빼올 key의 상위 key들이 별로 없으면 괜찮다.
    

    const {
      맨처음key : {
         바로 상위 key들 모두 작성 : {
         	꺼내올 key들 이름(,로 구분)
        }
      }
    }=객체이름;​

  • key:[key 지정해줄 배열 값들] 객체 안에서의 value로 배열이 할당되어 있는 key의 경우 배열 안 각 값에 대해 key값을 설정해줄 수도 있음

---

spread와 rest

• ES6부터 도입

spread 연산자

• spread : 펼치다, 퍼뜨리다
• 특정 객체나 배열 안에 다른 객체나 배열을 퍼뜨리는 역할
• 이 문법 사용시 객체 혹은 배열을 펼칠 수 있다.

객체에서의 사용

• 기존에 만들었던 객체를 참고해서 새로운 객체 만들고 싶을 때 사용
• 새로운 객체안에 기존 객체를 복사하고 거기에 어떤 값을 추가해서 넣어줄 때 사용
• spread 연산자로 불러온 기존 객체 이후로 그 기존 객체의 key와 동일하되 value 값을 다르게 넣어 작성시 덮어쓸 수 있다. 하지만 spread 연산자보다 앞에 쓰면 덮어쓰지 못한다.
• …복사하고픈 key:value가 위치한 객체이름 -> 기존에 만들었던 객체 안에 있던 key:value를 복사해서 쓰고 싶을 때 새로운 객체 안에다가 … 복사하고픈 key:value가 위치한 객체이름로 작성
  • const 새로운 객체이름 = 복사하고픈 key:value가 위치한 객체이름 형식으로 작성 시 모든 객체의 내용도 동일해지고 비교 연산자로 같냐고 물어봤을 때 다 같다고 인식하게 됨

배열에서의 사용

• 기존의 배열을 건드리지 않으면서 새로운 배열 안에 기존 배열 내용들을 넣을 수 있다.
• 기존에 있던 배열 안에 있는 값들을 새로운 배열 안에 넣어 주고 싶을 때도 대괄호 안에 …기존배열이름 작성하여 spread 연산자 적용 가능
• const 새로운 배열 = 기존배열이름.concat(‘기존 배열 안 값들 제외한 추가할 값’)과 동일하지만 spread 연산자가 어떤 역할을 하는지 표현이 더 쉬움
• spread 연산자가 위치한 곳에 기존 배열이 갖고 있던 값들이 오는 것이므로 똑 같은 배열을 spread 연산자로 여러 번 가져오게 되고 그 값들을 spread 연산자가 위치한 곳 그대로 여러번 가져온다.

함수 인자에서의 사용

• 파라미터는 함수에서 받아오는 값이고 인자는 함수 사용할 때 넣어주는 값
  

  const 새로운 변수 = [함수로 계산하고자 하는 값들]
  const 또 새로운 변수 = 사용할 함수 이름(…앞서 작성한 새로운변수이름);​

---

rest

• 퍼져있는 것들을 다시 모아오는 역할
• 생김새는 spread와 …으로 비슷하지만 역할이 다름
• 객체, 배열, 함수의 파라미터에서 사용 가능
• …뒤에 꼭 rest가 아닌 지정해주고 싶은 이름을 써도 된다.

객체에서의 사용

• 객체 선언 후 const{객체에 위치한 key, …rest}=객체이름; 으로 객체에 비구조화 할당을 하면서 …rest를 해준 것은 rest 값에 비구조화 할당하려 중괄호 안에 직접 작성한 key들을 제외한 기존 객체 안에 위치한 모든 key들이 할당된다는 의미이다.

배열에서의 사용

• 배열 선언 후 const[배열에 위치한 값을 할당해주려는 이름, …rest] = 배열이름; 으로 배열에 비구조화 할당하면서 …rest를 한 것은 비구조화 할당하려 중괄호 안에 직접 작성한 이름들에 배열 값 순서대로 할당된 다음 그것들을 제외한 기존 배열 안에 위치한 모든 배열 안 값들을 rest 값으로 할당한다는 의미이다.
• 배열에서의 rest는 맨 마지막에 와야 함

함수 파라미터에서의 사용

• 함수 선언 시 괄호 안에 parameter로 …rest를 선언할 시 후에 함수 실행시 작성된 인자 값들을 하나의 배열로 가져오게 된다.
• return 함수 안에서 배열로 가져온 rest 이름.배열내장함수 로 결과값 출력
  • 함수 안에 parameter 값 모두 더하는 경우
    

    return rest.reduce((acc,current) => acc + current, 0);
    // acc 초기값은 0이고 cureent는 함수 실행시 입력한 parameter 각각이므로 하나씩 acc에 더하는 형식으로 해서 모든 parameter 값을 더할 수 있게 된다.​

---

Scope

• 변수 혹은 상수 선언 시 해당 변수나 상수가 어디까지 유효한지에 대한 범위를 의미
• 자바스크립트의 문법이기 보다는 자바스크립트가 이렇게 작동하는구나로 이해하기
• const/let가 아닌 var로 선언 시 같은 변수 이름 지정하고 값을 다르게 지정하면 먼저 작성한 변수에 영향이 가게 된다. (실수하면 의도치 않게 작동될 수 있으므로 const/let으로 선언하는 것을 추천)
• const/let 선언시 scope가 블록으로 제한되어 있어 블록 바깥에 있는 값에는 영향이 가지 않는다.

Global scope 전역범위

• 코드의 모든 범위에서 사용 가능

Function scope

• 특정 함수 내부에서만 사용 가능
• 함수 안에 전역범위로 작성한 변수와 이름이 같은 변수를 값을 다르게 지정하여도 작성한 함수에서만 사용되기 때문에 기존 전역변수 값은 변하지 않는다.

Block scope

• if문, for문, switch 문 등에서 사용하게 될 때 중괄호로 감싸진 블록 내부에서만 사용 가능
• 함수 안에 작성한 변수와 이름이 같은 변수를 값을 다르게 지정하여도 작성한 블록 내부에서만 사용되기 때문에 기존 함수범위 안 변수 값은 변하지 않는다.

Hoisting

• 자바스크립트에서 아직 선언되지 않은 함수 또는 변수를 끌어올려서 사용할 수 있는 자바스크립트의 작동방식을 의미
• 자바스크립트에서 이런 현상이 발생할 수 있다로만 알기
• 웬만해선 hoisting 현상은 방지시켜주는게 좋음
• hoisting 방지하는 이유 : 코드가 쉽게 헷갈려지고 유지 보수가 어려워지게 되고 의도치 않은 결과물이 나올 수 있기 때문이다.
• ESLint 라는 도구 사용해서 hoisting 발생하는 코드가 있을 때 경고를 에디터 상에서 확인 할 수 있다. 그래서 그런 도구를 쓰면 방지할 수 있으니까 너무 걱정하지 않아도 됨
• 함수의 경우
  • 함수 선언되기 전 호출 했는데도 잘 작동하는 이유는 자바스크립트가 코드를 해석하는 과정에서 함수선언, 호출로 받아들이기 때문이다. 함수 선언이 호출보다 아래에 있어도 끌어올려서 작동하게 됨
  • 함수를 const/let으로 선언한특정 변수에 담아서 hoisting 방지 가능(이렇게까진 굳이 안해도 되고 그냥 함수를 먼저 선언하고 그다음에 호출하는 것으로 주의깊게 생각해서 사용하면 됨)
• 변수의 경우
  • var로 변수를 선언하는 경우에만 발생
  • 함수처럼 var로 변수 선언하기 전 변수를 console.log로 호출하면 그 변수는 undefined로 뜬다. 함수와 다르게 var로 선언한 변수는 자바스크립트가 코드를 해석하는 과정에서
    var 변수; -> console.log(변수); -> 변수 = 값; 이 순서대로 받아들여지기 때문이다.
  • const/let으로 변수를 선언함으로써 hoisting 방지 가능
  • const/let으로 선언한 변수는 hoisting되지 않으므로 변수 선언 전 변수 호출시 ReferenceError : Cannot access ‘변수이름’ before initialization 이라 뜨면서 변수 선언이 되어 있지 않다고 에러가 뜸
  • code sandbox에서는 babel이라는 도구에 의하여 const/let으로 선언한 변수도 var형태로 변환되기 때문에 그것을 막기 위해서는 babelrc에 들어가서 중괄호 안에 있는 모든 코드 삭제해야 한다.

---

Tips

• 코드가 짧다고 해서 좋은 것은 아니지만 코드가 짧으면서도 읽었을 때 무슨 역할을 하는지 알 수 있어야 비로소 좋은 코드라 할 수 있다.
• if문 한줄이면 블록(중괄호) 작성 안해도 됨
• switch case안에서 return 하게 된다면 굳이 break 하지 않아도 됨
• 함수 안에 함수 작성 가능