코딩/위코드 코딩학습

[위코드] TIL(Today I am learned) -07

카슈밀 2020. 7. 2. 12:10
반응형

Number 

 

수학계산에 사용되는  메소드를 보도록 합시다.

수학계산에 사용되는 JavaScript Math객체를 사용합시다.

 

절대값 구하기, sin, cos, 제고급근 등 Math객체에 수학계산 메소드가 있습니다.

하지만 사용되는 것은 일부분입니다. 물론, 사용하려면 죄다 사용이 가능하죠.

마우스이 클릭한채 당기면 따라오면서 기타줄 같이 튕기는 방식의 구현도 수학Math객체를 이용한 방법입니다.

 

반올림 함수Math.round(**) 입니다

Math.round(2.7);

Math.round(2.4);

Math.round(1.4);

위의 함수를 한번 console.log로 콘솔창에 찍어보세요.

값은

3

2

1

로 출력되었을 겁니다.

이러한 이유는 우리가 알던 기본적인 반올림 방식과 같게 출력되었습니다.

그렇다면 무조건 반올림을 구현하는 메소드와 무조건 내림을 구현하는 메소드도 있겠죠?

 

 

올림을 구현하는 함수는 "Math.ceil"입니다.

내림을 구현하는 함수는 "Math.floor"입니다.

위의 2개 함수는 무조건 우리가 알던 방식과 다르게 0.5미만이어도 올리고, 0.5이상이어도 무조건 내리는 함수인 것입니다.

즉, 뒤의 내용을 무시하고 정수 자체만 빼올 필요가 있을때 사용되는 함수이나 일반적으로는 사용되지 않으리라고 생각합니다.

소수점 자리를 가볍게 버릴때 사용되는 함수입니다.

 

그렇다면, 이제 우리가 아는 기본적인 수학함수에 대해 이야기 해보았습니다.

이제는 우리가 잘 안쓰는 랜덤으로 자료를 출력할때가 있겠죠?

 

그럴때 쓰는 랜덤함수가 있습니다.

 

랜덤함수

Math.random

0.0000000000000000에서 0.9999999999999999 사이의 값에서 랜덤수를 제공하는 함수입니다.

 

내가 확률을 정하거나 임의의 값을 구현할때 Math.random을 이용하여 값을 구하고, 이때 이러한 값에 

*10이나 *100을 사용하여 정수값을 구하고 반올림 또는 올림 또는 내림을 이용하여 소수점을 버리는 방식도 있습니다.

 

 

최소~최대 랜덤 숫자 가져오기

function getRandom(min, max) {

    return Math.floor((Math.random() * (max - min + 1)) + min);

}

출처: https://im-first-rate.tistory.com/86 [웃으면 1류다]

 

 

최소 최대의 랜덤 숫자 가져오는 함수입니다.

1~10의 값중 랜덤하게 가져올때 사용하는데, 이러한 함수가 있다는 것을 이해하는 정도만 알고 있으시면 됩니다.
대부분의 개발자들은 구동원리만 이해하지 실제로 이를 외우거나 하지 않습니다.

 

다음은 자바스크립트의 꽃 object입니다.

 

내용이 이보다 쉬운 정의가 없어서 찾아왔습니다

객체 (Object) JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value Pair를 저장할 수 있는 구조이다

 

객첸를 선언하고 사용할 수 있는지 방법입니다.

    var 객체이름 = {

      property이름1 : property 값,

      property이름2 : property 값

    };

객체는 {}중괄호로 값싸져 있고

콜론으로 구분된 키와 값들이

쉼표로 분리된 목록의 형태입니다

 

한마디로 객체란 이름과 값으로 구성된 프로퍼티의 집합을 객체라고 합니다.

그렇다면 객체의 propety값으로 접근하려면 어떻게 해야할까요?

방법은 2가지가 있습니다

1번 .(dot)을 이용하거나

2번 []대괄호를 이용하여 접근하려는 객체명은 왼쪽에 프로퍼티명은 쌍따옴표("")를 대괄호 안에 작성합니다.

console.log(plan1.name);

console.log(plan1["name"]);

으로 진행됩니다.

 

이러한 방식으로 이해하시면 됩니다.

오브젝트의 변환을 설명해보려고 가져왔습니다.

let myObj = {
	property1: "hello",
	property2: [1,2,3,4,5],
	property3: {
		childproperty: "haha"
		}
	};

 

let name = "property";
	console.log(myObj[name+"1"]);
	console.log(myObj[name+"2"]);
	console.log(myObj[name+"3"]);
	console.log(myObj[name+"3"]["child"+name]);
	console.log(myObj.property1);
	console.log(myObj.property2);
	console.log(myObj.property3);
	console.log(myObj.property3.childproperty);

// 위의 객체를 설정해 두었습니다. 이때 property1의 값을 수정하려고 합니다.

let name = "property1";
myObj[name] = ["hi", "hello"];
console.log(myObj);

아래의 내용을 통해서 my(obj)의 내용은 어떻게 변경되었을까요?
바로 ["hi", "hello"]로 변경되었습니다.

name이라는 변수를 인자로 사용하여 해당 값을

myObj(property1)을 호출하여 적용된 property1이라는 키에 영향을 끼쳐 그에 연결된 값인  ["hi"]를 건드린겁니다.

이를 이용하여 해당 값을 직접 건드리지 않고 외부에서 조정이 가능하게 만드는 것입니다.

 

scope

'scope':
'참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙';
break;
'if문, for문 등 {}중괄호로 감싸진 한 단위 ';

global scope':
코드 어디에서든지 참조할 수 있다.';

'global variable':
 '전역에서 선언된 변수이며 어디에든 참조할 수 있다.';
'block scope':
 '모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.';
'local variable':
'지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.';
'global namespace':
'모든 파일 정보의 이기종 전사적 추상화로, 사용자 정의 매개 변수를 기반으로하는 동적 사용자 정의가 가능합니다. ';
 'scope pollution':
'만약 전역변수가 선언되고 그 뒤 어떤 블록에서 그 변수를 같은 name으로 하여 다시 선언한다면 그 변수의 값은 변할 것이다. 이를 scope의 오염이라 한다.';
default :
 '디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값을 의미합니다.'

Class

다음은 class입니다. 갑자기 css의 선택자인 class가 왜 나온것인가? 라고 생각할겁니다

저도 그랬으니까요

일단 가볍게 css와 다른 것이 있다라고 이해만 합시다.

 

이 다음에 자세하게 설명될테니까요

 

object의 설계도인 class는 문법이 비슷합니다.

이때 차이점은 단순히 생성자(Constructor) 함수입니다.

class로 객체를 생성하는 과정을 '인스턴스화'라고 부릅니다.

const morning = new Car('Morning', 2000000);

class Car {
  constructor(name, price) { 
    this.name = name;
    this.price = price;
  }
}
  • Car는 class이름입니다. 항상 대문자로 시작하고, CamelCase로 작성해야 합니다.

  • Car class의 instance를 생성할때마다 constructor메서드가 호출됩니다.

  • constructor()메서드는 name, price 2개의 argument(인자)를 받습니다.

  • constructor()메서드에 this 키워드를 사용했습니다. class의 실행범위(context)에서 this는 해당 instance를 의미합니다.

  • constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했습니다.

  • 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다.

  • 멤버 변수는 'this' 키워드로 접근합니다.

위에서 언급한 instance입니다.

class를 객체로 만드는 것을 instance라고 하였는데요.

인스턴스는 class를 통해서 만들어진 객체이고,

인스턴스는 class의 property이름과 method를 갖는 객체입니다.

그렇기에 중복되면 안되기에 모두 다른 property 값을 갖고 있습니다.

 

const morning = new Car('Morning', 2000000);

  • 인스턴스는 Class 이름에 new를 붙여서 생성합니다.

  • 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.

  • Car클래스의 instance를 morning이라는 변수에 저장했습니다.

  • 다시 한 번! Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new키워드는 constructor() 메서드를 호출하고 새로운 instance를 return해줍니다.

  • 'Morning'이라는 String과 2000000이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었습니다.

마지막으로 메소드(메서드 Methods)입니다.

매소드는 함수입니다.

그런데, 객체가 프로퍼티 값으로 갖고 있는 것을 메소드(메서드)라고 부릅니다.

 

Class의 메소드는 object(객체)의 문법과 똑같습니다.

다만, 객체는 property(프로퍼티)를 ,(쉼표)로 구분해줘야했지만, 클래스는 그렇지 않습니다.

class Car {
	 constructor(name, price) { 
	   this. name = name;
	   this.price = price;
	   this.department = "선릉지점";
		}

applyDiscount(discount) { 
    return this.price * discount;
	changeDepartment(departmentName) {
    	 this.department = departmentName;
     	}
}

 

changeDepartment 메서드를 호출해보고 해당 인스턴스의 department 정보가 바뀌었는지 확인해봅시다.

 

728x90