오늘은 JavaScript Koans 문제를 풀었다.

총 10장 50문제)

---

2_Types-part1.js

콘솔 로그를 찍으면 쉽게 확인 가능하다

console.log

---

3_LetConst.js

Const

const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

"하지만 'const'로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다."

const 배열의 요소의 추가

const jinsung = [1,2,3]
jinsung.push(4)
console.log(jinsung)
(4) [1, 2, 3, 4]

const로 선언된 객체의 추가, 삭제

추가

const obj = {x : 1}
undefined
obj.y = 2
2
obj
{x: 1, y: 2}

삭제

delete obj.x
true
obj
{y: 2}

---

04_ArrowFunction.js

함수 표현식

let 함수명 = function () {
  구현 로직
};

화살표 함수

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다

클로저

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

---

내부함수

---

변수의 유효범위

• 지역 변수(local variable)
  지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킵니다.
  이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.
  함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.
  
• 전역 변수(global variable)
  전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킵니다.
  이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

참조 생활코딩

---

05_scope.js

함수 표현식 VS 함수 선언식

함수 표현식

alert(foo()); // 에러 발생! foo 함수는 아직 로드안됨
var foo = function() { return 5; }

함수 선언식

```alert(foo()); 
// Alerts 5. 
// 선언 전에 호출되도 정상 동작
function foo() { return 5; }

• 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 인터프리터가 해당 코드 줄에 도달 할 때만 로드된다.
• 함수 선언식은 var 문과 유사하게 호이스팅(호이스팅이란?) 된다. 반면, 함수 표현식은 호이스팅되지 않으므로 정의 된 범위에서 로컬 변수의 복사본을 유지할 수 있다.
• 일반적으로 함수 선언식과 함수 표현식은 함께 사용할 수는 있지만, 함수 표현식은 함수 이름이 필요없기에 가독성이 더 높은 장점이 있다.

---

• 함수 선언식과 비교하여, 함수 표현식의 이점은 아래의 경우로 나뉜다.

• 클로저

• 인자 전달

• IIFE

참조링크

06_types-part2.js

원시 값

• JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다.
• 원시 값에는 6종류, string, number (en-US), bigint (en-US), boolean, undefined, symbol이 존재합니다.
  겉보기엔 원시 값처럼 보이는 null도 있지만, 사실 모든 Object, 모든 구조화된 자료형은 프로토타입 체인에 따라 null의 자손입니다.

참조자료형

• 참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소를 저장한다.

• 참조자료형의 경우 값 자체의 복사가 일어나지 않는 이유는
  배열이 얼마나 많은 데이터를 가지고 있는지가 프로그램의 실행 중 수시로 변경 될 수 있기 때문

---

primitive data type 와 reference data type 의 차이점

변수를 선언하면 데이터가 담길 공간을 확보하고, 확보된 데이터의 주소값을 가지고 변수면과 매칭시키는 선언과정까지 동일하나, 할당과정에 차이를 갖는다.

07_Array.js

배열의 typeof

• 배열은 typeof를 적용시키면 'object'를 출력한다 Array.isArray() 를 사용하여 확인가능하다

• array는 index의 번호를 입력하여 변경할 수 있다
  

08_object.js

Object(객체)란
자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

객체의 프로퍼티와 메서드들은 '키값'으로 구분된다.

var object ={

    key1: value1,
    key2: value2,
    ...
}

---

프로퍼티

프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다.
즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다.

---

프로퍼티 키 :

빈 문자열을 포함하는 모든 문자열 또는 symbol 값

---

프로퍼티 값 : 모든 값

프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

---

메소드

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

---

객체의 모습

Object 생성자 함수

new Object를 사용하여 빈 객체를 생성 할 수 있다

프로퍼티 값 읽기

객체의 프로퍼티 값에 접근하는 방법은 마침표(.) 표기법과 대괄호([]) 표기법이 있다.

---

얕은 복사(shallow copy)와 깊은 복사(deep copy)

얕은복사

• 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성한다.
• 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조한다.
• 따라서, 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.

---

깊은복사

• 객체를 복사 할 때, 해당 객체와 인스턴스 변수까지 복사하는 방식.
• 전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.

---

this의 사용

- 단독으로 this를 호출하는 경우엔 global object를 가리킵니다

09) 전개문법(spread syntax)

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

전개 구문 사용

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

인수 목록의 모든 인수는 전개 구문을 사용할 수 있으며, 여러번 사용될 수도 있습니다.

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

유사배열

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.

var array = [1, 2, 3];
array; // [1, 2, 3]
var nodes = document.querySelectorAll('div'); // NodeList [div, div, div, div, div, ...]
var els = document.body.children; // HTMLCollection [noscript, link, div, script, ...]

Array.isArray(array); // true
Array.isArray(nodes); // false
Array.isArray(els); // false

* 직접 배열 리터럴로 선언한 array만 배열입니다.

nodes나 els처럼 []로 감싸져있지만 배열이 아닌 친구들을 유사배열이라고 한다.

---

function의 arguments

참조

10_Destructuring.js

구조 분해 할당(Destructing Assignment)

• 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
  -객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.

구조 분해 할당의 구문은 아래와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

var x = [1, 2, 3, 4, 5];

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

---

배열의 구조 분해

1) 기본적인 구조 분해 할당

const cat = { name: '야통', crying: '이얏호응!' };
const {name} = cat
const {crying} = cat
console.log(name) // '야통'
console.log(crying) // '이얏호응!'

2) spread operator로 나머지 객체 받아오기

const cat = { name: '야통', crying: '이얏호응!' };
const { name, ...args } = cat;
console.log(args) // {crying: "이얏호응!"}

3) 객체 덮어쓰기

const cat = { name: '야통', crying: '이얏호응!', servant: 'haha ha'}
const anotherCat = {
  ...cat,
  name: '연님',
  crying: '야옹'
}
console.log(anotherCat) // { name: '연님', crying: '야옹', servant: 'haha ha'}

순서에 따라 덮어 씌우는 값이 바뀔 수 있다.

const cat = { name: '야통', crying: '이얏호응!', servant: 'haha ha'}
const anotherCat = {
  name: '연님',
  crying: '야옹',
  ...cat
}
console.log(anotherCat) // { name: '야통', crying: '이얏호응!', servant: 'haha ha'}

참고