티스토리 뷰

front-end/JavaScript

JavaScript 기본문법

이안_ian 2018. 12. 6. 22:13




반응형

변수의 종류

자바스크립트는 글로벌스코프와 로컬스코프가 존재하는데 각각 의미하는 바는 전역변수와 지역변수라고 생각하면 쉽다.

<script> </script>안에 자유롭게 선언이 가능하다. 선언 방식은 크게 2가지가 있는데

변수명 = 값;

var 변수명 = 값; 이렇게 두 가지로 선언이 가능하다. 밑에 있는 방식은 우리가 익히 하는 선언 방식인데

첫번째 같이 바로 변수명에 값을 대입해서 하는 방식은 조금 생소한데 권장하지 않는 방식이다. 왜냐하면 함수 안에 변수를 선언하면지역변수로 그 함수가 종료될 때 변수로 함께 사라지지만 var라는 명칭을 쓰지않고 함수안에 변수를 만들면 전역 변수처리가 되기 때문이다. 이러한 방식은 호이스팅이라는 부분에도 영향을 준다.


자바스크립트 변수의 특징

각각의 자료형은 따로 존재 하지만 선언을 할때 쓰이는 자료형은 var 오직하나가 존재한다.(EM6부터는 살짝 바뀜) 따라서 자료형의 결정은 선언했을 때가 아니라 값이 대입되었을 때 그 값에 따라 자료형이 결정되는 특징이 있으며 대입이 안된 변수는 undefined라는 형태로 존재함.



호이스팅

호이스팅이란 변수 호출이 변수 선언보다 먼저 되었음에도 에러가 뜨지않고 호출이 되는것을 말한다. 즉 코드로


console.log(test);

var test = 10;  


처럼 변수 선언이 호출보다 늦지만 호출 했을 때 값이 undefined으로 출력이 된다. 하지만 var test=10; 대신 test =10; 으로 할 경우 빨간 에러가 발생한다. 왜냐하면 자바스크립트는 인터프리터 방식으로 위에서부터 한줄한줄 해석하는 방식이지만 그 전에 컴파일러가 어느정도의 컴파일을 한 후 인터프리터 방식으로 하기 때문이다. 즉 var test라는 선언부가 있음으로써 "나 test라는 변수 사용할꺼야" 라고 미리 알려준셈이다 그렇기 때문에 var로 선언 했을 경우 아직 정의되지 않은 변수 undefined로 출력되고선언부 없이 test로만 선언을 할 경우 없는 값을 출력하려다보니 에러가 뜨는 것이다.


문자열의 기본적인 메소드

메소드 

내용 

 toUpperCase()

모든 문자 대문자로 변환 

toLowerCase() 

모든 문자 소문자로 변환

length 

글자 개수 조회용 멤버변수(속성) 

indexOf() 

찾는 문자의 순번(위치) 리턴 

lastIndexOf() 

뒤에서 부터 찾는 문자의 순번 리턴(순번은 앞에서부터 기준) 

charAt() 

찾는 위치의 문자 리턴 

substring 

값을 일부분만 리턴 

split() 

토큰 문자로 분리한 문자열 배열 리턴 



숫자의 기본적인 메소드

메소드 

내용 

Math.abs() 

절대값 리턴 

Math.random() 

임의의 난수 발생 리턴 

Math.round() 

반올림처리 후 리턴 

Math.floor() 

부동소수점 숫자를 정수로 리턴 

Math.ceil() 

소수점 자리에서 무조건 올림 


<script>
function testMath(){
var num=-123;
var num2=123.456;
var area = document.getElementById("area3");
area.innerHTML +=Math.abs(num)+"<Br>";
area.innerHTML +=Math.round(num2)+"<Br>";
area.innerHTML +=Math.floor(num2)+"<Br>";
area.innerHTML +=Math.ceil(num2)+"<Br>";
area.innerHTML +=Math.floor(Math.random()*10+1)+"<Br>";
}
</script>


typeof() - 값의 자료형을 확인하는 연산자

선언시 자료형을 지정하지 않아 변수명을 보고 데이터를 확인불가, 자료형 확인시 자주 사용됨.


typeof('문자열') -> string

typeof(숫자) ->number

typeof(참/거짓) -> boolean

typeof(객체) -> object

typeof(초기값이 없는 변수) ->undefined

typeof(function) ->function


숫자 -> 문자열

숫자와 문자를 + 연산하게 되면 문자가 우선되어 숫자를 문자로 변환, 

강제 형변환 : String(변수)를 이용함.


문자열 -> 숫자

숫자,문자+ 이외의 사칙연산시 숫자가 우선시 되어 문자를 숫자로 변환, 

강제 형변환 : Number(), parseInt(), parseFloat() 함수 이용.


연산자 사용시 주의할점

자바스크립트에서는 자기 마음대로 자동형변환이 쉽게 일어난다. 

이를테면 var test=10; 을하고 test='바보'; 라고 해도 값이 들어간다.

이때 자료형은 number에서 String으로 자동으로 변하는 성질이 있기 때문이다. 그래서 주의해야할 점이 자바스크립트는

var test1 = 10;

var test2 = '10'; 이 두 함수를 test1==test2 ? 라고 했을 경우 true를 반환한다. 자동 형변환을 하기 때문에 숫자형으로 들어간 10과 문자형으로 들어간 10을 같게 본다는 말이다. 

그렇기 때문에 자료형과 그 값까지 맞는지 확인 하려면 ===, !== 연산자를 사용해야한다.




반응형

'front-end > JavaScript' 카테고리의 다른 글

JavaScript BOM와 DOM  (0) 2018.12.12
JavaScript 객체  (0) 2018.12.10
JavaScript 함수  (0) 2018.12.10
JavaScript 배열의 문법  (0) 2018.12.06
JavaScript 자바스크립트의 특징과 데이터 입출력  (0) 2018.11.29
댓글
반응형
최근에 달린 댓글
글 보관함
Total
Today
Yesterday
최근에 올라온 글
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31