section1/unit10/Javascript 핵심 개념과 주요 문법(9/8)

블로깅 주제

• Javascript Koans 과제

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 좋은 페어 분을 만나 원활히 과제를 마쳤다. 이번 koans 과제를 하며 모르는 것들과 헷갈렸던 부분들을 많이 짚어볼 수 있었고, 처음으로 유닛 테스트 작성 관련한 부분을 만져볼 수 있어 유익한 경험이였던 것 같다. 내가 모르는게 이렇게 많다니! 자바스크립트 공부를 더 꼼꼼히 해야겠다. 특히 얕은 복사/깊은 복사는 정말 이해가 안된다...ㅠㅠ 

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• Javascript Koans

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

1. Introduction

- 유닛 테스트를 작성하는 방법

테스트하는 값과 기대값을 비교하기 위해 expect 함수를 사용

expect(테스트하는값).기대하는조건
expect(isEven(3)).to.be.true => 'isEven(3)'의 결과값은 참(true)이어야 한다
expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'

 

2. Types-part1

+ :  형식 검사 진행. 문자열 연결로 처리

1 + '1' -> '11'

'1' + true -> '1true'

 - : 문자열 검사 기능 없어 타입 검사 하지않음. 값을 숫자 그대로 변환

123 - '1' -> 122

true -> 1, false -> 0

1 + true -> 2

3. LetConst

'const'로 선언된 변수에는 재할당(reassignment)이 금지됨

 

'const'로 선언된 배열 또는 객체의 경우 새로운 요소를 추가하거나 삭제할 수 있음. 재할당은 금지!

//배열

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).to.equal(42);
// 재할당은 금지됩니다.
// arr = [1, 2, 3];


//객체

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

delete obj.x;
expect(obj.x).to.equal(undefined);

// 재할당은 금지됩니다.
// obj = { x: 123 };

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

4. Scope

변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳

 

- 함수 표현식 vs 함수 선언식

함수 선언식 (function declartion): 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것

function sum(a,b) {
    return a + b;
}

함수 표현식 (function expression): 정의한 function을 별도의 변수에 할당하는 것

const sum = function(a,b) {
    return a + b;
}

- 호이스팅

1. var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
2. var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
3. let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

-함수에서의 호이스팅

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

함수 선언식

• 함수 전체를 호이스팅. 함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려짐.
• 전역적으로 선언했을 때 중복적으로 동명의 함수를 쓰게 된다면, 원치 않는 결과를 초래할 수 있음

함수 표현식

•  별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅. -> 선언부만 호이스팅됨

https://taenami.tistory.com/86

함수 선언식 과 함수 표현식 차이점

https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

함수 표현식 vs 함수 선언식

- default parameter

function defaultParameter(num = 5) {
      return num;
}

expect(defaultParameter()).to.equal(5); // 아규먼트 없으니 기본 값인 '5' 반환됨
expect(defaultParameter(10)).to.equal(10); // 아규먼트 10으로 전달되어 '10'이 반환됨

5. ArrowFunction

function 키워드를 생략하고 화살표 => 를 붙임

 

// 함수 표현식
const add = function (x, y) {
      return x + y
    }
    
// 화살표 함수
const add = (x, y) => {
      return x + y
    }
    
// 1. 리턴을 생략할 수 있습니다
const subtract = (x, y) => x - y

// 2. 필요에 따라 소괄호를 붙일 수도 있습니다
const multiply = (x, y) => (x * y)

// 3. 파라미터가 하나일 경우 소괄호 생략이 가능합니다
const divideBy10 = x => x / 10

- 화살표 함수를 이용하여 클로저 표현

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

6. Types-part2

1. stack : 원시 자료형의 데이터가 저장되는 공간 
2.  heap : Object 자료형의 데이터가 저장되는 공간

- .deep.equal

배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher

const overTwenty = ['hongsik', 'minchul', 'hoyong'];
let allowedToDrink = overTwenty;

overTwenty.push('san');
expect(allowedToDrink).to.deep.equal(['hongsik', 'minchul', 'hoyong', 'san']);
overTwenty[1] = 'chanyoung';
expect(allowedToDrink[1]).to.deep.equal('chanyoung');

7. Array

- slice

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

 const arr = ['peanut', 'butter', 'and', 'jelly'];

expect(arr.slice(1)).to.deep.equal(['butter', 'and', 'jelly']);
expect(arr.slice(0, 1)).to.deep.equal(['peanut']);
expect(arr.slice(0, 2)).to.deep.equal(['peanut', 'butter']);
expect(arr.slice(2, 2)).to.deep.equal([]);
expect(arr.slice(2, 20)).to.deep.equal(['and', 'jelly']);
expect(arr.slice(3, 0)).to.deep.equal([]);
expect(arr.slice(3, 100)).to.deep.equal(['jelly']);
expect(arr.slice(5, 1)).to.deep.equal([]);
expect(arr.slice(0)).to.deep.equal(['peanut', 'butter', 'and', 'jelly']);

8. Object

- 배열과 객체의 차이점 : length 사용 가능 여부

//빈 배열의 길이는 0
const emptyArr = [];
expect(typeof emptyArr === 'array').to.equal(false);
expect(emptyArr.length).to.equal(0);

//빈 객체의 길이는 undefined
const emptyObj = {};
expect(typeof emptyObj === 'object').to.equal(true);
expect(emptyObj.length).to.equal(undefined);

객체에서는 length 속성 사용 불가!

객체의 길이를 알기 위해서는 객체에 몇 개의 아이템 즉 "KEY"가 몇 개 존재하는 지를 파악하면 됨

onst obj = { a: "AA", b: "BB", c: "CC", d: "DD", e: "EE" };

Object.keys(obj).length;

// 출력 5

- 객체의 속성(property) : 객체 안에 저장되어 있는 이름-값 쌍(name-value pair)

- 메소드 : 어떤 객체의 속성으로 정의된 함수

- 'this'

https://sangjuntech.tistory.com/24

[this, 화살표 함수] Javascript this 완전정복!

- repeat 메서드

현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열

'abc'.repeat(-1);   // RangeError
'abc'.repeat(0);    // ''
'abc'.repeat(1);    // 'abc'
'abc'.repeat(2);    // 'abcabc'
'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
'abc'.repeat(1/0);  // RangeError

- 깊은 복사 vs 얕은 복사

• 깊은 복사 : 값 자체의 복사
• 얕은 복사 : 참조(주소)값의 복사

//얕은 복사
const obj = { vaule: 1 }
const newObj = obj;

newObj.vaule = 2;

console.log(obj.vaule); // 2
console.log(obj === newObj); // true

//깊은 복사
let a = 1;
let b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

- Object.assign() 메소드

const obj = { a: 1 };
const newObj = Object.assign({}, obj);

newObj.a = 2;

console.log(obj); // { a: 1 }
console.log(obj === newObj); // false

Object.assign()는 2차원 객체에서 깊은 복사가 이루어지지 않는다!!!!

-> 완벽한 깊은 복사가 아니다. assign 은 깊은 복사를 하기엔 한계가 있는 메서드라서 깊은 복사를 할 때 assign 메서드는 잘 안 쓴다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const newObj = Object.assign({}, obj);

newObj.b.c = 3;

console.log(obj); // { a: 1, b: { c: 3 } }
console.log(obj.b.c === newObj.b.c); // true

https://velog.io/@recordboy/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%ACShallow-Copy%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%ACDeep-Copy

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

9. SpreadSyntax

- 빈 배열에 전개 문법을 사용할 경우, 아무것도 전달되지 않음

const spread = [];
const arr = [0, ...spread, 1];
expect(arr).to.deep.equal([0, 1]);

- spread는 완전히 깊은 복사가 아니다?!

2차원부터는 깊은복사가 이루어지지 않는다 ! -> 한단계까지의 깊은복사만을 이용하려면 전개연산자를 써도 좋음..

https://wlswoo.tistory.com/38

[JS] 전개(spread)는 완전히 깊은 복사일까?

https://velog.io/@euneun/JS-%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-%EA%B7%B8%EB%A6%AC%EA%B3%A0-spread-operator%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

JS - 깊은복사와 얕은복사 그리고 spread operator에 대해서

- arguments

모든 함수의 실행 시 자동으로 생성되는 '객체'

 

function getAllParamsByRestParameter(...args) {
      return args;
    }

    
function getAllParamsByArgumentsObj() {
      return arguments;
    }

const restParams = getAllParamsByRestParameter('first', 'second', 'third');
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

expect(restParams).to.deep.equal(['first', 'second', 'third']);
expect(Object.keys(argumentsObj)).to.deep.equal(['0', '1', '2']);
expect(Object.values(argumentsObj)).to.deep.equal(['first', 'second', 'third']);

// arguments와 rest parameter를 통해 배열로 된 전달인자(args)의 차이 확인하기
expect(restParams === argumentsObj).to.deep.equal(false);
expect(typeof restParams).to.deep.equal('object');
expect(typeof argumentsObj).to.deep.equal('object');
expect(Array.isArray(restParams)).to.deep.equal(true);
expect(Array.isArray(argumentsObj)).to.deep.equal(false);

const argsArr = Array.from(argumentsObj);
expect(Array.isArray(argsArr)).to.deep.equal(true);
expect(argsArr).to.deep.equal(['first', 'second', 'third']);
expect(argsArr === restParams).to.deep.equal(false);

- Array.from 메서드

문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드

(※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미)

// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("Hello"));
// [ 'H', 'e', 'l', 'l', 'o' ]

// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));
// [ '찬민', '희진', '태인' ]

// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const funcA = (...arguments) => {
    return Array.from(arguments)
}

console.log(funcA(1,2,3,4,5));
// [ 1, 2, 3, 4, 5 ]

https://merrily-code.tistory.com/158

너! 배열이 되어라! - Array.from() 메서드 사용하기

10. Destructuring

- 객체의 단축(shorthand) 문법

const name = '김코딩'
const age = 28
const person = {
      name,
      age,
      level: 'Junior',
    }
expect(person).to.eql({name: '김코딩', age: 28, level: 'Junior'})

- rest/spread 문법을 객체 분해에 적용

const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student

expect(name).to.eql('최초보')
expect(args).to.eql({major: '물리학과'})