자바스크립트
-
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("나의 이..
[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("나의 이..
2021.07.10 -
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..
[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..
2021.07.08 -
2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World 이벤트에서도 this를 활용할 수 있다. 해당 코드..
[JavaScript] JS this(자기자신) 키워드 알아보기2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World 이벤트에서도 this를 활용할 수 있다. 해당 코드..
2021.04.13 -
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 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..
[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 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..
2021.04.11 -
2021-04-08 흔히 [참 거짓] / [true false]를 나누어야 하는 경우가 다수 존재한다. 이럴 경우를 대비하여 js 내부에 만들어진 Value가 Boolean이다. 이 Boolean을 이용하는 방법을 알아보자. - Boolean(x ? y) 두 가지의 값(데이터)을 비교하여 같은지 다른지를 비교하기 위해서 부등호를 사용하게 된다. Boolean에서 사용할 수 있는 부등호는 [ == , > , = ,
[JavaScript] JS Boolean Value에 대하여 알아보기.2021-04-08 흔히 [참 거짓] / [true false]를 나누어야 하는 경우가 다수 존재한다. 이럴 경우를 대비하여 js 내부에 만들어진 Value가 Boolean이다. 이 Boolean을 이용하는 방법을 알아보자. - Boolean(x ? y) 두 가지의 값(데이터)을 비교하여 같은지 다른지를 비교하기 위해서 부등호를 사용하게 된다. Boolean에서 사용할 수 있는 부등호는 [ == , > , = ,
2021.04.08 -
2021-04-07 자바스크립트의 Math Object 에는 Random이라는 내부 함수가 존재하는데, 이 Radom을 사용하는 방법을 알아보도록 하자. - random() 해당 메소드를 사용하게 되면 0 이상 1 이하의 랜덤 한 수가 출력되게 된다. 아래의 코드와 결과를 확인해 보자. Hello World 결과를 확인해보면 항상 0보다는 크지만 1보다작은 값들이 출력되는 것을 확인할 수 있다. - 다른 함수와의 조합 random 함수는 Math 내부의 다른 함수들과 조합되어서도 종종 사용되는데, 아래의 예제를 확인해 보자. Hello World 예제에서는 특정 범위에 정수 값을 나타내기 위해 floor(내림) ceil(올림) 함수와 조합해서 사용하였다. 해당 코드의 결과는 우측에 주석으로 남겨 ..
[JavaScript] JS 통한 랜덤값 생성하는 방법 알아보기2021-04-07 자바스크립트의 Math Object 에는 Random이라는 내부 함수가 존재하는데, 이 Radom을 사용하는 방법을 알아보도록 하자. - random() 해당 메소드를 사용하게 되면 0 이상 1 이하의 랜덤 한 수가 출력되게 된다. 아래의 코드와 결과를 확인해 보자. Hello World 결과를 확인해보면 항상 0보다는 크지만 1보다작은 값들이 출력되는 것을 확인할 수 있다. - 다른 함수와의 조합 random 함수는 Math 내부의 다른 함수들과 조합되어서도 종종 사용되는데, 아래의 예제를 확인해 보자. Hello World 예제에서는 특정 범위에 정수 값을 나타내기 위해 floor(내림) ceil(올림) 함수와 조합해서 사용하였다. 해당 코드의 결과는 우측에 주석으로 남겨 ..
2021.04.07 -
2021-04-05 간혹 문자열을 대소문자로 치환해야 하는 경우가 있다. 이러한 경우 손쉽게 해당 문제를 해결하는 방법을 알아보자. - 대문자 변환 [ toUpperCase() ] 기본적인 문자열을 전부 대문자로 바꿔야 하는 경우가 있는데 이경우 toUpperCase() 메서드를 사용하면 손쉽게 변경할 수 있다. 아래의 예제를 보자 Hello World 브라우저 콘솔창의 출력을 확인해보면, HELLO WORLD HELLO EVERYONE! 로 나타난다. - 소문자 변환 [ toLowerCase() ] 반면에 기존의 문자열을 전부 소문자로 바꿔야 하는 경우에는 toLowerCase() 메소드를 사용하면 손쉽게 변경할 수 있다. 다음의 예제를 살펴보자. Hello World 브라우저 콘솔창의 출력을 ..
[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법2021-04-05 간혹 문자열을 대소문자로 치환해야 하는 경우가 있다. 이러한 경우 손쉽게 해당 문제를 해결하는 방법을 알아보자. - 대문자 변환 [ toUpperCase() ] 기본적인 문자열을 전부 대문자로 바꿔야 하는 경우가 있는데 이경우 toUpperCase() 메서드를 사용하면 손쉽게 변경할 수 있다. 아래의 예제를 보자 Hello World 브라우저 콘솔창의 출력을 확인해보면, HELLO WORLD HELLO EVERYONE! 로 나타난다. - 소문자 변환 [ toLowerCase() ] 반면에 기존의 문자열을 전부 소문자로 바꿔야 하는 경우에는 toLowerCase() 메소드를 사용하면 손쉽게 변경할 수 있다. 다음의 예제를 살펴보자. Hello World 브라우저 콘솔창의 출력을 ..
2021.04.05 -
2021-04-03 자바스크립트 내부에서 정렬을 할 수 있도록 도와주는 메서드가 있다. 해당 메서드는 sort() / reverse()로 두 메서드의 기능을 알아보도록 하자. - sort () sort() 메소드는 오름차순 기준으로 정렬을 수행하며, 수행 시 알파벳의 경우 a에 가까울수록 배열의 앞에 숫자의 경우 0에 가까울수록 배열의 앞에 위치하게 된다. 아래는 예제 코드이다. Hello World 정렬 전과 정렬 후를 비교하면 아래와 같은 결과가 나타난다. - reverse() 내림 차순으로 정렬하고자하면 reverse()라는 메서드를 사용하면 된다. 다만 해당 메서드는 문자열의 순서가 아닌 배열의 순서 인덱스 순서를 기준으로 위치를 뒤바꾸기 때문에 먼저 sort() 메서드로 오름차순 정렬을 해준..
[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기2021-04-03 자바스크립트 내부에서 정렬을 할 수 있도록 도와주는 메서드가 있다. 해당 메서드는 sort() / reverse()로 두 메서드의 기능을 알아보도록 하자. - sort () sort() 메소드는 오름차순 기준으로 정렬을 수행하며, 수행 시 알파벳의 경우 a에 가까울수록 배열의 앞에 숫자의 경우 0에 가까울수록 배열의 앞에 위치하게 된다. 아래는 예제 코드이다. Hello World 정렬 전과 정렬 후를 비교하면 아래와 같은 결과가 나타난다. - reverse() 내림 차순으로 정렬하고자하면 reverse()라는 메서드를 사용하면 된다. 다만 해당 메서드는 문자열의 순서가 아닌 배열의 순서 인덱스 순서를 기준으로 위치를 뒤바꾸기 때문에 먼저 sort() 메서드로 오름차순 정렬을 해준..
2021.04.03 -
2021-04-02 배열은 js 변수에 여러 가지 값을 저장할 수 있도록 하는 데이터 형태이다. 이러한 배열을 대하여 알아보도록 하자. 예제로는 사람의 이름을 저장하는 name라는 배열을 만들어 사용할 것이다. - 선언 방법1. 변수에 바로 배열 대입하기 배열을 선언 시 [ ]로 각 항목을 감싸주어 선언을 하면 된다. 배열에서 시작 값은 항상 0부터 시작하는 점도 알아두자. Hello World 방법 2. new Array( ) 연산자를 이용한 선언 사실 방법 2는 잘쓰지 않는다. 그 이유는 아무래도 코드에서 작성하는 양이 늘어나고, 실제 동작은 차이가 없기 때문이다. Hello World - 배열에 요소에 접근하는 방법 선언된 배열에 ["인덱스 번호"]를 주는 방식으로 각 인덱스에 접근할 수 있..
[JavaScript] JS Arrays 배열에 대하여 알아보기2021-04-02 배열은 js 변수에 여러 가지 값을 저장할 수 있도록 하는 데이터 형태이다. 이러한 배열을 대하여 알아보도록 하자. 예제로는 사람의 이름을 저장하는 name라는 배열을 만들어 사용할 것이다. - 선언 방법1. 변수에 바로 배열 대입하기 배열을 선언 시 [ ]로 각 항목을 감싸주어 선언을 하면 된다. 배열에서 시작 값은 항상 0부터 시작하는 점도 알아두자. Hello World 방법 2. new Array( ) 연산자를 이용한 선언 사실 방법 2는 잘쓰지 않는다. 그 이유는 아무래도 코드에서 작성하는 양이 늘어나고, 실제 동작은 차이가 없기 때문이다. Hello World - 배열에 요소에 접근하는 방법 선언된 배열에 ["인덱스 번호"]를 주는 방식으로 각 인덱스에 접근할 수 있..
2021.04.02 -
2021-03-31 기존의 HTML 문서의 추가적인 태그 및 데이터를 삽입하고자 할 때 append와 after를 고민하고는 하는데 오늘은 이 둘의 차이를 알아보자 - append 와 after의 정의 * append : 선택한 요소의 끝에 콘텐츠를 삽입합니다. * after : 선택한 요소 뒤에 콘텐츠를 삽입합니다. 해당 메소드들의 정의를 읽어 보았을 때는 큰 차이가 없어 보이지만, 실제로 동작하는 방식은 크게 차이가 난다. 해당 두 메서드의 차이를 아래의 예제를 통해 알아보도록 하자. - 예제 아래의 예제는 두개의 div를 출력하는 태그이다. div1 div2 해당 예제를 통해 div1 에는 append 메서드를 div2에는 after를 이용해서 html 태그를 추가해 보도록 하자. - 결과 di..
[jQuery] 제이쿼리 append 와 after 차이 알아보기2021-03-31 기존의 HTML 문서의 추가적인 태그 및 데이터를 삽입하고자 할 때 append와 after를 고민하고는 하는데 오늘은 이 둘의 차이를 알아보자 - append 와 after의 정의 * append : 선택한 요소의 끝에 콘텐츠를 삽입합니다. * after : 선택한 요소 뒤에 콘텐츠를 삽입합니다. 해당 메소드들의 정의를 읽어 보았을 때는 큰 차이가 없어 보이지만, 실제로 동작하는 방식은 크게 차이가 난다. 해당 두 메서드의 차이를 아래의 예제를 통해 알아보도록 하자. - 예제 아래의 예제는 두개의 div를 출력하는 태그이다. div1 div2 해당 예제를 통해 div1 에는 append 메서드를 div2에는 after를 이용해서 html 태그를 추가해 보도록 하자. - 결과 di..
2021.03.31 -
2021-03-21 자바스크립트 내부에서 변수를 선언하는 키워드 let과 var 이 존재한다. 해당 두 키워드는 변수를 선언하는 측면에서는 비슷하다. 때문에 둘을 비교하는 경우가 많은데, 오늘은 이둘의 기능적인 측면에서의 차이점을 비교하면서 알아보자. - 선언 변수 선언은 두 키워드 차이가 없다. 또한 var 와 let으로 선언된 변수는 호이스팅이 적용되기 때문에 아래와 같이 변수명만 선언하는 것도 가능하다. var num1 let num2 console.log(num1) console.log(num2) num1 = 10 num2 = 20 - 블록스코프(Block Scope) 블록 스코프에서는 조금에 차이가 있다. 아래의 코드를 보자. 위와 같이 블록 내부에서 각 키워드 변수들을 100 / 200으로 값..
[JavaScript] JS 변수 키워드 let 과 var 알아보기2021-03-21 자바스크립트 내부에서 변수를 선언하는 키워드 let과 var 이 존재한다. 해당 두 키워드는 변수를 선언하는 측면에서는 비슷하다. 때문에 둘을 비교하는 경우가 많은데, 오늘은 이둘의 기능적인 측면에서의 차이점을 비교하면서 알아보자. - 선언 변수 선언은 두 키워드 차이가 없다. 또한 var 와 let으로 선언된 변수는 호이스팅이 적용되기 때문에 아래와 같이 변수명만 선언하는 것도 가능하다. var num1 let num2 console.log(num1) console.log(num2) num1 = 10 num2 = 20 - 블록스코프(Block Scope) 블록 스코프에서는 조금에 차이가 있다. 아래의 코드를 보자. 위와 같이 블록 내부에서 각 키워드 변수들을 100 / 200으로 값..
2021.03.21 -
2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..
[JavaScript] JS 변수 키워드 const 알아보기2021-03-20 자바스크립트 내부에서 변수를 선언하는 키워드 중에 const가 존재한다. 해당 키워드는 변수 선언 시 초기화해야 하며, 이후에는 값을 부여할 수 없다. - 선언 방법 사실 일반변수 var 키워드와 같이 선언하는 방식은 동일하나 선언과 동시에 초기화를 시켜주어야 한다. 선언과 동시에 초기화해주지 않으면 브라우저 console 창에 아래와 같이 오류가 발생한다. 때문에 호이스팅도 불가한 점도 참고하면 좋을 것 같다. Uncaught SyntaxError: Missing initializer in const declaration - 블록 스코프(Block Scope) 위와 같이 const 변수를 블록 내부에서 선언했다면, 해당 선언된 블록 내부에서만 접근이 가능하며, 블록 이외의 영역에서는..
2021.03.20