[코드스테이츠 FE 45기] _2023.04.28 _ Day 14

---

JavaScript Koans

첫번째 날

JavaScript 의 개념 응용 문제를 풀어보며 여러 생각을 해보는 시간이라고 한다.

---

오늘은  총 10개의 챕터 중에 3개 정도 문제를 풀고 생각해보는 시간을 가져 보려고 한다.

 

01_Introduction.js 

02_Types-part1.js 

03_LetConst.js 

04_Scope.js 

05_ArrowFunction.js 

06_Types-part2.js 

07_Array.js 

08_Object.js

09_SpreadSyntax.js

10_Destructuring.js

---

01_Introduction.js 

 

02_Types-part1.js 

 

03_LetConst.js 

 

---

• expect에 대해서 학습합니다.

  • 테스트하는 값(expect의 전달인자)이 true인지의 여부를 검사합니다.‣
  • 테스트하는 값(expect의 전달인자)이 falsy 여부를 검사합니다.‣
  • '테스트하는 값'을 '기대하는 값'과 비교한 결과가 참 인지 확인합니다.‣
  • Matcher .equal 의 사용법을 학습합니다.‣
  • Matcher .equal의 사용법을 학습합니다.‣

• type에 대해서 학습합니다.

  • 비교연산자 '=='는 두 값의 일치 여부를 느슨하게 검사(loose equality)합니다.‣
  • 비교연산자 '==='는 두 값의 일치 여부를 엄격하게 검사(strict equality)합니다.‣
  • expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.‣
  • expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.‣
  • expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.‣
  • expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.‣

• 'const'에 대해서 학습합니다.

  • 'const'로 선언된 변수에는 재할당(reassignment)이 금지됩니다.‣
  • 'const'로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있습니다.‣
  • 'const'로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있습니다.

---

expect에 대해서 학습합니다.

expect는 "기대하다"라는 뜻을 가진 동사입니다.

 

자바스크립트에서 expect는 테스트 프레임워크인 Jasmine과 같은 라이브러리에서 사용됩니다.

expect를 사용하여 테스트 코드에서 기대되는 결과를 명시하고 테스트를 수행합니다.

예를 들어, 함수의 반환 값을 기대하는 테스트 코드를 작성할 때, expect를 사용하여 해당 값을 명시하고 toBe 메소드를 사용하여 해당 값을 검증할 수 있습니다.

// add 함수 정의
function add(a, b) {
  return a + b;
}

// add 함수 테스트
describe("add function", function() {
  it("should return 3 when passed 1 and 2 as arguments", function() {
    expect(add(1, 2)).toBe(3);
  });
});

위 예제에서 expect(add(1, 2)).toBe(3); 코드는 add 함수를 호출하여 반환된 값이 3인지 검증합니다. 만약 add 함수가 3이 아닌 다른 값을 반환하면 해당 테스트는 실패합니다.

 

Jasmine 라이브러리의 expect는 다양한 메소드를 제공합니다. 일반적으로 사용되는 메소드는 toBe, toEqual, toBeDefined, toBeUndefined, toBeNull, toBeTruthy, toBeFalsy, toContain, toMatch 등이 있습니다. 이러한 메소드를 사용하여 다양한 검증을 수행할 수 있습니다.

 

코드스테이츠에서 제공하는 코드를 올리지는 못하겠지만 비슷한 예제로 생각해봐야겠다.

 

  it("'테스트하는 값'을 '기대하는 값'과 비교한 결과가 참 인지 확인합니다.", function () {
    
    let actualValue = 3 + 3;
    let expectedValue = 3 + 3; 
    expect(actualValue === expectedValue).to.be.true;
    
  });

 

---

type에 대해서 학습합니다.

 

JavaScript에서 데이터 타입(data type)은 변수가 저장할 수 있는 값의 유형을 나타냅니다. JavaScript는 동적 타입(dynamic type) 언어이므로 변수의 데이터 타입은 변수에 저장된 값에 따라 자동으로 결정됩니다.

 

JavaScript에서는 아래와 같은 다양한 데이터 타입이 있습니다.

 

1) 원시 데이터 타입(Primitive data type)

• 숫자(Number) : 정수, 실수를 모두 포함합니다.
• 문자열(String) : 문자들의 집합입니다.
• 불리언(Boolean) : true, false 중 하나의 값을 가집니다.
• null : 값이 null인 객체를 나타냅니다.
• undefined : 값이 정의되지 않은 변수를 나타냅니다.
• 심볼(Symbol) : 객체 속성(object property)의 식별자(identifier)로 사용됩니다.

 

2) 참조(reference) 데이터 타입

• 객체(Object) : 함수(function)과 배열(array)을 포함한 모든 객체입니다. 객체는 참조(reference) 데이터 타입으로, 변수에 저장된 값은 실제 값이 아니라 객체의 메모리 주소입니다.

 

JavaScript에서는 typeof 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있습니다.

예를 들어, typeof 1은 "number"를, typeof "hello"는 "string"을, typeof true는 "boolean"을 반환합니다.

typeof null은 "object"를 반환하는데, 이는 자바스크립트의 오래된 버그로 인해 발생한 것으로 null은 사실 원시 데이터 타입입니다.

 

JavaScript에서는 데이터 타입을 변환하는 다양한 메소드를 제공합니다.

예를 들어,

• Number() 함수를 사용하여 문자열을 숫자로 변환할 수 있습니다.
• 또한, 문자열을 숫자로 변환할 때 parseInt() 함수와 parseFloat() 함수를 사용할 수 있습니다.
• 문자열을 불리언 값으로 변환할 때는 Boolean() 함수를 사용할 수 있습니다.

 

---

'const'에 대해서 학습합니다.

 

const는 JavaScript에서 변수 선언에 사용되는 키워드 중 하나입니다.

const로 선언된 변수는 상수(변경 불가능한 값)로 취급됩니다.

즉, 한 번 값을 할당하면 다른 값을 할당할 수 없습니다.

 

const로 선언된 변수는 반드시 선언과 동시에 초기화되어야 합니다. 이후에 값을 변경하려고 하면 에러가 발생합니다. const로 선언된 객체나 배열의 내부 값은 변경될 수 있지만, 객체나 배열 자체는 다른 객체나 배열로 대체될 수 없습니다.

 

const는 let과 함께 ES6에서 추가된 변수 선언 키워드 중 하나입니다. 이전에는 var만 사용할 수 있었습니다. var와는 달리, const와 let은 블록 유효 범위(block scope)를 갖습니다. 즉, 중괄호({}) 안에서 선언된 변수는 그 범위 안에서만 유효합니다.

 

다음은 const로 변수를 선언하는 예시입니다.

const pi = 3.14;
pi = 3.14159; // 에러 발생

const myObject = {name: "John", age: 30};
myObject.age = 31; // 가능
myObject = {name: "Jane", age: 29}; // 에러 발생

 

위의 예시에서 pi는 상수로 선언되어 있으므로 값을 변경할 수 없습니다. 그러나 myObject는 상수로 선언되어 있지만, 객체 내부의 값을 변경하는 것은 가능합니다. 하지만 myObject를 다른 객체로 대체하는 것은 불가능합니다.