📌 JavaScript 핵심 개념과 주요 문법 - 3

JavaScript Koans

Koans 란 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 지닌다. 그동안 배웠던 자바스크립트 주요 문법과 관련된 문제를 풀어보았다.

1. +, - 연산자

expect(1 + '1').to.equal('11');
expect('123' - 1).to.equal(122);

자바스크립트 + 는 값에 따라 문자의 연결, 숫자의 덧셈 기능을 담당하므로 여기서는 문자의 연결로 처리된다. - 의 경우 문자열 연결 기능이 존재하지 않아 값을 숫자로 변환해 숫자의 뺄셈 기능을 담당하므로 '123' - 1은 122 가 된다.

expect(1 + true).to.equal(2);
expect('1' + true).to.equal('1true');

자바스크립트에서는 boolean 값을 true = 1, false = 0 로 인식한다. '1' + true는 문자열의 합을 의미하므로 '1true'가 된다.

2. 함수 선언식, 함수 표현식

let funcExpressed = 'to be a function';

expect(typeof funcDeclared).to.equal('function');
expect(typeof funcExpressed).to.equal('string');

function funcDeclared() {
	return 'this is a function declaration';
}

funcExpressed = function () {
	return 'this is a function expression';
};

함수 선언식(funcDeclared)은 함수이며 호이스팅이 적용된다. 함수 표현식(funcExpressed)은 아직 함수로 할당되지 않은 변수이며 호이스팅이 적용되지 않는다. 이 변수에 함수를 할당 한 후 호출하면 값을 리턴한다.

3. this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

const test_this = {
  prop: 15,
  func: function() {
    return this.prop; //this로 자신이 속한 객체의 프로퍼티(prop)에 접근
  },
};
console.log(test_this.func()); // 42

4. 얕은 복사와 깊은 복사

4-1. 얕은 복사

얕은 복사란 객체가 저장되어있는 주소값을 복사하는 것을 말한다.

const obj = {
  age: 51,
  name: {
    first: 'Matt',
    last: 'Damon'
  }
};
const copy_obj = Object.assign({}, obj);
copy_obj.age = 30;
obj.name.first = 'Justin';
console.log(obj.age); // 51
console.log(copy.age); // 30
console.log(obj.name.first); // Justin
console.log(copy_obj.name.first); // Justin

copy_obj의 age를 변경해도 obj의 age는 변경되지 않았다. 하지만 obj.name.first를 'Justin'으로 변경하자 copy.obj의 name.first도 'Justin'으로 변경되었다. 얕은 복사는 복사하려는 객체 내부에 존재하는 객체를 완벽하게 복사할 수 없음 을 알 수 있다. assign, slice, spread 등이 대표적인 얕은 복사의 예시이다.

4-2. 깊은 복사

객체의 실제값을 복사하는 것을 말하며 JSON 객체의 메소드를 이용해서 깊은 복사를 할 수 있다.

• JSON.stringify : 자바스크립트 객체를 JSON 문자열로 변환
• JSON.parse : JSON 문자열을 자바스크립트 객체로 변환

만약 깊은 복사를 하려는 객체에 함수가 속해있다면 해당 메서드만으로는 완벽히 깊은 복사를 수행할 수 없다.
따라서 Lodash의 clonedeep을 이용해 함수를 따로 깊은 복사해야 완벽히 깊은 복사를 수행했다 볼 수 있다.

5. 다양한 메서드

• Date() : 현재 날짜와 시간을 나타내는 문자열을 반환(new Date().toString()과 동일)
• getFullYear() : 주어진 날짜의 현재 시간 기준 연도를 반환
• array.from() : 유사 배열 객체나 반복 가능한 객체를 얕은 복사해 새로운 배열 객체를 생성

  유사 배열 객체 : length 속성과 index 속성을 가진 객체
  반복 가능 객체 : 객체의 요소를 얻을 수 있는 객체

• string.repeat() : 문자열을 주어진 횟수만큼 반복해 새로운 문자열을 반환
• Object.keys() : 주어진 객체의 속성 이름들을 배열로 반환
  
  

💡 마무리

이번에는 해당 과제를 통해 그동안 배워왔던 자바스크립트 주요 문법에 대해 학습해보았다. 페어분과 함께 한문제씩 차근히 풀어가면서 그동안 공부해왔던 내용을 다시 한 번 살펴볼 수 있었다. 각자 모르는 부분이 생기면 간단한 힌트를 제공하고 직접 풀어가면서 관련 메서드를 익혔다. 해당 과제를 통해 내가 어느 부분을 어렵게 생각하는지 알게되어 그 부분에 좀 더 집중해야겠다고 느꼈다. 또 중간중간 모르는 내용은 찾아가고 이해해가며 문제를 풀어가다보니 모르는 내용이더라도 좀 더 빠르게 익숙해질 수 있었다. 주말에는 이번에 풀어본 Koan과제를 다시 한 번 풀어보면서 관련 내용을 복습해봐야겠다.

🔗 참고

+, - 연산자 - 자바스크립트의 별난 부분
함수 선언식과 표현식
this - 1 this - 2
얕은 복사와 깊은 복사