이제까지 배운것 복습! (JavaScript Koans)

어제부터 페어님과 JavaScript Koans의 자료를 풀었다. 갈수록 막히는 부분이 생기고 아에 모르는 부분도 나와서 같이 찾아보며 진행을 했다. 상당히 좋은자료여서 두고두고 볼것 같다. 개인적으로 어려웠거나 새로 안 내용을 정리하겠다!

1. 타입

it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect(123 - '1').to.equal(122);
  });

• 숫자에 문자열 - 가 들어간건 처음봤다. 처음에는 +처럼 숫자가 문자열이 될줄 알았지만 수로 계산되었다.

 

2. Scope

function defaultParameter(num = 5) {
	return num;
}

expect(defaultParameter(10)).to.equal(10);

• 함수 파라미터에 기본 값이 존재했고 거기에 10을 준 것인데 처음엔 num자체가 10이되고 5가 할당되어 5가 되는줄 알았지만 디버그를 돌려가며 확인을 하니 num = 10으로 되는 것이었고 그결과 반환 값이 10이 되었다.

 

3. 배열(array)

const arr = [];
expect(arr).to.deep.equal([]);

arr[0] = 1;
expect(arr).to.deep.equal([1]);

arr[1] = 2;
expect(arr).to.deep.equal([1, 2]);

• 인덱스를 가지고 객체처럼 생성가능한지 처음 알았다... 전부 push로 넣어야 되는 줄로만....

 

const arr = ['peanut', 'butter', 'and', 'jelly'];

expect(arr.slice(3, 0)).to.deep.equal([]);
expect(arr.slice(5, 1)).to.deep.equal([]);

• start부분의 인덱스보다 end부분의 인덱스가 작으면 빈 배열이 나온다. 단, 인덱스가 음수일 경우 뒤에서부터 센다. 

 

const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];

function passedByReference(refArr) {
  refArr[1] = 'changed in function';
}
passedByReference(arr); //주소값이 이어짐
expect(arr[1]).to.equal('changed in function');

• 배열을 함수의 파라미터로 전달할 경우 주소값이 전달된다.

 

4. 객체 (object)

this // 젼역변수의 값을 불러온다.

new Date()   // 현재 컴퓨터 기준 년도, 월, 날짜, 시간을 표기해줌

.getFullYear(); // 년도만 가져온다.

new Date().getFullYear(); // 현재 컴퓨터 기준 년도를 가져온다.

 

 

const obj = {
  mastermind: 'Joker',
  henchwoman: 'Harley',
  relations: ['Anarky', 'Duela Dent', 'Lucy'], // [1, 2, 3]
  twins: {
    'Jared Leto': 'Suicide Squad',
    'Joaquin Phoenix': 'Joker',
    'Heath Ledger': 'The Dark Knight',
    'Jack Nicholson': 'Tim Burton Batman',
  },
};

const copiedObj = Object.assign({}, obj);
    
delete obj.twins['Jared Leto'];
expect('Jared Leto' in copiedObj.twins).to.equal(false);

• Object.assign({}, obj)을 이용해 copiedObj에 깊은 복사한 값을 할당해줬다. 하지만 복사를 했지만 key인 twins같은 경우는 객체이기 때문에 주소값만 복사가 된다. 그래서 obj.twins의 키와 값을 수정하거나 삭제하거나 추가하면 copiedObj.twins에서도 같이 수정되거나 삭제되거나 추가된다. 

 

// arguments를 통해 '비슷하게' 함수의 전달인자들을 다룰 수 있습니다. (spread syntax 도입 이전)
// arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'입니다.
function getAllParamsByArgumentsObj() {
  return arguments;
}

const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
expect(Object.keys(argumentsObj)).to.deep.equal(['0', '1', '2']);

• arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'이다. key들도 자동으로 생성된다.

 

// rest parameter는 항상 배열입니다.
function getAllParams(required1, required2, ...args) {
  return [required1, required2, args];
}
expect(getAllParams(123)).to.deep.equal([123, undefined, []]);

• required2의 값이 안주어졌기 때문에 undefined인 것까지 안 것은 좋았지만... rest문법에 무조건 배열로 된다는 것을 잊어먹은 채 undefined라고 적었다. 값이 없으니 빈 배열인데 말이다....
  
  

 

5. 구조분해할당

const array = ['code', 'states', 'im', 'course']

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

• rest 문법 사용한 것과 비슷한데 rest문법만 없는 경우이다. (몰라서 처음에는 반반인가... 어떤식으로 할당 해주어야 하는 건지 계속 생각했다.)

 

const name = '김코딩'
const age = 28

const person = {
  name,
  age,
  level: 'Junior',
}

• 상위 스코프에서 선언된 변수일 경우 객체 안에서 단축되어 값을 쓰지 않아도 된다.

 

 

const student = { name: '박해커', major: '물리학과' }

const { name } = student   
expect(name).to.eql('박해커')

• 아까랑 같은 유형이다. rest 문법 사용한 것과 비슷한데 rest문법만 없는 경우이지만 이번엔 객체이다.

 

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
  return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
}

expect(getSummary(student)).to.eql('최초보님은 B+의 성적으로 양자역학을 수강했습니다')

• 분명 lesson의 값인 course가 없다. 반환시 course를 써야하지만 없다. 하지만 student를 잘 보면 course가 담겨져 있습니다. '양자역학'이라고....