JavaScript Koans (내용 추가중)

JavaScript Koans 과제 내용 중에서 이해를 위해 정리한 내용이다.

---

04_Scope.js

    
	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';
    }; //함수 표현식 => 호이스팅 불가능

• 함수선언식(declaration) => 호이스팅이 된다.

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

• 함수 표현식(expression) => 호이스팅이 없다.

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

호이스팅(hoisting)이란?

변수를 정의하는 코드보다 사용하는 코드가 앞서 등장하게 될 경우 자동으로 변수를 정의하는 코드가 최상단으로 올라가는 것

TMI

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 그러니까 var는 쓰지말자!!!

• 코드 작성시 선언식으로 할지 표현식으로 할지 하나로 통일하자.
• 가능하면 호이스팅을 인지하고, 코드를 읽을 필요없이 직관적으로 순서대로 적어야 한다.
  
  

---

  it('lexical scope와 closure에 대해 다시 확인합니다.', function () {
    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);
  });

• 변수에 값을 할당할 때, let 이 붙지 않았을 때는 해당 함수의 외부에 있는 같은 이름으로 선언된 변수에 재할당한다는 의미이다.

  let age = 27;
   let name = 'jimin';
   function innerFn() {
   age = 26;
   let name = 'suga';
   }
   innerFn();
   console.log(age); // 26
   console.log(name); // 'jimin'

  위의 내용일 경우, innerFn()가 호출되면서, 내부함수가 외부함수에 접근할수 있게 된다. => 클로저
  콘솔에 입력해보면, innerFn() 안에 있는 age는 외부에 let을 넣으며 선언한 age에 값을 재할당해주는 의미가 되어 최종 age의 값은 26이 되고, name은 내부에서도 let을 넣으며 새롭게 선언되어서 외부에 있는 name과 이름만 같을 뿐 다른 변수로 구분되어 최종 name의 값은 처음 할당한 'jimin'이 된다.
  

---

05_ArrowFunction.js

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

const add = (x, y) => {
    return x + y
} // 화살표 함수 : function 생략하고 => 를 ()뒤에 붙인다.

• 리턴을 생략할 수 있다.

const subtract = (x, y) => x - y

• 필요에 따라 소괄호를 붙일 수 있다.

const multiply = (x, y) => (x * y)

• 매개변수(파라미터)가 하나면 소괄호 생략가능

const divideBy10 = x => x / 10

• 화살표 함수를 이용한 클로저 표현

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

const subtractor = x => y => {
   return x + y
} // 더 단순하게 표현가능

---

07_Array.js

• 배열은 typeof연산자를 사용했을 때 object라고 반환한다.

const emptyArr = [];
console.log(typeof(emptyArr)); // 배열인지 확인하고 싶을 때는 Array.isArray()

• slice()는 배열의 값을 복사하여 새로운 배열을 리턴하는 연산자로 기존 배열을 수정하지 않는다.

const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];
const copiedArr = arr.slice();
copiedArr[3] = 'changed in copiedArr';
console.log(arr[3]); // three
// arr.slice()는 arr을 복사한 값으로 새로운 배열이 할당된 것이다.
// 따라서 copiedArr가 수정된 내용은 arr에 영향을 주지 않는다.

• pop(), push(), shift(), unshift()는 기존 배열의 값을 추가, 삭제하는 연산자이다.

const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];
const copiedArr = arr.pop(); // 배열중 마지막 값을 삭제
console.log(copiedArr); // 'five' => 삭제된 값
console.log(arr); // ['zero', 'one', 'two', 'three', 'four']
// 기존 배열에 영향을 준다.