[JS] JavaScript Koans

 

JavaScript Koans 과제를 수행하면서 제대로 정리되지 않았던 개념들을 다시 정리해본다.

 

참조 자료형은 주소값이 저장된다.

---

원시 자료형과의 차이에 관한 문제를 풀면서 개념이 상충되어 이해가 가지 않았던 부분.

참조 자료형은 같은 주소값을 갖고 있는 경우 원본 또는 복제 배열이나 객체의 값이 달라졌을 때 값이 함께 달라진다!!

 

✏️ 원본 참조 자료형과 복제 참조 자료형에 동일한 주소값을 주는 경우

참조 자료형 선언 후 새로운 변수에 참조 자료형을 선언했던 변수를 할당한다

/* 06 Types part2 */

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

overTwenty.push('san');
console.log(allowedToDrink); // ['hongsik', 'minchul', 'hoyong', 'san']
// overTwenty와 allowedToDrink는 주소값이 동일하다!

overTwenty[1] = 'chanyoung';
console.log(allowedToDrink[1]); // 'chanyoung'
// overTwenty와 allowedToDrink는 주소값이 동일하다!

/* 06 Types part2 */

const person = {
    son: {
      age: 9,
    },
  };

const boy = person.son; 
boy.age = 20;

console.log(person.son.age); // 20
// boy와 person.son은 같은 주소값이 동일하다!

 

✏️ 원본 참조 자료형과 복제 참조 자료형에 다른 주소값을 주는 경우

배열 메소드 등을 이용한다. (assign, slice 등...)

/* 08 Object */

const obj = {
    mastermind: 'Joker',
    henchwoman: 'Harley',
    relations: ['Anarky', 'Duela Dent', 'Lucy'],
    twins: {
      'Jared Leto': 'Suicide Squad',
      'Joaquin Phoenix': 'Joker',
      'Heath Ledger': 'The Dark Knight',
      'Jack Nicholson': 'Tim Burton Batman',
    },
};

function passedByReference(refObj) {
    refObj.henchwoman = 'Adam West';
}

위와 같은 객체와 함수가 있다고 할 때...

passedByReference(obj);

console.log(obj.henchwoman); // 'Adam West'

함수를 실행하면 obj의 henchwoman 값은 'Adam West'가 된다!

const copiedObj = Object.assign({}, obj);
copiedObj.mastermind = 'James Wood';
console.log(obj.mastermind); // 'Joker'

obj.henchwoman = 'Harley';
console.log(copiedObj.henchwoman); // 'Adam West'

객체를 연결하는 assign 메소드를 이용해 copiedObj를 만들어 주었는데, 이것은 obj와 다른 주소값을 갖게 된다.

const copiedObj = obj; 였다면 같은 주소값을 갖고 있었을 것!

 

다른 주소값을 갖고 있기 때문에 copiedObj의 mastermind 값을 변경해주어도 obj 객체에는 영향을 주지 못한다.

따라서 obj.mastermind는 'Joker'가 출력!

 

마찬가지로 obj와 copiedObj는 다른 주소값을 갖고 있기 때문에 obj를 변경해도 copiedObj에는 영향을 주지 못한다.

따라서 copiedObj.henchwoman은 처음 assign 했을 때의 값인 'Adam West' 출력.

 

/* 07 Array */

const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];

function passedByReference(refArr) {
    refArr[1] = 'changed in function';
}
passedByReference(arr); // ['zero', 'changed in function', 'two', 'three', 'four', 'five']

배열을 선언하고 함수를 선언하여 호출했을 때, 함수에 의해 arr은 위와 같이 변한다.

const assignedArr = arr;
assignedArr[5] = 'changed in assignedArr';
console.log(arr[5]); // 'changed in assignedArr'

const copiedArr = arr.slice();
copiedArr[3] = 'changed in copiedArr';
console.log(arr[3]); // 'three'

assignedArr에는 arr의 주소값을 바로 할당해주었기 때문에 assignedArr의 값이 달라지면 arr의 값 또한 달라진다.

그러나 copiedArr은 slice 메소드를 이용해 내용은 같지만 주소값을 다르게 할당해준 배열이다!

따라서 copiedArr의 값을 변경해주어도 arr에는 영향을 주지 않으므로 'three'가 출력된다.

 

 

repeat 메소드

---

string에 사용되는 메소드로, 문자열을 주어진 횟수만큼 반복한다.

/* 08 Object */

const megalomaniac = {
    mastermind: 'Brain',
    henchman: 'Pinky',
    getFusion: function () {
      return this.henchman + this.mastermind;
    },
    battleCry(numOfBrains) {
      return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
    },
};

megalomaniac이라는 객체가 선언되어 있는데... 잘 보면 그 안에 battleCry라는 함수가 또 선언되어 있고 battleCry는 string을 리턴한다.

battleCry가 리턴하는 것 중에... ` ${this.mastermind}`.repeat(numOfBrains) 이 부분 너무 당황스러웠다.. ㅋㅋㅋㅋㅋ repeat,, 메소드 같긴하고.. 반복하는 메소드 같긴한데.. 

console.log(megalomaniac.battleCry(3)); // 'They are Pinky and the Brain Brain Brain'

만약 위의 함수를 실행하면 They are Pinky and the BrainBrainBrain이 출력되는걸까?

라고 생각했지만 repeat가 적용된 스트링은 ` ${this.mastermind}`이기 때문에 앞의 공백까지 함께 출력한다!

따라서 정답은 'They are Pinky and the Brain Brain Brain'.

 

 

arguments 객체

---

/* 09 SpreadSyntax */

function getAllParamsByArgumentsObj() {
    return arguments;
}

위 함수를 처음 봤을 때.... 굳어버렸다 ㅎ ㅎㅎ

return arguments가 뭔데...?

 

MDN arguments MDN에서 설명하고 있는 arguments..

간단하게 결론만 말하자면 arguments는 JS 내에서 제공하는(?) 배열과 비슷하지만 배열은 아닌 객체이다!(?)

인자를 전달 받아서 객체로 반환해준다.

배열과 비슷하기 때문에 length 프로퍼티는 사용 가능하지만 그 외의 배열 속성 메소드는 사용하지 못한다고..하는 것 같다..

어떤 배열의 속성도 없지만 또 배열과 비슷하기는 해서 Array.from() 같은 메소드를 사용해 배열로 반환할 수 있다고 한다..

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

console.log(Object.keys(argumentsObj)); // ['0', '1', '2']
console.log(Object.values(argumentsObj)); // ['first', 'second', 'third']

위와 같이 인자를 전달받아서 변수에 할당해주면 객체가 생성된다. 일단은 객체이기 때문에 key와 value를 뽑아낼 수 있다는 점

value는 전달 받은 인자이지만 key는 아마.. arguments가 자체적으로 0부터 번호를 매기는 것이 아닌가 싶다.

console.log(Array.isArray(argumentsObj)); // false

const argsArr = Array.from(argumentsObj);
console.log(Array.isArray(argsArr)); // true
console.log(argsArr); // ['first', 'second', 'third']

객체이기 때문에 Array.isArray()로 판별했을 시는 false가 출력되고,

Array.from()으로 진짜 배열로 만들어주면.. Array.isArray()가 true가 된다~

값은 key가 사라진 value만 존재..

 

 

쉽지만은 않은 과제였다.. 머리 속에서 개념이 너무 뒤죽박죽 섞여있다는 것을 반증하는 시간 ㅎㅎ..

JavaScript Koans는 나의 고통의 흔적과 함께 마무리~