JavaScript Koans

2. Types (1)

JavaScript 암시적 형 변환

✖️ 연산자

문자 > 숫자 > 불리언

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; // 100
100 + “점”; // ”100점”
“100” + “점”; // ”100점”
“10” + false; // ”10false"
99 + true; // 100

다른 연산자 (- * / %)

숫자 > 그 외

string * number // number
string * string // number
number * number // number
string * boolean // number
number * boolean // number
"2" * false; // 0
2 * true; // 2

4. Scope

호이스팅 (Hoisting)

🔗 호이스팅

7. Array

push(), unshift(): 배열의 새로운 길이 반환

pop(), shift(): 제거된 요소 반환

const arr = [1, 2, 3];

arr.push(4); // 4
arr; // [1, 2, 3, 4]

arr.unshift(0); // 5
arr; // [0, 1, 2, 3, 4]

arr.pop(); // 4
arr; // [0, 1, 2, 3]

arr.shift(); // 0
arr; // [1, 2, 3]

slice(), slice(0): 전체 복사

const arr = [1, 2, 3];

arr.slice(); // [1, 2, 3]
arr.slice(0); // [1, 2, 3]

8. Object

this

🔗 this

String.repeat(): 문자열 반복

'abc'.repeat(-1) // RangeError
'abc'.repeat(0) // ''
'abc'.repeat(1) // 'abc'
'abc'.repeat(2) // 'abcabc'

Object.assign(target, source)

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

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

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

🚨 Object.assign()은 얕은 복사를 한다.

• 얕은 복사(shallow copy): 객체의 속성 중 값이 참조 자료형인 경우 해당 주소만 복사
• 깊은 복사(deep copy): 주소만 카피하지 않고, 값을 모두 복사
• 대부분의 경우 shallow copy로도 충분하기 때문에, spread syntax나 Object.assign과 같은 보통의 복사 방법은 shallow copy가 적용되어 있다.

9. Spread Syntax

• arguments를 통해 '비슷하게' 함수의 전달인자들을 다룰 수 있다. (spread syntax 도입 이전)
• arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'이다.

function getAllParamsByArgumentsObj() {
  return arguments;
}

const argumentsObj = getAllParamsByArgumentsObj("first", "second", "third");

argumentsObj; // Arguments(3) ["first", "second", "third", ...] ➡️ 유사 배열 객체
Object.keys(argumentsObj); // ["0", "1", "2"]
Object.values(argumentsObj); // ["first", "second", "third"]