$$config title: ?자바스크립트 기초 keywords: - IT - 기초 $$ ## 기초 - const : 상수이고 절대로 변하지 않는 값 - let : 변할수 있고 변경해서 사용하고싶으면 let을 빼고 사용하면된다. - nan : 아닌지 확인하면서 작업해야한다. - typeof : 어떤 자료형인지 알아낼수있다, 다른개발자 코드를 확인할때 어떤 자료형인지 알아야할때 구분해준다. - null : typeof 구분 지을시 null은 객체가 아니다, 자바스크립트 초기오류 - 전역변수 : 어디서나 접근할수 있는 변수 - 지역변수 : 함수내에서만 사용이 가능하다, 즉 밖으로 꺼내면 에러를 일으킨다. - 인터프리터 언어 : 자바스크립트는 위에서 아래로 순차적으로 실행된다, 즉시 결과를 반환한 프로그램 언어 ## 대화상자 - alert : 파업창을 띄워서 무엇인지 알려준다. - prompt : 파업창의 값을 입력받아 보여준다, prompt는 2개의 인수를 받을수있다. - confirm : alert은 확인버튼만 있지만, confirm은 취소버튼도 나온다. 확인 눌렀을시 true / 취소누르면 false ## 변수기초 1. 변수는 문자와 숫자, ( $ 와 _ 만 사용 ) 2. 첫글자는 숫자가 될 수 없습니다. 3. 예약어는 사용할 수 없습니다. 4. 가급적 상수는 대문자로 알려줍니다. / 상수 (const) 절대로 변하지않는 값 5. 변수명은 읽기 쉽고 이해할 수 있게 선언 해줍니다. ## 단점 - 창이 떠있는 동안 스크립트 일시정지 - 스타일링 할수 없습니다. - jsp 와 자바스크립트가 안맞아서 데이터를 못불러올시 ( 역슬레쉬 ) 활용 ## 형변환 - 실제 수학계산식이다. - 문장형 String() : 123 + 123 = "123123"; - 숫자형 Number() : "1234" = 1234 만약 "1234asdsad" 이렇게 값이 들어있다면 NaN을 반환할 것이다. - Number() : true 와 false 를 가진다면, true = 1 false = 0 을 보여줄것이다. ```javascript 외울수밖에, 　 Number(null) // 0 Number(undefined) // NaN Number(0) // false Number('0') // true Number('') // false Number('공백') // true ``` - 불린형 Boolean() : 아래 false 를 제외하면 모두 true 다. ```javascript false : 0 , " " , null , undefined , NaN ``` ## 속성 ```javascript .reply-tr.reply-tr-12 { } / X / O / X / O ``` 점을 사용하면 2개다 불러온다는뜻 reply-tr 의 jsp 와 자바스크립트의 reply-tr 이 동일 해야한다, 즉 속성을 정해주어야 어떤 값을 가지고 있는지 알수있다. ## 연산자 줄여쓰기 ```javascript let num = 10; num = num + 5; // 15 num += 5; // 15 더 간단히 연산자 사용 ``` ## 증가 연산자, 감소 연산자 - 증가 연산자 ```javascript let num = 10; let result = num++; // 10 을보여준다. let result = ++num; // 11 을보여준다. console.log(num); ``` 두개의 차이점은 ++ 앞에 두냐 뒤에 두냐 차이이다. --- - 감소 연산자 ```javascript let num = 10; let result = --num; // 9 을 보여준다. console.log(num); ``` 감소연산자 사용법이다. 위 증가 연산자처럼 연산자 위치를 생각하고 지정해야한다. ## 비교연산자, 조건문(if문) - 동등 연산자 ```javascript const a = 1; const b = "1"; console.log(a == b); // true 반환 console.log(a === b); // false 반환 자료형 변환 없이 두 피연산자가 엄격히 같은지 판별 ``` ## 논리연산자 - || ( OR ) : 여러개중 하나라도 true면 true 고, 즉 모든 값이 false 일때만 false 를 반환한다. - && ( AND ) : 모든값 true 면 true 즉, false 면 false를 반환, 즉 true 일때 까진 나타내고 false 일때 멈춘다. - ! (NOT) : true를 반환하면 false 이고 false 를 반환하면 true다, 즉 반대라고 생각하면된다. --- OR문제 : 이름이 Tom이거나, 성인이면 통과 ```javascript const name = "Tom" const age = 30; if (name==="Tomm" || age > 19){ console.log("통과"); }else{ console.log("불통"); } ``` --- AND문제 : 이름이 Tom이거나, 성인이면 통과 ```javascript const name = "Tom" const age = 30; if (name==="Tom" && age > 19){ console.log("통과"); }else{ console.log("불통"); } ``` --- NOT문제 : 남자이고, 이름이 Mike 이거나 성인이면 통과 ```javascript const gender = 'F'; const isAdult = true; const name = "jane"; if(gender=='M' && name=="jane" || isAdult){ console.log("통과"); }else{ console.log("불통"); } ``` 전체 통과이다, 이유는 말대로라면 name 과 isAdult 를 묶어줘야되지만, 묶어주지 않았기 때문에 && 먼저 실행했기 때문에 무조껀 true 이다. ## 반복문 loop for문 ```javascript for(let i = 0; i <= 10; i++){ console.log(i); } ``` - let i = 0; / 초기값 - i <= 10; / 조건 - i ++ 코드실행후 작업 --- while문 ```javascript let i = 0; while(i <= 10){ console.log(i); i++ } ``` ## 반복문 빠져나오는법 break 명령 ```javascript while(true){ let answer = confirm('계속할까?'); if(!answer) { break; } } ``` --- continue; ```javascript for(let i=0; i<10; i++){ if(i%2){ continue; } console.log(i); } ``` for문안에 조건 맞는것들만 log 에 찍히고, 그렇지 않는것들은 continue 를 맞이한다. ## switch 문 ```javascript let fruit = prompt('어떤과일의 가격이 궁금한가요?'); switch(fruit) { case '사과': console.log('100원입니다.'); break; case '바나나': console.log('200원입니다.'); break; case '키위': console.log('300원입니다.'); break; case '딸기': console.log('400원입니다.'); break; case '멜론': console.log('500원입니다.'); break; default : console.log('그런과일은 없습니다.'); } ``` break 를 모두 걸어주지 않으면 값을 ( 바나나 ) 로 골랐을 경우 바나나 이후 모든 값들이 나온다. ## 함수(function) 매개변수가 없는 함수 ```javascript function showView() { alert('에러가 발생했습니다. 새로고침 해주세요.'); } showView(); ``` 파업창으로 문구가나온다. --- 매개변수가 있는 함수 ```javascript let msg = `Hello`; console.log('함수 호출전'); console.log(msg); function sayHello(name) { if(name) { msg += `, ${name}`; } console.log('함수 내부'); console.log(msg); } sayHello('Mike'); console.log(msg) console.log('함수 호출후') ``` 전역변수, 지역변수 둘다 사용, 즉 호출전 Hello빼고 내부 와 호출후 는 동일하다 내부에서부터 변경되기 때문에! ## 예시) 전역 변수와 지역 변수 ```javascript let name = "Mike"; function sayHello(name) { console.log(name); } sayHello(); sayHello('Jane'); ``` 전체 서비스에서 공통으로 바라봐야 되는 변수를 제외하고는 지역변수를 쓰는 습관들이기 ## default value 처리 ```javascript function sayHello(name = 'friend') { let msg = `Hello, ${name}`; console.log(msg); } sayHello(); sayHello('Jane'); ``` function sayHello(name = 'friend') 이렇게 선언 해주거나 let name = name || 'friend' 이렇게 선언해주면 undefined 나오지않고 프렌드를 출력한다. ## return 으로 반환 ```javascript function add(num1, num2) { return num1 + num2; } const result = add(4,5); console.log(result); ``` ## return 값이 없거나 에러 ```javascript function showError() { alert('에러가 일어났습니다.'); return; alert('이코드는 절대로 실행되지 않습니다.'); } const result = showError(); console.log(result); ``` undefined 를 반환한다 return; 만 써주어도 똑같이 반환한다. ## 함수정리 - 한번에 한작업에 집중 - 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 ```javascript showError // 에러를보여줌 getName // 이름을 얻어옴 createUserData // 유저데이터 생성 checkLogin // 로그인 여부 체크 ``` ## 함수 선언문 vs 함수 표현식 - 함수 선언문 : 어디서든 호출가능 ```javascript sayHello(); function sayHello(){ console.log('Hello'); } ``` sayHello가 어디있던 호출가능한 이유는 자바스크립트 내부 알고리즘 때문, 함수를 사용할때 모습은 코드위치보다 위로올라간다 이걸 호이스팅이라고 한다. --- - 함수 표현식 : 코드에 도달하면 생성 ```javascript function sayHello(){ console.log('Hello'); sayHello(); } ``` 함수표현식은 자바스크립트가 한줄씩 읽으면서 실행하고, 해당 코드에 도달해서야지 생성 된다, 즉 그 이후 에만 사용이 가능하다. ## 화살표 함수 - 지금의 코드보다 더 간결하게 쓸수있다. 기본형식 ```javascript let add = function(num1, num2) { return num1 + num2; } ``` 아래코드로 --- 기본형식 => 1차변형 ```javascript let add = (num1, num2) => { return num1 + num2; } ``` 아래코드로 --- 1차변형 => 2차변형 ```javascript let add = (num1, num2) => ( num1 + num2; ) ``` return 문은 {} 을 없애고 () 으로 대처할수 있습니다. --- 2차변형 => 3차변형 ```javascript let add = (num1, num2) => num1 + num2; ``` 리턴문이 한줄이라면 괄호조차 도 생략 할수 있다. --- 3차변형 => 4차변형 ```javascript let add = name => `Hello, ${name}`; ``` 인수가 딱 하나라면 괄호도 생략할수 있습니다. --- Error 형 ```javascript let showError() = () => { alert('error!'); } 인수가 없는 함수는 괄호를 생략할수 없다. ``` 인수가 딱 하나라면 괄호도 생략할수 있습니다. --- 4차변형 => 5차변형 ```javascript let add = function(num1, num2) { consrt result = num1 + num2; return result; } ``` return 문이 있다고해도 리턴전의 여러개의 코드가 있을경우 일반 괄호를 사용할수 없다, 즉 {} 만 사용가능 ## Object 접근, 추가, 삭제 ```javascript const superman = { name : 'clark', age : 33 } ``` - 접근 - superman.name // 'clark' - superman['age'] // 33 --- - 추가 - superman.gender = 'male'; - superman['hairColor'] = 'black'; --- - 삭제 - delete superman.hairColor; ## Object - 프로퍼티 존재 여부 확인 - in 은 언제 사용하는지, 어떤 값이 넘어올지 확실치 않을때 사용 함수 인자를 받거나 API 통신을 통해 데이터를 받아올때 - fot...in 반복문 ```javascript for(let key in superman) { console.log(key) console.log(superman.[key]) } ``` - 객체 in ```javascript function isAdult(user) { if(!('age'in user) || user.age < 20) { return false; } return true; } const Mike = { name: "Mike", age: 30 }; const Jane = { name: "Jane" }; console.log(isAdult(Jane)); ``` Jane age가 없는데 true 를 반환했다, 즉 없는 값을 통과 시켰다. 이런 불투명한 데이터를 !('age' in user) || 로 처리하였다. - 객체 for..in ```javascript const Mike = { name : "Mike", age : 30 }; for( x in Mike){ console.log(Mike[x]) } ``` 이건 정해진 룰이다 Mike 에 x = key 고 key 를 객체에 key를 찍으면 값을 가져온다, 이건 강제로 외울수밖에 없다, ```javascript const user = { name: "Mike", sayHello: function () { console.log(`Hello, I'm ${this.name}`); } } ``` - name.asyHello(); (을)를 호출 했을때, name 이 $ 안에있는 this가 되는 것입니다. - 화살표 함수를 써서 사용했다면, 출력된 내용은 완전 다를것입니다. - 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않습니다. - 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옵니다. --- ```javascript let boy = { name: "Mike", showName: function() { console.log(this.name) } }; let man = boy; boy = null; man.showName(); ``` boy로 console찍었을때 결과는 나오지만 결론적으로 메소드 명을 직접써주는 것 보단 this 를 적어주는 것이 좋다. boy == this --- - 윈도우 오류, this 의 변화 ```javascript let boy = { name: "Mike", sayThis:() => { console.log(this); } }; boy.sayThis(); ``` - 윈도우 에러가 나온다, 화살표 함수로 메소드를 작성하면! this는 boy를 가르키고 있는게 아니라 윈도우 전역객체를 가르키게 됩니다. - 객체의 메소드를 작성할떄는 화살표 함수를 사용하지 않는 것이 좋습니다. --- ## 배열 Array - 배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있습니다. - length : 배열의 길이 - push : 배열 제일뒤에 추가해주는 역활 - pop : 배열 끝 요소 제거 - shift : 배열 앞 제거 - unshift : 배옆 앞 추가 - for of 기억해주면 좋다, for in은 권장하지 않는다. --- ## 정리 ```javascript const name = "Mike"; let age = 30 console.log(name); alert(age); prompt('생년월일을 입력해주세요.'); confirm('삭제 하시겠습니까?'); ```