[Java Script] Koans 문제 풀이

2022.05.16

1. 타입 확인

• "비교연산자 '=='는 두 값의 일치 여부를 느슨하게 검사(loose equality)한다. 사용을 권장하지 않음.
• 예시)

expect(0 == false).to.be.true;
expect('' == false).to.be.true;
expect([] == false).to.be.true;
expect(![] == false).to.be.true;
expect([] == ![]).to.be.true;
expect([] == '').to.be.true;
expect([] == 0).to.be.true;
expect([''] == '').to.be.true;
expect([''] == 0).to.be.true;
expect([0] == 0).to.be.true;

• "비교연산자 '==='는 두 값의 일치 여부를 엄격하게 검사(strict equality)한다.
• 타입 변환
• 예시)

1 + ’1’ === ‘11’
123 - ’1’ === 122
1 + true === 2
‘1’+ true === ‘1true’

 

2. 할당 연산자 Const

• 'const'로 선언된 변수에는 재할당(reassignment)이 금지
• 'const'로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제 가능
• 'const'로 선언된 객체의 경우, 속성을 추가하거나 삭제 가능.
• var : 사용 권장하지 않음. 호이스팅이 발생.

 

3. Scope

• Scope란 변수의 유효 범위를 일컫는다.
• 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말한다.
• 접근 범위는 블록이나 함수에 의해 나뉜다.
• 3가지 규칙
  • 규칙 1 : 안쪽 스코프에서 바깐쪽 스코프로는 접근이 가능하지만 반대는 불가능하다.
  • 규칙 2 : 스코프는 중첩이 가능하다 (전역 스코프(Global Scope) 및 지역 스코프(Local Scope))
  • 규칙 3 : 지역 변수는 전역 변수보다 더 높은 우선순위를 지닌다.
    • 참고) 쉐도잉이란? 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상
• 클로저(closure)

클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. (출처 : MDN)

• 특징 : 자신이 선언될 때의 맥락을 기억하는 함수.
• 규칙 :
  • 규칙 1 : 함수를 리턴하는 함수.
  • 규칙 2 : 내부 함수믄 외부 함수에 선언된 변수에 접근이 가능하다.

 

4. 화살표 함수

• 함수 선언문 : function 키워드를 사용하여 함수를 선언. 호이스팅 발생(함수를 정의하기 전에 호출해도 함수가 발생).

function add (x, y) {
return x + y;
}

 

• 함수 표현식 : 함수를 변수에 할당한 상태. 호이스팅이 발생하지 않음. 권장하는 함수 형식(호이스팅이 일어나는 상황을 만들지 않는 것이 좋음)

const add = function (x, y) {
return x + y
}

 

• 화살표 함수 : function 키워드를 생략하고 화살표 => 를 붙인다.

const add = (x, y) => {
return x + y
}

• 화살표 함수의 특징 :
  • 리턴을 생략할 수 있다.
    • const subtract = (x, y) => x - y
  • 필요에 따라 소괄호를 붙일 수도 있다.
    • const multiply = (x, y) => (x * y)
  • 파라미터가 하나일 경우 소괄호 생략이 가능하다.
    • const divideBy10 = x => x / 10
• 활용 예) 

const htmlMaker = tag => textContent => <${tag}>${textContent}</${tag}>

 

5. 원시 자료형 vs 참조 자료형

• 이전 글 참조.
• 원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어난다.
• 함수의 전달인자도 변수에 자료(data)를 할당하는 것.
• 함수를 호출하면서 넘긴 전달인자는 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언되는 것.
• 예시)

const nums1 = [1, 2, 3];
const nums2 = [1, 2, 3];
nums1 === nums2 // false : 값의 비교가 아닌 참조(주소값)을 비교하는 것이기 때문.

 

6. 배열(Array)

• 메소드 arr.slice 예시)

const arr = ['peanut', 'butter', 'and', 'jelly'];
expect(arr.slice(1)).to.deep.equal(['butter', 'and', 'jelly']);
expect(arr.slice(0, 1)).to.deep.equal(['peanut']);
expect(arr.slice(0, 2)).to.deep.equal(['peanut', 'butter']);
expect(arr.slice(2, 2)).to.deep.equal([]);
expect(arr.slice(2, 20)).to.deep.equal(['and', 'jelly']);
expect(arr.slice(3, 0)).to.deep.equal([]);
expect(arr.slice(3, 100)).to.deep.equal(['jelly']);
expect(arr.slice(5, 1)).to.deep.equal([]);

• arr.slice(), concat() 메소드는 원본을 변경하지 않음.

 

7. 객체(Object)

• 참고- 메소드)
  • 메소드(method) : '어떤 객체의 속성으로 정의된 함수’
  • 전역 변수에 선언한 함수도 웹페이지에서 window 객체의 속성으로 정의된 함수
  • window. 접두사 없이도 참조가 가능하기 때문에 생략하고 쓰는 것 뿐. 이렇듯, method는 항상 '어떤 객체'의 method.
  • 따라서 호출될 때마다 어떠한 객체의 method일 텐데, 그 '어떠한 객체'를 묻는 것이 this.
  • 화살표 함수는 다름. 자신의 this가 없다. 화살표 함수에서의 this는 자신을 감싼 정적 범위(lexical context)이다.
• Object를 함수의 전달인자로 전달할 경우, reference가 전달된다.
• 참고 - Object.assign() 메소드
  • 얕은 복사(shallow copy) : 셀 수 있는 것의 값을 복사.
  • 깊은 복사(deep copy) : 참조(주소값)을 복사. 예) 객체 내의 객체는 깊은 복사가 됨.
• 객체는 배열과 달리 length 메소드가 존재하지 않음. 객체의 키의 개수를 구하려면, Object.keys(객체명).length 로 확인해야 함.

 

8. 전개 문법(Spread syntax)

• spread : 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용.
• 예 )

const spread = [1, 2, 3];
const arr = [0, ...spread, 4];
console.log(arr) // [0, 1, 2, 3, 4]

• 빈 배열에 전개 문법을 사용할 경우, 아무것도 전달되지 않는다.
• 여러 개의 배열을 이어붙일 수 있다.
• 여러 개의 객체를 병합할 수 있다.

 

9. 나머지 매개변수(Rest parameter)

• 함수의 전달인자를 배열로 다룰 수 있게 한다. 남아있는 모든 인자를 하나의 배열에 담는다. : ...args
• Rest Parameter는 전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용 가능.
• Rest Parameter는 전달인자의 일부에만 적용할 수도 있다.

 

10. 구조 분해 할당(Destructing Assignment)

• spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정.
• 예)

const array = ['code', 'states', 'im', 'course']
const [first, second] = array
expect(second).to.eql('states')
expect(first).to.eql('code')

• rest/spread 문법을 배열 분해에 적용할 수 있다.

 

---

추가 학습 필요 사항

 

1. TDD (Test Driven Development) : 테스트 주도 개발

참고 사이트 : https://cho-coding.tistory.com/231

[JAVA SCRIPT] TDD - 테스트 주도 개발

 

2. 호이스팅과 TDZ

참고 사이트 : https://velog.io/@jangwonyoon/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-TDZ%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%A4-%EC%97%B0%EA%B4%80%EC%9D%B4-%EC%9E%88%EC%9D%84%EA%B9%8C%EC%9A%94

호이스팅과 TDZ는 무엇이고 어떤 연관이 있을까요?