여니의 프로그래밍 study/JavaScript 26

자바스크립트 헷갈리는 부분 모음집

1. null 비어있음, 존재하지 않음을 나타낸다. 2. undefined 값이 할당되지 않은 상태를 나타낸다. 3. prompt(question,[default]) 확인 버튼을 눌렀을 땐 사용자가 입력한 값 반환해주고, 취소 버튼을 누르면 null이 반환된다. 4. confirm(question) 확인을 누르면 true 값 반환, 그 외의 경우는 false값 반환 5. + 연산자 만약 피연산자 중 하나가 문자열일 때, 나머지 하나를 문자형을 바꾼 뒤 두 문자열을 연결한다. 6. null 병합 연산자 ?? a??b 만약 a가 null이나 undefined가 아니면, 위 식의 값은 a 반대로 a가 null이나 undefined이면 위 식의 값은 b 7. 비교연산자 == 형이 다른 값끼리 비교할 경우, 피연..

2-17 화살표 함수 기본 (Javascript)

화살표 함수를 이용하면, 함수 표현식보다 더 간결한 문법으로 함수를 생성할 수 있다! 화살표 함수 형식 let function(a,b)=>expression; 만약 매개변수가 1개밖에 없다면? let function n=>expression; 매개변수가 하나도 없다면? let function()=>expression; 만약 화살표 함수의 본문이 여러줄인 경우? {}을 이용해서 묶어주기! 과제 출처 ko.javascript.info/arrow-functions-basics 화살표 함수 기본 ko.javascript.info

2-16 함수 표현식과 함수 선언문(Javascript)

함수 선언문 vs 함수 표현식 함수 선언문 1. 함수는 독자적인 구문 형태로 존재한다. 2. 선언문이 정의되기 전에도 호출할 수 있다. 전역 함수 선언문은 따라서 어느 위치에 있던 간에 사용이 가능하다. >> 자바스크립트의 내부 알고리즘 때문에 가능한 일이다. 자바스크립트는 스크립트 실행 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 즉 스크립트 실행 전 초기화 단계에서 함수 선언 방식으로 정의한 함수가 이미 생성된다는 말이다. 3. 함수 선언문은 함수가 선언된 코드 블럭{} 안에서만 유효하다. 함수 표현식 1. 표현식이나 구문 구성 내부에 생성된다. 할당연산자 =를 이용해서 만든다. 2. 실제 실행 흐름이 해당 함수에 도달 했을 때 함수를 생성한다. 그래서 그 구문에 실..

함수 (Javascript)

함수 매개변수 Function message(from, text='no text given'){ alert(from + ":" + text); } Message("ann") >>만약 text 매개변수에 값이 전달되지 않았을 경우에는 Undefined가 전달된다. 그러나 위 코드 같은 경우에는 값이 할당되지 않았을 때 no text given이라는 값이 Undefined 대신 할당된다. 함수 선언할 때 기본값을 따로 설정해두는 방법도 있지만, If문을 이용해서 함수 내에서 설정해주는 방법도 있다. Function message(text){ if (text==undefined){ text='Hello'; } } 아니면 논리연산자 ||를 이용하는 방법도 있다. Function message(text){ tex..

[VSCode] Extensions 추가하기

extension은 vscode 이용시 생산성을 높여준다. 1. Material theme >> VSCode 색상 변경시 사용 2. Material Icon Theme 아이콘을 좀 더 직관적으로 알 수 있게끔 해준다. 3. Prettier - Code formatter 코드를 자동으로 변환해준다. Ctrl + , : setting으로 이동 동그라미 친 부분 체크하기 동그라미 친 부분 체크하기2 >> 문자열 입력시 작은 따옴표 사용 설정 4. Bracket Pair Colozier : 괄호마다 색깔이 달라서 코드의 가독성을 높여준다 5. Indent-rainbow 들여쓰기에 색깔이 입혀지면서 가독성이 높아진다 6. Auto rename tag 앞에 태그를 수정하면 뒤에 태그도 자동으로 수정되게 해준다. 7..

2-9 비교 연산자 (Javascript)

자바스크립트의 문자열 비교 알고리즘은 유니코드순이다. 대문자 A와 소문자 a 비교 시, a의 값이 더 크다. 일치 연산자 동등연산자 ==은 0과 false를 구별하지 못한다. 왜냐면 자료형의 동등 여부까지 검사할 수 없기 때문이다. alert(' '==false); // true 일치 연산자 ===를 사용하면, 형변환 없이 값 비교 가능하다. 일치 연산자는 엄격한 동등 연산자이다. 자료형의 동등 여부까지 검사한다. alert(0===false); // false 마찬가지로 !==는 부등 연산자 !=의 엄격한 형태이다. !==는 불일치 연산자 alert(null===undefined) // false alert(null==undefined) // true >> 동등 연산자는 null과 undefined를 ..

2-8 기본 연산자와 수학 (Javascript)

피연산자 : 인수라는 용어로 불리기도 한다. 5 * 2 이면, 5와 2가 피연산자 1. 단항 연산자 : 피연산자를 하나만 받는 연산자이다. EX) let a=1 a=-a >> 단항 마이너스 연산자(-) 2. 이항 연산자 : 두 개의 피 연산자를 받는 연산자 거듭제곱 연산자 ** >> alert(2**3) //8 3. 이항 연산자 +로 문자열 연결하기 ※ 주의 ※ 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 자동변환! ex) alert(2+2+'1') //41 4. 단항연산자 +와 숫자형으로의 변환 단항 연산자의 피연산자가 숫자가 아닌 경우, 숫자형으로 변환이 일어난다. 연산자 우선순위 단항 연산자의 우선순위 >> 이항 연산자의 우선순위 할당 연산자 =는 연산자이기 때문에 흥미로운 함축성을 내포하고..

2-7 형변환 (Javascript)

형변환(type conversion)이란? : 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환 되는데 이 과정을 의미한다. 형변환 예시 alert가 전달받은 값의 자료형과 관계없이, 이를 문자형으로 자동 변환하는 것 - 명시적 형변환 >> 코드에 직접 변환 될 자료형을 입력해야 하는 것 EX) long a=1 int b= (int) a >> (int)를 붙여줌으로써 int형으로 변환이 된다. 만약 a의 값이 int 타입의 범위를 벗어나게 되면, 오버플로우가 발생한다. 암시적 형변환 >> 변환 될 자료형을 입력하지 않아도 되는 형변환이다. 작은 범위의 자료형에서 넓은 범위의 자료형으로 변환할 때 일어난다. int 타입이 -> long 타입으로 변환 1. 문자형으로 변환 : 문자형의 값이 ..

2-6 alert, prompt,confirm을 이용한 상호작용 (Javascript)

alert 함수 > 사용자가 확인 버튼을 누를때까지 메세지를 보여주게끔 하는 함수 - 모달 창 : 메세지가 있는 작은 창을 의미한다. 모달이라는 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 즉, 확인 버튼을 누르기 전까진 모달 창 밖에 있는 버튼을 누를 수 없다. prompt 함수 > 함수가 실행되면 텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 모달창을 띄워준다. result = prompt(title,[default]); title : 사용자에게 보여줄 문자열 default : 입력 필드의 초깃값(선택값) ※ IE 에서는 항상 기본값을 넣어줘야 한다. let test= prompt("Test",''); confirm 함수 (컨펌 대화상자) result = c..

2-5 자료형 (Javascript)

동적 타입 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어이다. EX) let apple='hello' apple=123 >> 주의할 점 : 변수의 선언은 한 번만 할 수 있음 1. 숫자형 (Number Type) : 정수 및 부동 소수점 숫자를 나타낸다. - Infinity : 무한대를 나타낸다. 어떤 숫자든 0으로 나누면 무한대를 얻을 수 있다. alert(1/0) or alert(Infinity) - NaN : 계산 중에 에러가 발생했다는 것을 알려준다. 부정확한 수학 연산을 사용했다는 뜻이다. 예를 들면 문자열을 숫자로 나누려고 했다던가 그런 말도 안되는 연산들! - BigInt형 : 길이에 상관 없이 나타낼 수 있는 자료형으로, 표준으로 채택된 지 얼마 안..