📝 오늘 한 것

1. array.slice() / 예약어 arguments / 길이를 갖는 빈 배열 / array.join() / Date() / 키워드 in / 객체 생성자 함수 & new 연산자 / private variable

2. javascript-koans 풀이

📚 배운 것

javascript-koans

풀면서 모르거나 헷갈렸던 부분 정리

---

1. AboutArrays.js

1) array.slice(begin, end);

var array = ["peanut", "butter", "and", "jelly"];

console.log(array.slice(2, 2));
console.log(array.slice(2, 1));
// [] → begin이 end와 같거나 end보다 큰 경우에는 '빈 배열'을 출력한다

console.log(array.slice(5, 1));
// [] → begin이 배열의 길이보다 큰 경우에는 '빈 배열'을 출력한다

console.log(array.slice(3, 0));
// [] → begin이 배열의 길이와 같은 경우에는 '빈 배열'을 출력한다

2. AboutFunctions.js

1) 예약어 arguments

function returnAllArgs() {
  var argsArray = [];
  for (var i = 0; i < arguments.length; i += 1) {
    argsArray.push(arguments[i]);
  }
  console.log(argsArray);
  // ['first', 'second', 'third']
}

returnAllArgs('first', 'second', 'third');

3. AboutObjects.js

1) 길이를 갖는 빈 배열(Array) 생성

var array = new Array(5);

console.log(array);
// [undefined, undefined, undefined, undefined, undefined]

2) array.join();

(1) 개념

var array = new Array(5);

console.log(array.join(''));
// ''

console.log(array.join(' '));
// '    '

console.log(arrya.join(' ' + 'coke'));
// ' coke coke coke coke'

(2) 응용

var megalomaniac = {
  mastermind : "Brain",
  henchman: "Pinky",
  battleCry: function (noOfBrains) {
    return "They are " + this.henchman + " and the" +
      Array(noOfBrains + 1).join(" " + this.mastermind);
  }
};

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

3) Date()

현재 날짜와 시간을 읽어오거나 설정할 수 있다

(1) Date 객체 생성

var date = new Date(); // 현재 날짜와 시간을 읽어옴
var date = new Date(년, 월, 일); 
var date = new Date(년, 월, 일, 시, 분, 초);

(2) Date 객체의 날짜와 시간을 읽어오는 메서드

date.getFullYear()
// 연도

date.getMonth()
// 월 (주의! 0 = 1월, 11 = 12월)

date.getDate()
// 일

date.getDay()
// 요일 (주의! 0 = 일요일, 6 = 토요일)

date.getHours()
// 시 (주의! 0 = 새벽 12시, 23 = 오후 11시)

date.getMinutes()
// 분

date.getSeconds()
// 초

date.getMilliseconds()
// 밀리초 (주의! 1000ms = 1s)

date.getTime()
// 1970년 이후 경과된 시간 (밀리초 형태로 표현됨)

date.toGMTString(), date.toUTCString()
// GMT(그리니치 평균시)와 UTC(협정 세계시)를 기준으로 하는 날짜와 시간
// ex) "Fri, 17 Sep 2021 07:45:08 GMT"

date.toString();
// ex) "Fri Sep 17 2021 16:45:08 GMT+0900 (한국 표준시)"

date.toTimeString();
// ex) "16:45:08 GMT+0900 (한국 표준시)"

date.toLocaleString()
// 현재 지역의 형식으로 표현된 날짜와 시간
// ex) 대한민국의 경우, "년.월.일. 오전/오후 시:분:초" → "2021. 9. 17. 오후 4:45:08"

(3) Date 객체의 날짜와 시간을 설정하는 메서드

• 위의 get 메서드들을 set 메서드로 바꿔 쓸 수 있음

date.setFullYear(설정하고 싶은 연도);

date.setMonth(설정하고 싶은 월);

date.setDate(설정하고 싶은 일);

.
.
.

4) 키워드 in

객체에 해당 프로퍼티가 존재하는지 확인 (true/false)

var syong = {
  name : 'syong',
  age : 15,
  like : 'piano',
  hate : 'exercise'
};
console.log('hate' in syong); // true
console.log('hobby' in syong); // false

5) 객체 생성자 함수 & new 연산자

new 연산자와 생성자 함수 참고

• 재사용 가능한 객체 생성 코드
• (객체 리터럴 문법으로 만드는 것보다) 유사한 객체 여러 개를 훨씬 쉽게 만들 수 있다

// 객체 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

var simpleCircle = new Circle(10); // new 연산자 이용해 simpleCircle이라는 객체 생성
console.log(simpleCircle);
// { radius : 10 }

var colouredCircle = new Circle(5); // new 연산자 이용해 colouredCircle이라는 객체 생성
colouredCircle.colour = 'red';
console.log(colouredCircle);
// { radius : 5, colour : 'red' }

• new 연산자를 이용해 Circle 함수에 10이라는 매개변수를 전달하여 실행함으로써 simpleCircle 객체를 생성하는 과정

function Circle(radius) {
  // this = {} → 빈 객체를 만들어 this에 할당 (암시적인 과정)
  this.radius = radius; // this = { radius = 10 }
  // return this → this를 반환 (암시적인 과정)
}

4. AboutMutability.js

1) 생성자 및 생성자 인수 안의 변수는 private하다

[TIL] 210915 中 'private variable' 부분 참고

(1) 문제 코드

function Person(firstname, lastname)
{
  var fullName = firstname + " " + lastname;

  this.getFirstName = function () { return firstname; };
  this.getLastName = function () { return lastname; };
  this.getFullName = function () { return fullName; };
}
var aPerson = new Person ("John", "Smith");

aPerson.firstname = "Penny";
aPerson.lastname = "Andrews";
aPerson.fullName = "Penny Andrews";

expect(aPerson.getFirstName()).toBe(FILL_ME_IN);
expect(aPerson.getLastName()).toBe(FILL_ME_IN);
expect(aPerson.getFullName()).toBe(FILL_ME_IN);

aPerson.getFullName = function () {
  return aPerson.lastname + ", " + aPerson.firstname;
};

expect(aPerson.getFullName()).toBe(FILL_ME_IN);

(2) 풀이 및 해석

📌를 표시한 부분이 이해를 위해 내가 끼워 넣은 코드임

// 객체 생성자 함수
function Person(firstname, lastname)
{
  var fullName = firstname + " " + lastname;

  this.getFirstName = function () { return firstname; };
  this.getLastName = function () { return lastname; };
  this.getFullName = function () { return fullName; };
}

// new 연산자 이용해 aPerson이라는 객체 생성
var aPerson = new Person ("John", "Smith");

// 📌 여기까지 코드의 결과
aPerson = {
  getFirstName : function () { return firstname; },
  getLastName : function () { return lastname; },
  getFullName : function () { return fullName; }
}

// 객체에 프로퍼티 추가 ❗
// 객체의 기존 프로퍼티에 영향 ❌, 기존 프로퍼티 값 변경 ❌
aPerson.firstname = "Penny";
aPerson.lastname = "Andrews";
aPerson.fullName = "Penny Andrews";

// 📌 여기까지 코드의 결과
aPerson = {
  getFirstName: function () { return firstname; }, // return 값 "John"
  getLastName: function () { return lastname; }, // return 값 "Smith"
  getFullName: function () { return fullName; }, // return 값 "John Smith"
  firstname: "Penny",
  lastname: "Andrews",
  fullName: "Penny Andrews"
}

// 그러므로
expect(aPerson.getFirstName()).toBe("John");
expect(aPerson.getLastName()).toBe("Smith");
expect(aPerson.getFullName()).toBe("John Smith");

// 한편,
aPerson.getFullName = function () {
  return aPerson.lastname + ", " + aPerson.firstname;
};

// 그러므로
expect(aPerson.getFullName()).toBe("Andrews, Penny");

✨ 내일 할 것

1. javascript-koans WLs마무리