-
Javascript 스터디 정리!( 18.12.12 ~ 18. 12. 19, 생활코딩 언어-JavaScript)Javascript/생활코딩 2019. 1. 30. 11:42
18. 12. 12
<실행방법과 실습환경>
저자는 subline 을 사용하지만 atom을 사용하기로 한다.
<숫자>
Math.pow(a, b); //a의 b제곱(승)
Math.round(a); // (a는 실수) a를 반올림
Math.ceil(a); // a를 올림 (가까운쪽의 정수로)
Math.floor(a); //a를 내림 (가까운 쪽의 정수로)
Math.sqrt(a); // a의 제곱근
Math.random() //0부터 1.0사이의 랜덤한 숫자
(주로 n을 곱해서 0과 n사이의 숫자를 만들어낸다. 또 floor를 적용하여 정수로 만들어서 사용한다.)
<문자>
"~" 쌍따옴표와 쌍따옴표로 문자를정의
'~' 따옴표와 따옴표로 문자를 정의
' 와 "를 섞어서 사용하는것은 불가능
쌍따옴표안에 따옴표를 사용하는것은가능
반대로 따옴표 안에 쌍따옴표도 가능
하지만 쌍따옴표안에서 쌍따옴표를 써야하거나
따옴표 안에 따옴표를 써야 하는경우
안의 따옴표들 앞에 역슬러시(\-이스케이프문자)를 적어준다.
이것은 다른 언어에서 string을 다루는 방법과 같다.
이스케이프 문자를 사용하는방법도 같다.
(\n줄바꿈 \t탭 등...)
string.lenth 문자의 길이를 알려주는 명령어.
string.indexOf("text") string안에 "text" 가 몇번째에 들어있는지 알려줌
생활코딩 내 자바스크립트 사전을 한번 확인할것
18. 12. 13
<변수>
var 로 선언한다
(*ES16 부터는 let과 const를 사용하도록 하고 var의 사용을 지양한다는 글을 본적이 있습니다.
이 강의가 만들어진지가 너무 오래돼서 그런것이겠죠 ? )
변수이름은 $, _ 혹은 특수문자를 제외한 모든문자로 시작 할 수있다.
(제이쿼리는 $ 을 로대쉬는 _를 사용하는데 이는 특수한 경우겠지요?)
변수는 코드의 재활용성을 높인다.
<주석>
// 한줄주석과
/* ~~~~~~*/ 여러줄 주석이있다.
코드을 한부분을 일시적으로 실행하고싶지 않을때도 사용한다.
<줄바꿈과 여백>
줄바꿈을 하게되면 자바스크립트는 자동적으로 명령이 끝났음을 인식한다.
하지만 줄바꿀때 ;(세미콜론을 입력하는것은 좋은 습관이다)
<비교>
= 대입연산자
== 동등연산자
=== 일치연산자
대입연산자는 변수에 값을 대입할때 사용하고
동등연산자는 연산자 양쪽의 값을 비교하지만 데이터 형까지 고려하진 않는다
숫자 1과 문자 1은 동등연산자는 같은것이라고 인식한다.
이런 부분때문에 일치연산자를 사용하는것을 권장한다.
그런의미에서 같지 않다를 나타내는것은
!= 를 사용하기보단 !==를 사용하는것을 권장하고
크다 크거나 같다 작다 작거나같다는 수학에서의 표기와 동일하다.
<조건문>
prompt("TEXT") 값을 입력받는 함수 alert("text")와 비슷하지만
값을 입력받을수있다. 입력받은 값을 반환한다.
if / else / else if
&&(AND) ||(OR) !(NOT)등의 논리연산자들은 C언어와 같다.
Boolen의 대체로는 " "(빈문자열), undefined, 값이 할당되지 않은 변수, null, NaN(Not a Number) 가 있다. 모두 false와 같다.
<조건문>
while문과 For문에 대한 설명은 C언어와 동일하다.
반복문의 제어문으로는 break 와 continue 가 있다.
18. 12. 15
함수와 배열에 대한 기본적인 부분은 다른언어와 크게 다를바 없다.
다만 함수에 대한 정의를 다르게 할수있는 부분이 다르다.
배열의 조작 부분도 주의해서 봐야 할 필요가있다.
배열의 끝에 원소추가
array.push('원소')
배열에 다른 배열 추가
array.concat(['원소1','원소2'])
배열의 시작점에 원소추가
array.unshift('원소')
n번째 인덱스 뒤에 m개의 원소를 추가하고 '원소'를 추가 하기
array.splice(n, m, '원소')
배열의 첫번째 원소를 린턴하고 제거
array.shift()
배열의 마지막 원소를 리턴하고 제거
array.pop()
정렬
array.sort()
역순정렬
array.reverse()
18. 12. 16
<객체>
객체는 연관배열, 맵, 딕셔너리등이 있다.
객체의 생성은
var object = {'key1': value1, 'key2':value2, 'key3':value3};
객체의 값 가져오기
object.key1도 가능! 장점은 간결하다.
object["key1"]도 가능! 간결하진 않지만 필요시 object["key"+"1"] 이런식으로도 가능하다.!
for문에서는
for (key in object) {
console.log("key: "+ key + " value : " + object["key"]);
}
이렇게 사용할수있다.
객체에는 함수나 다른 객체를 담을수도있다.
var object = {
'another_object' : {'key1': value1, 'key2':value2, 'key3':value3},
'func' : function() {
alert("hello world");
}
}
호출은!
object['another_object']
object['func']() = object.func()
이런식으로 한다.!
<모듈>
자바스크립트에서 명확히 모듈이라는 개념이 존재하진 않지만 모듈화방법은 제공되고있다.
재활용성, 유지보수의 용이, 필요한 로직만로드하여 메모리 낭비를 최소화,
네트워크 트래픽 절약, 코드 수정시 빠르게 로직 찾을수있음 등의 이점이있다
18. 12. 17
<정규표현식>
정규표현식 변수 선언 방법
var pattern = /a/;
var pattern = new RegExp('a');
-정규표현식을 사용하는 방법
1. 패턴에 대한 정보를 추출
pattern.exec('문자열') '문자열'에 pattern 이 존재하면 그것을 배열로 리턴한다.
아래와 같은 방법으로도 사용할수있다.
var str = 'tset';
str.match(pattern) 이렇게 하면 위와 같은 결과를 낸다.
2. 존재하는지 확인(Test)
pattern.test('문자열') '문자열'에 pattern이 존재하면 true 하지않으면 false를 리턴
3. 패턴을 다른 패턴으로 치환
pattern.replace('문자열','치환문자열')
정규표현식 에서 '.' 하나의 문자를 의미한다 /a./을 패턴으로 지정하게 되면 'a'다음의
하나의 문자를 의미한다.
a뒤에 오는 어떠한 문자 하나를 같이 반환한다.
-옵션 /Pattern/option 형식으로 패턴의 정의가 끝난 뒤에 붙는 방식으로 사용한다.
ex) /Pattern/gi
1) i : 패턴의 대소문자를 구분하지 않는다.(기본적으로 옵션이 없으면 대소문자를 구분한다)
2) g : 여러번의 패턴이 발견되면 모두 찾는다.(기본적으로 옵션이 없으면 맨앞의 패턴만 반환한다)
-여러개의 정규표현식을 사용하는 방법
var pattern = /(\w+) \s (\w+)/;
위와 같은 방식으로 사용한다.
/~~~/ 처럼 "/"로 패턴 앞뒤를 막아 패턴을 정의한다.
(\w 는 문자를 의미 a~z,A~Z,0~9를 의미한다 +는 연속을 뜻한다. 연속된 문자열을 의미)
(\s 는 white Space를 의미 한다. 띄어쓰기(" ")를 의미한다.)
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);
-> "everybody, cording"
변수 pattern의 정규표현식에서 괄호로 감싼 정규표현식 하나하나는 순서대로 $1, $2, ...가 된다.
$는 괄호로 감싼것(그룹)을 의미하고 뒤에 붙는 숫자는 순서를 의미 한다.
-치환
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);
위처럼 replace를 사용할때 두번째인자에 함수를 인자로 전달하고
패턴과 일치하는값을 url이라는 인자를 전달받아 함수안에서 url이라는 변수로
사용 할 수있다.
<유효범위>
변수의 유효범위 전역변수와 지역변수로 나뉜다.
전역변수는 스크립트내의 모든 곳에 영향력을 갖고 있고
지역변수는 함수내에서 영향력을 갖는다.
test) var, let 차이
for 문안에서 i를
var로 선언할 경우 전역변수로서의 영향력을 갖지만
let으로 선언하게 되면 for문 안에서만 영향력을 갖게된다.
const는 변하지 않는 값에만 선언해줄수있다.
전역변수로 i를 var로 선언해놓은후 for문에서 i를 let으로 선언하는것은 가능하지만
전역변수로 i를 let으로 선언해놓고 for문에서 i를 var로 선언하는것은 중복선언 오류가 발생한다.
const는 변화할수없으므로 for문에서 사용하면 const의 값을 변화시킬수없다는 오류가 발생한다.
<값으로서의 함수와 콜백>
-함수는 하나의 객체고 객체는 다른 객체에 포함될수있는데
이런경우 함수는 함수(function)가 아닌 메소드(mathod)라고 부른다.
-javascript에서의 함수는 하나의 '변수'로 사용될 수 있다(이름이 있는함수).
변수로 사용될때는 변수와 같이 '매개변수', '리턴값' 으로 사용될수있다.
-콜백
메소드의 인자값으로 함수를 넘겨 메소드의 동작방식을 변경하는것.
-비동기 처리(Asynchronous)
동기적 처리: 모든 일을 순차적으로 진행하는것
비동기적 처리: 시간이 오래 걸리는 해야하는 일을 나중에 처리하는것
Javascript 에서는 Ajax(Asynchronous Javascript And Xml)에서 쓰인다.
<script type="text/javascript">
$.get('./datasource.json.js', function(result){
console.log(result);
}, 'json');
</script>
위는 제이쿼리를 사용해 ajax를 사용하는 모습인데
첫번째 인자는 Data를 요청할 URL이고
두번째 인자로는 콜백함수를 입력하는것이다.
이렇게 비동기 처리를 할때 처리를 위임하는 콜백함수를 사용한다.
<클로저>
외부함수 : 내부함수를 품고 있는 함수
내부함수 : 함수내에 있는 함수
내부함수는 외부함수의 지역변수에 접근할수있고.
외부함수가 끝나더라도 내부함수는 외부함수의 지역변수의 값에 접근할수있다.
근데 클로저가 뭐인지 정확히는 모르겠다.
정확히 저런 구조를 클로저라고 하는건가?..
음 그럼 객체지향의 Class 와는 무엇이 다른건...가..?
<유사배열>
arguments 전달 받은 인자를 갖고있는 '배열같은'것이다. Javascript의 function의 기본 기능이라고 볼수있다.
arguments.length 는 실제로 전달받은 매개변수의 갯수를 나타내고
name_of_func.length 는 원래 받기로한(함수를정의할때 설정한) 매개변수의 갯수를 나타낸다
javascript는 함수에서 정의한 매개변수의 갯수와 전달받은 매개변수의 갯수가 달라도 문제가 생기지 않는데
이는 편하기도 불편하기도 하다.
매개변수의 값을 정해놓고 싶다면 함수의이름.length와 arguments.length를 비교하여 같을때만 로직을 실행하게 하면된다.
function sum(){
var i, _sum = 0;
for(i = 0; i < arguments.length; i++){
document.write(i+' : '+arguments[i]+'<br />');
_sum += arguments[i];
}
return _sum;
}
document.write('result : ' + sum(1,2,3,4));
이런 식으로 쓰인다.
<함수의 호출>
함순는 apply로 호출을 할수도있다.
sum(3,5) 이렇게 함수를 사용할수도있지만
javascript의 function이 기본적으로 갖고있는 메소드인 apply를 사용해서
함수를 실행할수도있다.
sum.apply(null, [3,5]) 이렇게 사용할수도있다.
null의 자리에는 객체가 들어가는데
function.apply(object)
그 객체는 함수안에서 this라는 변수
(명시적으로 넘겨받은 인자를 this라는 변수에 할당하는것은 아니지만 그런식으로 작동한다)
사실 이것은 object.function()처럼
객체 내에 있는 함수를 사용하는것 같이 사용된다.
(this가 객체가 되는것을 설명)
function.apply(object)라는 것만 봐도
함수를 객체에 적용?한다 이런느낌이니까 그런식으로 이해하면 좀 더 편할것 같다.
<생성자와 new>
자바스크립트에서 객체를 만들때는
function Person(name){
this.name = name;
this.introduce = function(){
return 'My name is '+this.name;
}
}
이런식으로 객체를 지정한다.
그러고 이것을 변수에 할당할때는
var p1 = new Person('name')
이렇게 하고 Person 객체에서 name을 매개변수로 입력받아 초기화라는것을
진행하는것 까지 보여준다.
그럼 여기서 introduce는 클로져인가!?
new는 새로운 객체를 생성하여 변수에 저장한다. 즉 할당된 변수는
객체가 된다.
18. 12. 18
<전역객체>
<this>
<상속>
<prototype>
<표준 내장 객체의 확장>
<Object>
<데이터 타입>
18. 12. 19
<참조>
<패턴>
<재귀함수>
댓글