JavaScript Koans

 

 

학습 목표

• JavaScript의 주요 개념인 아래의 내용에 대해 설명할 수 있다.
  • JavaScript의 타입
  • 변수 선언 키워드 let과 const
  • 화살표 함수
  • 스코프
  • 배열
  • 객체
  • spread
  • 구조분해할당

 

 

 

< JavaScript Koans를 풀었던 과정과 새롭게 알게 된 것 >

- 자바스크립트에는 다소 이해하기 힘든 부분들이 있다.
  예를 들어 1 + '1'이 '11'이라든가 123 - '1'이 122라든가 1 + true는 2인데, '1' + true는 '1true'라든가 ...
  (관련 저장소 : https://github.com/denysdovhan/wtfjs )
   → 그러므로 최대한 같은 타입끼리 연산하고, 엄격한 동치 연산자(===)를 사용하여 예측 가능성을 높이자.
        바나나 코드 안돼요


- 구글 자바스크립트 코딩 스타일 가이드
https://google.github.io/styleguide/jsguide.html#features-use-const-and-let

Google JavaScript Style Guide

- 함수 선언식은 호이스팅에 영향을 받지만,
  함수 표현식(함수를 다른 변수에 값으로 할당하는 것)은 호이스팅에 영향을 받지 않는다.

호이스팅(hoisting)이란?
: 함수 안에 있는 선언들을 모두 끌어올려 해당 함수의 유효 범위 최상단에 선언하는 것
  호이스팅을 고려할 필요가 없게 짠 코드가 좋은 코드다.

비교 예시

- lexical scope : 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것
  closure는 내부 함수가 외부 함수의 지역 변수에 접근할 수 있다.
  (관련 검색 키워드 : function factories(팩토리 함수; 객체를 반환하는 함수), namespacing private variables/functions)

★다시 이해해 보기

let age = 27;
let name = 'jin';
let height = 179;

function outerFn() {
	let age = 24;
	name = 'jimin';
	let height = 178;

	function innerFn() {
		age = 26;
		let name = 'suga';
		return height;
	}

	innerFn();

	expect(age).to.equal(26);
	expect(name).to.equal('jimin');

	return innerFn;
}

const innerFn = outerFn();

expect(age).to.equal(27);
expect(name).to.equal('jimin');
expect(innerFn()).to.equal(178);

- 매개변수 기본값 (default parameter)

- 화살표 함수

const add = function (x, y) {     //함수 표현식의 예
    return x + y
}


const add = (x, y) => {     //화살표 함수 사용법: function 키워드를 생략하고 =>를 붙인다.
    return x + y
}

const add = (x, y) => x + y     //return도 생략 가능



const add = x => {     //이런 식으로 클로저를 표현할 수도 있다.
    return y => {
    	return x + y
	}
}

const add = x => y => {
	return x + y
}

- 배열(array)의 요소(element)로 함수가 들어갈 수도 있다.

const sampleArr = [
    0,
    1,
    function() {
    	return 5;
    }
];

console.log(sampleArr[2]());   //5

- pop() 메서드는 배열에서 마지막 요소를 제거하고, 그 요소를 반환한다.

let arr = [1, 2, 3];

let poppedValue = arr.pop();

console.log(arr); // 배열에서 마지막 요소를 제거하고 -> [1, 2]
console.log(poppedValue);  // 그 요소를 반환 -> 3

cf. push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환.
     shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환.
     unshift() 메서드는 새로운 요소를 맨 앞쪽에 추가하고, 새로운 길이를 반환.


- arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴한다.

arr.slice(0)  //arr 전체를 복사

- this는 method(어떤 객체의 속성으로 정의된 함수)를 '호출'하는 시점에 결정된다.

  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this


- Date() : 현재의 UNIX 타임스탬프를 생성. ( → getFullYear 등 다양한 사용법이 있음.)

                https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date


- str.repeat(count); 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환


- Object.assign()

//mdn 사용 예시

let target = {a: 1, b: 2};
let source = {b: 3, c: 4};

let returnedTarget = Object.assign(target, source);

console.log(target); //{a: 1, b: 4, c: 5}

console.log(returnedTarget === target);  // true

※ 주의! Object.assign()은 속성의 값을 복사하기 때문에, 깊은 복사를 하려면 다른 방법을 사용해야 함.


  ● 얕은 복사? 깊은 복사?

  → 중첩 구조를 복사할 때 차이가 있다.
       얕은 복사는 객체의 참조 값(주소)를 복사하고, 깊은 복사는 객체의 실제 값을 복사한다.

      예를 들어, {a: 1, b: {c: 2}} 이러한 중첩 구조의 객체를 얕게 복사하면,
      두 번째 키의 값을 주소로 받아와 원본과 복사본이 서로 영향을 받게 된다.

( 참고 페이지 : https://www.digitalocean.com/community/tutorials/copying-objects-in-javascript,
https://medium.com/watcha/%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%97%90-%EB%8C%80%ED%95%9C-%EC%8B%AC%EB%8F%84%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%95%BC%EA%B8%B0-2f7d797e008a )