부트캠프 과제 - JavaScript Koans

학습목표

JavaScript의 주요 개념인 아래의 내용에 대해 설명할 수 있다.

• JavaScript의 타입
• 변수 선언 키워드 let과 const
• 화살표 함수
• 스코프
• 배열
• 객체
• spread
• 구조분해할당

expect 함수

expect함수를 사용해 테스트값과 기대값을 비교했다.

expect(테스트하는값).기대하는조건

'기대하는조건'에 해당하는 함수를 matcher라고 한다.

expect(isEven(3)).to.be.true
=> 'isEven(3)'의 결과값은 참(true)이어야 한다'
expect(1 + 2).to.equal(3)
=> 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'

'참인 것이어야 한다' => to.be.true
'3과 같아야 한다' => to.equal(3)

  it('테스트하는 값(expect의 전달인자)이 true인지의 여부를 검사합니다.', function (){
   expect(true).to.be.true;
  }); 

  it('Matcher .equal 의 사용법을 학습합니다.', function () {
   let expectedValue = 2; // TODO
   // .equal은 두 값이 타입까지 엄격하게 같은지 검사한다.(strict equality, ===)
   expect(1 + 1).to.equal(expectedValue);
 });  
  

Const

'const'는 재할당이 불가능하다.
'const'로 선언된 배열과 객체의 경우 추가 및 삭제가 가능하다.

의도치 않은 재할당을 방지하고자 할 때 사용한다.

스코프(scope) & 클로저(closure)

스코프
변수의 유효범위를 나타내는 용어

• 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능, 반대는 불가능
• 스코프는 중첩이 가능

전역 스코프와 지역 스코프

• 가장 바깥쪽의 스코프는 전역 스코프
• 전역이 아닌 다른 스코프는 전부 지역 스코프
• 지역변수는 전역변수보다 더 높은 우선순위 가짐

클로저
함수와 함수가 선언된 어휘적 환경의 조합
어휘적 환경 : 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경

클로저 함수 : 외부 함수의 변수에 접근할 수 있는 내부 함수

• 함수를 리턴하는 함수
• 리턴하는 함수에 의해 스코프가 구분됨

block scope와 function scope

• block scope: 중괄호를 기준으로 범위가 구분 (if문, for문)
• function scope: function 키워드 등장
  *화살표함수는 블록 스코프 취급

원시 자료형과 참조 자료형

저장하는 방식에 따라 구분한다.

number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터 => 원시 자료형(primitive)
array, object, function와 같이 대량의 데이터, 변수에 값이 아닌 주소를 저장 -> 참조 자료형(reference)

• 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)합니다.

let name = 'codestates';
name.toUpperCase();
console.log(name) //'codestates';

• 원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어납니다.

let overTwenty = true;
let allowedToDrink = overTwenty;

overTwenty = false;
console.log(overTwenty) //false;
console.log(allowedToDrink) //true;

• 원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어납니다.

let currentYear = 2020;
function afterTenYears(year) {
year = year + 10;
}
afterTenYears(currentYear);
console.log(urrentYear); // 2020

function afterTenYears2(currentYear) {
  currentYear = currentYear + 10;
  return currentYear;
}
let after10 = afterTenYears2(currentYear);
console.log(currentYear) // 2020
console.log(after10) // 2030

• 참조 자료형의 데이터는 동적(dynamic)으로 변합니다.

• 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장됩니다.

객체(Object)

입력해야 하는 데이터의 종류가 동일한 경우, 객체를 사용하면 손쉽게 데이터를 관리 가능

let tweet ={
 writer: 'haeun',
 createdAt: '2020-12-30',
 content: '프리코스 재밌어요!'
};

not notation
-> tweet.writer;
bracket natation
-> tweet['writer'];

delete tweet.createAt;  // 키-값 쌍을 지웁니다.

SpreadSyntax

spread 문법
주로 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
sum(...numbers) // 리턴값: 6

• 여러 개의 배열을 이어붙일 수 있습니다.
• 여러 개의 객체를 병합할 수 있습니다.

rest 문법
파라미터를 배열의 형태로 받아서 사용 가능
(파라미터의 개수가 가변적일 때 유용)

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

• Rest Parameter는 전달인자의 일부에만 적용할 수도 있습니다.

구조분해할당

구조분해할당 구문
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

const [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); //10
console.log(rest) //[30,40,50]

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a) //10
console.log(rest) //{c: 30, d:40}

• 객체의 분해

const student = { name: '박해커', major: '물리학과' }
const { name } = student
console.log(name) //'박해커'

• rest/spread 문법을 객체 분해에 적용

const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student
console.log(name) //'최초보'
console.log(args) //{major: '물리학과'}