h34035 No Contents

프로젝트를 진행하면서 다음과 같은 고민을 하게 되었다. 위와 같은 화면에서 게임 결과에 따라 마피아의 이름을 동적으로 바꾸어 주어야 하는데, 고양이 이름의 배열과 출력해야 하는 결과는 다음과 같다. const catNames = ['고등어', '샴', '치즈', '삼색이', '네로', '오드아이']; const mafiaName = catNames[0]; console.log(`마피아는 ${mafiaName}였습니다.`}; 이때 고양이의 이름이 '샴'과 같이 받침이 있는 경우에는 '마피아는 샴였습니다.'와 같이 출력되므로 '마피아는 샴이었습니다'와 같이 출력하기 위해서는 조사를 변경해 주어야 한다. 처음에는 다음과 같이 고양이 이름에 조사를 붙여 해결할 수 있지 않을까 생각해 보았다. const catN..

ECMA Script 2015(ES6)에 추가된 Set 객체는 자료형에 관계없이 원시값과 객체 참조 모두 유일한 값을 저장하는 자료구조이다. 수학에서 다루는 집합과 동일한 개념이라고 볼 수 있다. Set 객체는 new 연산자와 함께 Set 생성자함수를 호출하여 생성할 수 있다. const set = new Set(); console.log(set); // Set(0) {} 생성자함수를 호출할 때 인수로 이터러블을 전달하면 해당 이터러블의 중복된 요소를 제거한 Set 객체가 생성된다. const set = new Set([3, 4, 4, 5]); console.log(set); // Set(3) { 3, 4, 5 } Set.prototype.add 메서드를 이용하여 Set 객체에 요소를 추가할 수 있다. ..

Date 생성자함수에 대해 알아본 지난 포스팅에 이어 이번에는 Date 생성자함수의 프로퍼티와 Date 프로토타입 객체의 메서드를 사용하며 궁금했던 점을 알아보고자 한다. 1. Date.UTC는 Date 생성자함수와 무엇이 다를까? 특정 연도, 월, 일, 시, 분, 초, 밀리초를 가지는 시각을 가지는 객체는 Date 생성자함수에 각 인수를 전달하며 만들 수 있다. 매개변수를 통해 받은 값을 각각 연, 월, 일...로 하는 객체를 생성하는데, 이 시간은 로캘 시간으로 해석되며 브라우저는 이를 로캘 시간을 나타내는 문자열로 출력해 준다. 한편 Date 객체의 프로퍼티 Date.UTC에 같은 인수를 전달하며 호출하면 다음과 같이 시간 값을 정수로 반환한다. 즉, Date 생성자함수에 연, 월, 일...을 전달..

0. 자바스크립트의 날짜와 시간 자바스크립트가 측정하고 표기하는 시간은 POSIX의 시간 표기법과 같이 1970년 1월 1일 UTC(협정 세계시) 00:00을 기준으로 시작하며 하루를 86400초로 계산하고, 그레고리력(현재의 양력)을 따른다. 한편 POSIX와 다르게 자바스크립트는 시간을 밀리초(1/1000초) 단위의 정수값으로 나타내며, 시간을 측정하는 시간을 다루는 표준 빌트인 객체인 Date()를 제공한다. Date 객체와 생성자함수에 대해 알아보자. 1. Date 생성자 함수 Date가 생성자함수로서 호출되면 새로운 Date 객체를 생성하고 초기화하며, 일반 함수로서 호출되면 현재의 UTC 시간을 문자열 형식으로 반환한다. 또한 전달되는 인수의 개수에 따라 다르게 동작한다. 1.1 일반 함수로서..

다음과 같은 동작을 하는 함수를 생각해 보자. 정수 요소가 담긴 배열에 대하여 요소의 값이 홀수일 때만 그 값의 제곱을 새로운 배열에 담아 반환하려고 한다. 즉, [2, 5, 3, -1, 9, -5, 8]과 같은 배열을 입력 받아 [25, 9, 1, 81, 25]를 반환하는 함수를 만들려고 한다. 먼저 값이 홀수인 요소만 담아 새로운 배열을 반환하는 함수는 filter로 구현할 수 있다. Array.prototype.filter() 메서드의 구문은 다음과 같다. filter((element, index, array) => { ... } ) filter에 요소값, 요소 인덱스, 순회되는 배열 객체를 매개변수로 받는 콜백함수를 전달하며 호출하면 콜백함수의 반환값이 true인 경우만 요소를 유지하고, 테스트를..

배열 요소의 순서를 정렬할 때 Array.prototype.sort() 메서드를 다음과 같이 사용할 수 있다. const array = [4, 2, 6, 3, 5, 8, 9, 10]; const sorted = array.sort(); console.log(sorted); // [10, 2, 3, 4, 5, 6, 8, 9] console.log(array); // [10, 2, 3, 4, 5, 6, 8, 9] 이때 원본 배열 array 자체의 순서가 변경된 것을 알 수 있다. 즉, sort() 메서드는 mutator method이다. 원본 배열의 순서를 변경하지 않기 위해 다음과 같이 메서드를 사용하겠다. const array = [4, 2, 6, 3, 5, 8, 9, 10]; const sorted =..

0. 자기 참조 변수 this this는 자바스크립트 엔진이 암묵적으로 생성해 주는 자기 참조 변수이다. 자기 참조 변수란 자신이 속한 객체, 혹은 자신이 생성할 인스턴스를 가리키는 식별자라는 뜻이다. 생성자 함수가 인스턴스를 생성할 때, 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 전이므로 인스턴스를 가리키는 식별자가 존재하지 않는다. 이러한 경우에 미래에 자신이 생성할 인스턴스를 가리키기 위해 다음과 같이 this를 사용할 수 있다. function Square(side) { this.side = side; // this는 미래에 생성할 인스턴스(즉, 아래에서 생성하게 될 square객체)를 가리킨다. } const square = new Square(8); console.log(squa..

1. 함수 객체 식별자와 함수 이름 다음과 같이 두 수를 더하는 함수를 함수 표현식으로 정의하고 호출해 보자. const addTwoNums = function add(a, b) { return a + b; }; console.log(addTwoNums(2, 5)); // 7 이때 함수 이름은 'add'이고, 'addTwoNums'는 add 함수 객체를 참조하는 식별자이다. 함수 이름 add로 함수를 참조하려고 하면 const addTwoNums = function add(a, b) { return a + b; }; console.log(add(2, 5)); // ReferenceError: add is not defined add가 정의되지 않았다며 ReferenceError가 발생하는 것을 볼 수 있..