[JavaScript] 자바스크립트 bind() 메소드 알아보기.

2021-07-11 자바스크립트 내에서는 개발자가 직접 바인딩할 대상을 지정할 수 있는 몇 가지 메서드가 있는데, 그중에서 오늘은 bind에 대해서 알아보도록 하자. - 예제 아래는 간단한 사람이라는 객체이며, 객체 필드로 자신의 이름과 나이 이를 출력하는 간단한 함수가 정의 되어 있다. const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." ) } } - bind와 unbind 된 객체 const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 10.
• textsms

[JavaScript] 자바스크립트 Destructuring 디스트럭처링 알아보기.

2021-07-08 자바스크립트를 공부하던 도중 흥미로운 기능을 발견했다. 바로 디스트럭처링(Destructuring) 풀어서 구조 분해라고도 하는 자바스크립트 만의 고유 문법이다. 아래의 예제를 보자. - 예제 1 const arr = ['king', 'world'] const name1 = arr[0] const name2 = arr[1] console.log(name1) // king console.log(name2) // world 위와 같은 배열 형식의 값을 변수에 다시 담을 경우 보통은 해당 배열의 인덱스 번호를 기준으로 하여 값을 지정할 것이다. 하지만 디스트럭처링을 사용하면 조금 더 간단하게 이를 해결할 수 있다. 바로 다음 예제를 살펴보자. const arr = ['king', 'worl..

• format_list_bulleted WEB/JavaScript
• · 2021. 7. 8.
• textsms

[JavaScript] JS this(자기자신) 키워드 알아보기

2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World ​ 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World ​ 이벤트에서도 this를 활용할 수 있다. 해당 코드..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 13.
• textsms

[JavaScript] JS for 구문의 다양한 형식(in/of) 알아보기

2021-04-11 자바스크립트 내부에서는 for을 이용한 몇 가지 형식의 반복문 구문이 존재한다. 이를 통해 코드의 양을 줄이고 반복적인 업무를 수행할 수 있게 된다. 이 for의 사용법을 알아보도록 하자. - for 아래는 기본 for문 코드이다 정수가 들어가 변수에 루프를 돌면서 더해주는 구조이다. Hello World ​ for() 안에는 3가지 매개값이 들어간다. 1. for구문안에서 사용할 변수(반복 변수) 2. 조건식(해당 조건식의 범위를 벗어나면 루프는 종료된다.) 3. 루프를 한번 끝낼때마다 실행될 코드 위의 for구문에서 num변수는 루프마다 [ 1, 2, 3, 4]의 값이 더해지게 된다. - for(in) for in 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 11.
• textsms

[JavaScript] JS Boolean Value에 대하여 알아보기.

2021-04-08 흔히 [참 거짓] / [true false]를 나누어야 하는 경우가 다수 존재한다. 이럴 경우를 대비하여 js 내부에 만들어진 Value가 Boolean이다. 이 Boolean을 이용하는 방법을 알아보자. - Boolean(x ? y) 두 가지의 값(데이터)을 비교하여 같은지 다른지를 비교하기 위해서 부등호를 사용하게 된다. Boolean에서 사용할 수 있는 부등호는 [ == , > , = ,

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 8.
• textsms

[JavaScript] JS 통한 랜덤값 생성하는 방법 알아보기

2021-04-07 자바스크립트의 Math Object 에는 Random이라는 내부 함수가 존재하는데, 이 Radom을 사용하는 방법을 알아보도록 하자. - random() 해당 메소드를 사용하게 되면 0 이상 1 이하의 랜덤 한 수가 출력되게 된다. 아래의 코드와 결과를 확인해 보자. Hello World ​ 결과를 확인해보면 항상 0보다는 크지만 1보다작은 값들이 출력되는 것을 확인할 수 있다. - 다른 함수와의 조합 random 함수는 Math 내부의 다른 함수들과 조합되어서도 종종 사용되는데, 아래의 예제를 확인해 보자. Hello World ​ 예제에서는 특정 범위에 정수 값을 나타내기 위해 floor(내림) ceil(올림) 함수와 조합해서 사용하였다. 해당 코드의 결과는 우측에 주석으로 남겨 ..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 7.
• textsms