ES stands for ECMAScript, which the standardized specification for scripting languages with JavaScript being the most popular implementation of ECMAScript. ECMAScript defines the syntax, semantics, and behavior of the Javascript programming language
ES5 (ECMAScript 5) was released in 2009 and brought several significant enhancements to JavaScript. Some notable features introduced in ES5 include:
Strict Mode: ES5 introduced strict mode, which helps prevent common coding mistakes by enabling a stricter set of rules for JavaScript code.
Function.prototype.bind: The bind method allows you to create a new function with a specific context (the this value) and pre-set arguments. It's useful for creating functions with a fixed context, particularly in event handlers.
Array Methods: ES5 added several useful methods to the Array prototype, such as forEach, map, filter, reduce, and indexOf. These methods provide a more concise and functional programming-style approach to working with arrays.
JSON: ES5 standardized the JSON object, providing methods like JSON.parse and JSON.stringify for parsing and stringifying JSON data.
ES6 (ECMAScript 2015), also known as ES2015, introduced many significant improvements and new features to JavaScript. Some key features introduced in ES6 include:
Arrow Functions: Arrow functions provide a concise syntax for writing anonymous functions, with implicit returns and lexical scoping of this. They are especially useful for writing shorter and more readable code.
let and const: ES6 introduced block-scoped variables let and const, which offer alternatives to the previously used var keyword. let allows declaring variables with block scope, while const is used for defining constants.
Classes: ES6 introduced a more straightforward syntax for creating classes in JavaScript, using the class keyword. Classes provide a way to define object blueprints and create instances with shared methods and properties.
Modules: ES6 introduced a standardized module system, allowing JavaScript code to be organized into separate files with explicit dependencies and exports. This promotes modularity and helps in building larger applications.
Template Literals: Template literals provide an improved way to concatenate strings and embed expressions using backticks ( ``). They support multi-line strings and expression interpolation.
Destructuring Assignment: Destructuring allows you to extract values from arrays or objects into individual variables, providing a concise way to access nested data structures.
These are just a few highlights of the features introduced in ES5 and ES6. Subsequent versions of ECMAScript, such as ES2016, ES2017, and so on, have brought further enhancements and new features to JavaScript.
var answer = [];
while(answer.length < 3){
var randomNum = Math.floor(Math.random()*10);
if(answer.indexOf(randomNum) > -1) continue;
answer.push(randomNum);
}
위 코드에서는 랜덤으로 숫자를 생성해 생성된 숫자가 4개 미만이라면 새로운 숫자가 생성되고,
중복되지 않는다고 하면 결괏값인 randomNum 에 저장이 된다.
조금 더 자세히 알아보도록 하자
생성되는 숫자 제어하기
while(answer.length < 3){
만약의 answer 배열의 길이가 3보다 작다면 ~ 으로 시작해서 작동하는 코드이다.
answer 배열의 길이가 3개 이상이라면 멈추게 된다
숫자를 정수화한 후 Randomnum에 넣기
var randomNum = Math.floor(Math.random()*10);
이때 math.random()으로 숫자를 생성하고,
이 숫자의 범위는 0~1이기 때문에 *10을 해줘서 1~10으로 바꿔준다.
그 후 Math.floor로 소숫점을 떨궈주고, randomNum으로 정의해준다.
코드의 중복 확인하기
if(answer.indexOf(randomNum) > -1) continue;
indexof: 지정된 요소의 인덱스를 검색하는 javascript의 내장 메서드이다.
호출한 배열에서 첫번째로 일치하는 요소의 인덱스변환, 일치하는 요소가 없는 경우 -1 을 반환한다.
만약 2번째 숫자가 같았으면 해당숫자의 인덱스인 1이 반환되고,
첫번째 숫자가 같았으면 해당 숫자의 인덱스인 0이 반환된다.
-1보다 작으면 continue로 계속해준다
indexof도 곧 포스팅할 예정이다!.
중복이 아니라면
answer.push(randomNum);
randomNum에 answer가 들어가게 된다
4. 세자리 숫자 입력받고 사용자 입력의 중복/글자수 이상 처리하기
function playGame() {
readline.question('세자리 숫자를 입력하세요.', (playerInput) => {
count++;
if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
console.log("세자리의 서로 다른 숫자를 입력하세요.");
playGame();
return;
}
readline를 이용하여 세자리 숫자를 입력받았다.
그러나 만약 세 자리 숫자 안에 중복된 숫자가 있거나, 4자리라면 어떻게 되는 걸까?
당연히 프로그램 진행에 문제가 생긴다.
자세히 뜯어보자.
세 자리 숫자 입력받고 입력받을 때 마다 시도횟수 하나씩 증가시키기
function playGame() {
readline.question('세자리 숫자를 입력하세요.', (playerInput) => {
count++;
나는 playGame이라는 함수를 사용하기로 했다
제일 먼저 readline.question으로 사용자의 입력을 받았다
실행 결과의 이 부분이라고 생각하면 될 것 같다.
사용자가 입력한 값은 콜백 함수의 매개변수인 playerInput에 저장된다.
한번 입력을 받을 때 마다 count 횟수를 1씩 늘려준다
이는 마지막에 시도 횟수를 출력할때 사용된다
사용자 입력의 중복이 있거나 길이가 3이 아니라면
if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
console.log("세자리의 서로 다른 숫자를 입력하세요.");
playGame();
return;
}
논리 OR 연산자
두 개의 피연산자중 하나 이상이 True이상인지를 확인하고, 결과로 True를 반환한다.
왼쪽 피연산자를 평가한 결과가 True이면 오른쪽 피연산자 평가 x 그냥 바로 True반한
왼쪽 피연산자를 평가한 결과가 False 이면 오른쪽 피연산자 평가하고 그 결과를 반환함
(추후 포스팅해볼 내용이 더 늘어나버렸네…;;
이걸 어떻게 적용했냐면
if(playerInput.length !== 3 || new Set(playerInput).size !== 3){
이 상황에서 playerInput.length이 3이 아니라면, 뒤에 중복 여부 결과는 보지 않고 바로 True를 반환한다.
숫자가 3개도 아닌데 굳이 중복 볼 필요가 있냐는거다.
그래서 먼저 앞의 숫자 갯수를 확인해본 후 playerInput을 Set 형태로 바꿔준다
*set은 중복이 존재할 수 없다
중복이 없는 상태에서 숫자의 갯수가 3개가 맞는지 확인하는 과정이였다.
논리 OR 연산자 쓰는 게 습관이 되어가고 있다 ! &ㅠ&
5. 기본 값 세팅하기
var strike = 0;
var ball = 0;
var checkResult = Array(3).fill(0);
strike 카운트와 Ball 카운트를 초기화해준다.
그리고 Array(3).fill(0)이라는 게 보이는데 이는 길이간 3인 배열을 생성하고, 그 배열의 모든 요소를 0으로 채우는 역할을 한다.
Array 생성자 함수에 문자 3을 인수로 넣어 배열의 길이를 설정하고, fill 메서드를 조합해서 쓰여진다.
나는 이것을 세 자리 수에 각각 비교하도록 구성해보려 하였다.
array와 Fill을 사용하지 않고 작성한다면??
직접 배열 리터럴을 사용하여 배열을 생성하고 요소에 초기값을 할당한다
var checkResult = [0, 0, 0];
배열 생성 후에 반복문이나 인덱스 접근을 통해 각 요소에 초기값을 할당한다.
var checkResult = [];
for (var i = 0; i < 3; i++) {
arr[i] = 0;
}
빈 배열을 생성한 후에 반복문을 사용하여 각 요소에 초기값 0을 할당하는 법.
배열의 크기가 커지면 이 방향을 사용하여야 할듯
away.from 메서드를 사용하여 배열을 생성하고 초기값을 할당한다
var arr = Array.from({ length: 3 }, () => 0);
이러한 방법으로도 쓸 수 있다. array.fill이랑 다른 점이라면 여러 개의 매개변수를 받을 수 있다 정도?
