JavaScript 37

[JavaScript] if와 '?'를 사용한 조건 처리

'if'문 알다시피 괄호 안 조건을 평가하고 결과가 true이면 코드 블록이 실행. 불린 타입으로의 변환 괄호 안의 표현식을 평가하고 그 결과를 불린 값으로 변환 숫자 ㅇ, 빈 문자열 "", null, undefined, NaN은 변환 시 모두 false가 되고 이들을 falsy값이라고 부름 이 외에는 변환시 true로 변환하여 truthy 값이라고 한다. 'else'절 if문엔 else절을 붙일 수 있습니다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행 예시: let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) { alert( '정답입니다!' ); } else { alert( '오답입니다!' ); /..

JavaScript/Basics 2022.03.09

[JavaScript] 비교 연산자

기본적인 연산 (더 밑에 추가로 설명할 것) 큼 작음: a>b, a=b, a 1 ); // true alert( 2 == 1 ); // false alert( 2 != 1 ); // true let result = 5>4; alert(result); // true, 불린값도 다른 값처럼 변수 할당 가능 문자열 비교 JS는 사전 순으로 문자열을 비교. (정확히는 사전순이 아니라 유니코드 순) alert( 'Z' > 'A' ); // true alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true 문자열 비교 시 알고리즘 두 스트링의 첫 글자 비교 첫 글자가 같으면 두번째 글자를 같은 방식으로 비교 끝날 때까지 비교 비교가 종료되었는데 길이가 다르..

JavaScript/Basics 2022.03.09

[JavaScript] 기본 연산자와 수학

피연산자 는 연산자가 연산을 수행하는 대상. 5*2 에는 왼쪽 피연산자 5와 오늘쪽 피연산자 2, '피연산자'는 '인수(argument)'라는 용어로 불리기도 함 피연산자를 하나만 받는 연산자는 단항(unary). 피연산자의 부호를 뒤집는 단항 마이너스 연산자 -는 단항 연산자의 대표적인 예입니다. 두개의 피연산자를 받는 연산자는 이항(binary) 연산자(operator). 수학 연산자는 다음과 같음 덧셈 연산자 + 뺄셈 연산자 - 곱셈 연산자 * 나눗셈 연산자 / 나머지 연산자 % 거듭제곱 연산자 ** 특별한 점은 거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작 alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근) alert( 8 ** (1/3) ); // 2 (1/3 거듭제..

JavaScript/Basics 2022.03.09

[JavaScript] 형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데 이런 과정을 "형 변환 (type conversion)"이라고 함 문자형으로 변환 이는 문자형의 값이 필요할 때 일어나는데 alert 메서드는 변수로 문자형을 받기에 alert(value)에서 밸류는 문자형이어야한다. 다른 타입의 값을 받으면 자동으로 값을 문자형으로 바꿔준다. let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다. alert(typeof value); // string 숫자형으로 변환 이는 수학과 관련된 함수와 표현식에서 자동으로 일어나는데 넘버 타입이 아닌 값에 나누기 / 를 적용하면..

JavaScript/Basics 2022.03.09

[JavaScript] 브라우저에서 유저와 상호작용이 가능한 함수 (alert, prompt, confirm)

alert 이 함수가 실행되면 확인을 누를 때까지 떠있는 모달창이 나옴 prompt 두개의 인수를 받는 이 함수는 result = prompt(title, [default]); let age = prompt('나이를 입력해주세요.', 100); alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다. 이 함수가 실행되면 유저가 대화상자의 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다. 입력을 원하지 않으면 취소를 눌러 나올 수 있음 이 함수는 유저가 필드에 기재한 문자열을 반환하고 취소한다면 null이 반환 confirm 이 함수는 변수로 받은 question과 확인 및 취소버튼이 있는 모달이 뜸 당연히 확인을 누르면 true 와 그 외에는 false 를 반환 l..

JavaScript/Basics 2022.03.09

[JavaScript] 자료형 - Data Types

JS에는 여덟가지 기본 자료형이 있다. 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 따라서 어느 순간에는 문자열, 어느 순간엔 숫자가 될 수 있음 let message = "hello"; message = 123456; 이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있는 언어를 '동적 타입' (dynamically typed)' 언어 숫자형 숫자형은 정수 및 부동소수점 숫자(floating point number)를 나타냅니다 이와 관련된 연산 또한 다양한데 덧셈 뺄셈 나눗셈 곱셈 등이 대표적이지요 또 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 '특수 숫자 값(specail numeri value)이 포함 Infinity는 어떤 숫자보다 더..

JavaScript/Basics 2022.03.09

[JavaScript] 변수와 상수 (let, const)

기본 중에 기본이지만 다시 돌아보는 차원에서 변수 란 데이터를 저장할 때 쓰이는 이름이 붙은 저장소. let 를 사용해 변수를 사용한다. 보통 항상 데이터를 넣어서 선언을 했었는데 let message; 이렇게 선언만하고 데이터를 안넣어도 됨 근데 잘 안쓴다 let user = 'john', age = 25, message = 'Hello'; 이렇게 한줄에 다 할 수도 있지만 가독성이 안좋아서 길어지더라도 나눠서 하는게 좋다 let 은 두번 선언하면 에러를 뱉어낸다 let message = "This"; // 'let'을 반복하면 에러가 발생합니다. let message = "That"; // SyntaxError: 'message' has already been declared 변수 명명 규칙 두가지 ..

JavaScript/Basics 2022.03.09

[JavaScript] 오래된 var의 특징

Var 조금 구식인건 알고있었지만 오래된 스크립트에서 let 대신 var를 쓰는 경우가 있는데 이건 오래된 방식이다 조금 더 깊게 파헤쳐보자면 var 는 블록 스코프가 없다. (scope: 범위) 이게 무슨 말이냐면 이렇게 선언된 변수의 스코프는 함수 스코프이거나 전역 스코프 이다. 블록을 기준으로 스코프가 생기지 않기에 밖에서 접근이 가능하다. if (true) { var test = true; //let test=true; 면 밖에서 부를 수 없음 } alert(test); 함수 안에 있다면 위에 말했던 것처럼 전역 스코프 or 함수 스코프 이기에 함수 안에 있으니 함수 안으로만 범위가 설정된다. function sayHi() { if (true) { var phrase = "Hello"; } ale..

JavaScript/Basics 2022.03.09

[JavaScript] use strict / 엄격모드

JS는 꽤 오랫동안 호환성 이슈 없이 발전해왔고 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었습니다. 덕분에 기존에 작성한 코드는 절대 망가지지 않지만 초기에 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼다고 한다 ... ES5가 나온 이후 (현재 ES6)에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었기 때문에 하위 호환성 문제가 생길 수 있다. 그래서 생긴게 이 strict mode 사용을 위한 use strict인데 단순 스트링(문자열)처럼 생겼지만 이게 최상단에 오면 (함수 안 최상단도 올 수 있음) '모던'한 자바 스크립트로 동작한다 브라우저 콘솔에서 사용하려면 기본적으로 적용이 안되는 상태인데 사용하고 싶다면 ⇧ + ↩ 를 눌러서 다음 줄로 넣어서 적..

JavaScript/Basics 2022.03.08

[JavaScript] 스크립트 태그 사용 시 주의점

먼저 스크립트 태그의 사용법을 알아보자면 먼저 JS 코드의 양이 많은 경우엔, 파일로 나눠서 저장 가능. 이렇게 나눠놓은 각 파일을 src속성을 사용해서 HTML에 삽입한다 경로는 상대 경로 또는 절대경로로 나타낼 수 있는데 위에 코드는 절대 경로이고 같은 폴더의 파일을 불러오게 되면 단순하게 src="파일이름.js"로 나타낼 수도 있다 파일이 아니라면 외부 링크에서도 가져올 수 있다. 예로 여러개도 가져올 수 있다 … 당연하게도 HTML안에 JS코드를 넣어 실행시킬 수 있지만, 이런 방식은 스크립트가 간단할 때만 쓰자. 왜냐면 별도의 파일에 작성하게 되면 브라우저가 스크립트를 다운받아서 캐시에 저장하기 때문에 성능상의 이점이 있다! 예로 여러페이지에서 동일한 스크립트를 사용하면 브라우저는 페이지가 바뀔..

JavaScript/Basics 2022.03.08