10-2. [JavaScript] JavaScript Koans

 

 

오늘은 JavaScript Koans 문제풀이를 하며 개념 정리 및 몰랐던 부분을 정리하는 포스트이다.

 

 

---

01. Introduction

 

---

02. Types-part1

 

느슨한 연산자 '==' 와 엄격한 연산자 '==='에 대해서 복습했다.

앞으로는 엄격한 동치 연산(strict equality) '==='을 사용하라는 안내도 받았다.

 

it(function () {
    expect(1 + '1').to.equal('11');
  });

  it(function () {
    expect(123 - '1').to.equal(122);
  });

  it(function () {
    expect(1 + true).to.equal(2);
  });

  it( function () {
    expect('1' + true).to.equal('1true');
  });

 

그리고 자바 스크립트의 특이한.. 계산방법이 있다는것도 알게되었다.

모든 특이한 특성을 외울 필요는 없다.

 

대표적으로 최대한 같은 타입끼리 연산을 하고, 즉 엄격한 동치 연산('===')을 사용하고,

조건문에 비교 연산을 명시하는 것이 훨씬 좋습니다.

 

.....네!

---

03. LetConst

 

Const의 특징

• Const로 선언된 변수는 재할당이 금지된다.
• Const로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다.
• Const로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.

 

 

<const와 let의 장단점>

 

const vs let

 

	Const	let
장점	- 값의 불변성을 보장하여 안정성을 높임	- 값을 재할당하여 유연한 사용 가능
	- 코드의 가독성 향상	- 데이터의 가변성을 허용
	- 재할당을 허용하지 않으므로 에러 예방	- 변수를 블록 범위로 제한하여 스코프 관리 가능
단점	- 값을 한 번 할당하면 변경 불가능	- 재할당으로 인한 실수 가능
	- 반드시 초기값을 할당해야 함	- 블록 스코프를 사용할 때 유용하지 않을 수 있음

 

물론, 상황에 따라 const와 let 중 어떤 것을 사용해야 하는지는 코드의 목적과 요구 사항에 따라 다를 수 있습니다. 일반적으로 값이 변하지 않아야 하는 경우에는 const를 사용하고, 값이 변경될 수 있는 경우에는 let을 사용합니다.

 

---

04. Scope

 

 

scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳

 

 

JavaScript에서 함수를 정의하는 두 가지 주요 방법은 "함수 선언식"과 "함수 표현식"입니다. 

 

함수 선언식(declaration)	함수 표현식(expression)
함수 선언식은 함수를 선언하고, 함수 이름과 함께 전역 스코프에 함수를 등록합니다. 함수를 선언하는 구문은 다음과 같이 보입니다: function functionName() { ... } 함수 선언식은 호이스팅(hoisting)을 지원합니다. 이는 코드 내에서 함수 선언문을 호출하기 전에 함수가 이미 사용 가능하다는 것을 의미합니다.	함수 표현식은 변수에 함수를 할당하는 방식으로 함수를 정의합니다. 함수 표현식은 변수 스코프 내에 함수를 정의합니다. 함수를 정의하는 구문은 다음과 같이 보입니다: const functionName = function() { ... }; 함수 표현식은 호이스팅을 지원하지 않습니다. 함수 표현식을 변수에 할당하기 전에 변수가 선언되어 있어야 합니다.

 

 

function sayHello() { //함수 선언식
  console.log("Hello, World!");
}
const sayHello = function() { //함수 표현식
  console.log("Hello, World!");
};

 

 

 

 

---

05. ArrowFunction

화살표 함수

 

<기본형태>

const 함수명 = (매개변수1, 매개변수2, ...) => 표현식;

 

    const add = (x, y) => {
      return x + y
    }
    expect(add(10, 20)).to.eql(30)

---

리턴 생략가능!

 

    const subtract = (x, y) => x - y
    expect(subtract(10, 20)).to.eql(-10)

---

소괄호 사용 가능

 

    const multiply = (x, y) => (x * y) //(x * y) 부분에 소괄호 사용
    expect(multiply(10, 20)).to.eql(200)

 

---

 

파라미터가 하나일때 소괄호 생략가능 !

 

    const divideBy10 = x => x / 10
    expect(divideBy10(100)).to.eql(10)
  })

 

---

화살표 함수로 클로저 표현하기

 

const adder = x => {
  return y => {
    return x + y;
  };
};

console.log(adder(50)(10)); // 60

const subtractor = x => y => {
  return x - y;
};

console.log(subtractor(50)(10)); // 40

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`;
console.log(htmlMaker('div')('code states')); // '<div>code states</div>'

const liMaker = htmlMaker('li');
console.log(liMaker('1st item')); // '<li>1st item</li>'
console.log(liMaker('2nd item')); // '<li>2nd item</li>'

 

 

 

---

06. Types-part2

 

원시자료형

원시자료형	설명	예시
문자열(String)	텍스트 데이터를 나타내는 자료형	"Hello, World!"
숫자(Number)	숫자 값을 나타내는 자료형	42, 3.14
불리언(Boolean)	참(True) 또는 거짓(False)을 나타내는 자료형	true, false
undefined	값이 할당되지 않은 변수 또는 속성을 나타내는 자료형	undefined
null	의도적으로 비어 있는 값을 나타내는 자료형	null
심볼(Symbol)	유일한 식별자를 생성하는데 사용되는 자료형	Symbol("unique")
BigInt	큰 정수를 나타내는 자료형	12345678901234567890123456

원시 자료형은 불변하며, 값이 복사되기 때문에 값이 변경되더라도 원래 값은 영향을 받지 않습니다.

또한, 원시 자료형은 메소드나 속성을 가지지 않으며, 기본 연산자를 사용하여 처리됩니다.

원시 자료형의 경우, 변수에 할당할 때 값이 복사되므로 변수 간에 독립적인 복사본이 생성됩니다.

변경 사항은 서로에게 영향을 미치지 않습니다.

 

---

 

참조 자료형

 

참조자료형	설명	예시
객체 (Object)	키-값 쌍의 속성으로 구성된 데이터 구조입니다.	{ name: 'John', age: 30 }
배열 (Array)	순서가 있는 요소들의 집합입니다.	[1, 2, 3, 4]
함수 (Function)	재사용 가능한 코드 블록입니다.	function add(a, b) { return a + b; }
클래스 (Class)	객체를 생성하기 위한 설계도입니다.	class Person { constructor(name) { this.name = name; } }

이 표를 통해 참조 자료형은 복합 값(객체, 배열, 함수, 클래스)을 다루며,

값의 위치(메모리 주소)를 저장하여 데이터를 변경할 수 있으며

메모리는 힙(heap)에 할당된다는 특징을 갖는다는 것을 확인할 수 있습니다.

 

    const obj = {};
    expect(Object.keys(obj).length).to.equal(0);
    obj['name'] = 'codestates';
    obj.quality = 'best';
    obj.product = ['sw engineering', 'product manager', 'growth marketing', 'data science'];
    //객체 obj에 각각 세 개의 속성을 추가합니다. 객체는 동적으로 속성을 추가할 수 있습니다.
    
    expect(Object.keys(obj).length).to.equal(3);
    //객체 obj의 속성 키 배열의 길이를 확인합니다. 이제 3개의 속성이 추가되었으므로 길이는 3이어야 합니다.
    
    delete obj.name; //객체 obj에서 'name'이라는 속성을 삭제합니다.
    expect(Object.keys(obj).length).to.equal(2);
  });

 

 

---

원시 자료형 vs 참조 자료형

 

특징	원시 자료형	참조 자료형
데이터 유형	단일 값 (스칼라)	복합 값 (객체)
데이터 저장 방식	값 자체가 저장됨	값의 위치(참조)가 저장됨
변경 가능 여부	불가능 (immutable)	가능 (mutable)
메모리 할당 방식	스택 (stack)	힙 (heap)
예시	숫자, 문자열, 불리언, null, undefined, Symbol	객체, 배열, 함수, 클래스

이 표를 통해 원시 자료형과 참조 자료형의 주요 차이점을 이해할 수 있습니다. 원시 자료형은 값 자체를 저장하며 불변(immutable)하다는 특징이 있고, 참조 자료형은 값의 위치(메모리 주소)를 저장하며 가변(mutable)하다는 특징이 있습니다.

 

 

---

 const ages = [22, 23, 27];
    allowedToDrink = ages;
    expect(allowedToDrink === ages).to.equal(true);
    expect(allowedToDrink === [22, 23, 27]).to.equal(false);

//expect(allowedToDrink === [22, 23, 27]).to.equal(false);은 allowedToDrink과 [22, 23, 27]가 동일한 배열 객체를 참조하지 않기 때문에 false를 반환합니다. 이것은 JavaScript에서 배열 리터럴을 사용하여 새로운 배열을 생성한 경우, 새로운 배열 객체가 생성되기 때문입니다. 배열 리터럴은 항상 새로운 배열을 생성합니다.

 

 

 

---

07. Array

 

 

 

 

ㅇ

---

08. Object

 

 

 

---

09. SpreadSyntax

 

 

 

---

10. Dextructuring

 

 

 

---