javascript 기초 학습
학습 목표
-
JS 이해 : JS에서 변수 선언법 및 조건문, 반복문을 이해하고 사용할 수 있다.
-
JS 이해 : JS에서 논리연산자를 이해하고 사용할 수 있다.
-
JS 이해 : JS에서 함수를 이해하고, 함수 표현식과 화살표 함수를 사용할 수 있다.
-
JS 이해 : 객체와 배열에 대해 이해하고 사용할 수 있다.
-
JS 이해 : 필수 문제들을 풀어보며 JS문법을 익힐 수 있다.
-
JS 심화 : 콜백 함수의 개념과 (addEventListener), map, filter, reduce 개념을 알 수 있다.
-
문제 선별 <37개> / 최소 12문제
- chap 1) 1, 2, 3, 4, 5, 6, 7, 9, <8개>
- chap 2) 11, 13, 14, 15, 16, 17, 18, 19, 20 <9개>
- chap 3) 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 <10개>
- chap 4) 32, 33, 36, 37, 38, 39, 40 <7개>
- chap 5) 44, 45, 49 <3개>
-
스터디 시 발표 부분
- 변수, 변수 선언 키워드 & 대화상자
- 변수 type - primitive
- 변수 type - reference
- 함수
- 제어문 (조건문, 반복문)
- (콜백함수, map, filter, reduce)
JS 변수, 문법 및 자료형
JS 변수
-
예전에는
var을 썼으나, 현재엔let,const을 쓴다. -
var : var로 선언한 변수는 블록 기준으로 스코프가 생기지 않아서, 블록 밖에서 접근 가능하다.
if (true) { var test = true; } alert(test); // true(if 문이 끝났어도 변수에 여전히 접근)for (var i = 0; i < 10; i++) { // ... } alert(i); // 10, 반복문이 종료되었지만 'i'에 접근 가능.-
코드 블록이 함수 블록 안에 있으면 var는 함수 레벨 변수가 된다.
function sayHi() { if (true) { var phrase = "Hello"; } alert(phrase); // 제대로 출력됩니다. } sayHi(); alert(phrase); // Error: phrase is not defined -
var는 if, for 등의 코드 블록을 관통하는데, 옛날 js에서 블록 수준 렉시컬 환경(Lexical Environment)이 없었기 때문이다.
-
var는 동일 이름 변수 중복 선언이 된다.. 하지만 두 번째 선언문은 무시된다.
-
var는 호이스팅(선언 전 사용 가능)이 된다.
- var 선언은 위치에 관계없이 함수의 시작 시 처리되고, 만약 전역 변수라면 스크립트 시작 시 처리되어 실제 선언문 위치와 관계없이 사용 가능하다.
- 단, 할당은 할당문에서 할당이 된다.
- let, const도 호이스팅이 되지만 TDZ에 의해 오류 메세지가 나오게 된다.
-
-
let : 추후 변경 가능한 일반적인 변수 선언법이다.
- C, JAVA의 변수와 비슷.
-
const : 추후 변경 불가능한 상수 선언이다. 변경 시도 시 에러를 보여준다.
JS 문법 및 자료형
-
명령문이 한 줄을 다 차지할 경우는 세미콜론이 필요하지 않다. 한 줄에 두 개 이상 명령문을 쓴다면 세미콜론이 필요하다.
-
초기값 없이 선언만 된 변수는
undefined값을 가진다.undefined는 boolen context에서 사용될 때false로 동작한다.undefined는 number context에서 사용될 때NaN으로 변환된다.null값은 number context 에서0으로, boolen context에서false로 동작한다.
-
JS의 자료형은 8가지이다. 7가지 primitive 자료형 + Object
- Boolean :
true,false - null :
null, null값 나타내는 키워드 (JS는 대소문자를 구분하므로, Null이나 NULL과는 다르다!) - undefined : 값이 정의되어 있지 않은 최상위 속성
- Number : 정수 or 실수형 숫자
- BigInt : 임의 정밀도의 정수
- String : 문자열
- Symbol : (ECMAScript 2015에 도입) 인스턴스가 고유하고 불변인 자료형
- Object : object는 속성의 모음이다.
- JSON(JavaScript Object Notation)이라는 데이터 표현 방식이 있다. (중괄호와 key, value 값)
JS 대화상자
- prompt
- alert
- confirm
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>JS 함수
function abc(n) {
실행 구문
}
abc (dd);JS 제어문 (조건문, 반복문)
- 조건문 : if
- 반복문 : while, for
콜백함수
-
콜백 함수 : 매개변수로 함수 자체를 전달하는 것.
-
이벤트 리스너로 많이 사용된다.
let button = document.getElementById("button"); // 버튼 요소를 선택
// 버튼에 클릭 이벤트 리스너를 추가
button.addEventListener("click", function () { // 콜백 함수
console.log("Button clicked!");
});map, filter, reduce
-
고차 함수 : 함수를 파라미터로 받거나 함수를 return 해주는 함수.
함수형 프로그래밍 방식 -
JS에서는 특히 배열(object)를 잘 다룰 수 있는 편리한 고차 함수들을 제공한다.
- map() : 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환
const numberArr = [1, 2, 3, 4, 5];
const numberMapArr = numberArr.map((item) => {
if (item % 2 === 0)
return 'even';
else
return 'odd';
// 연산한 결과값을 넣어 배열 반환
});
console.log(numberMapArr); // ['odd', 'even', 'odd', 'even', 'odd']- filter() : 주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환.
find() + map()
const numberArr = [1, 2, 3, 4, 5];
const numberFilterArr = numberArr.filter((item) => {
return item % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환
});
console.log(numberFilterArr); // [2, 4]- reduce() :
forEach, map, filter 가능 모두 구현 가능.
JS 문제풀이
-
2) typeof(2.22)float 형이기 때문에 출력이 number로 나온다. -
var a = 10; var b = 2; for(var i=1; i<5; i+=2){ a += i; } console.log(a+b);i가 1, 3 일때 더해지므로 a + b = 10 + 1 + 3 + 2 = 16
4) -
2)null, undefined, 0, 빈 문자열, NaN, false 제외하고 모두 참인 값. -
let s = 0; for (let i = 1; i <= 100; i++) { s += i; } console.log(s); -
키 주어졌을때, 150 넘으면 yes, 미만이면 no
const height = prompt("키를 입력하세요."); if (height >= 150) { console.log("YES"); } else { console.log("NO"); } -
나머지가 0인 것을 나타내야 하므로,
2)번이다. -
function circle(n) { let space = n * n * 3.14; console.log(space); } let input = prompt("반지름 입력"); circle(input); -
prompt()
참고 사이트
