과제 - Javascript Koans

이성은·2022년 11월 8일

Types

1+'1' // '11'  숫자가 String타입으로 변환돼서 연산
123-'1' // 122 '1'문자열이 Number타입으로 변환돼서 연산
1+true // 2 
'1' + true // '1true'

const

'const'로 선언된 변수에는 재할당(reassignment)이 금지
'const'로 선언된 배열의 경우 메서드를 사용하여 새로운 요소를 추가하거나 삭제할 수 있다.

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).to.equal(42); //하지만 여전히 재할당은 금지

'const'로 선언된 객체의 경우 메서드를 사용없이 새로운 요소를 추가하거나 삭제할 수 있다.

const obj = { x: 1 };
 delete obj.x;
expect(obj.x).to.equal(undefined);

obj.occupation = "SW Engineer";
    expect(obj["occupation"]).to.equal("SW Engineer");

scope

호이스팅 :함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
클로저 :함수와 함수가 선언된 어휘적(lexical) 환경의 조합
내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있다

arrow function

함수 표현식과 함수선언식의 차이점: 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

Types (2)

원시자료형은 값 자체에 대한 변경이 불가능(immutable)
원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어난다.
원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어난다.
자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다.
참조 자료형의 데이터는 동적(dynamic)으로 변한다
참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장된다.

array

array 메소드

object

object는 length가 없다.(undefined)
in 연산자
in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환
속성 in 객체명
함수 this
method를 호출하는 시점에 결정

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func()); //42

Object.assign
출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣는다. 그 후 대상 객체를 반환.
목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다. 출처 객체들의 속성 중에서도 키가 겹칠 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성 값보다 우선으로 한다

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

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

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

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

Spread syntax( 전개문법)

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.

//<spread 문법>
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
//  6


//<rest문법>
function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10

//<배열 합치기>
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]


//<배열복사>
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);
// arr2 은 [1, 2, 3, 4] 이 됨
// arr 은 영향을 받지 않고 남아 있음

//<객체에서 사용>
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

//<함수에서 나머지 파라미터 받아오기>
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
//a one
//b two
//4 manyMoreArgs (4) ['three', 'four', 'five', 'six']