32일차 - 메서드, 개발자도구의 활용, 자바스크립트에서의 수학 연산 등

 

메서드(method)에 대해서

 

31일차까지 봤던 객체 안에는 키-값 쌍뿐만이 아니라 함수를 직접 추가할 수도 있다. 이렇게 추가된 함수는 '변수명.추가된 함수()' 식으로 실행하게 된다.

객체에 추가된 함수와 실행

위 이미지는 greeting이라는 변수에 객체값을 주고 그 안에 greet()라는 함수를 추가한 후 객체 밖에서 실행하고 있는 것이다. 

 

이렇게 객체에 추가된 함수를 메서드라고 한다. 이 메서드는 내장된 것만 해도 정말 많다. 

 

예를 들어, 어떤 웹사이트에서는 사용자가 문자열을 입력할 때 입력가능한 문자의 수를 실시간으로 카운트하고 있는 자바스크립트의 기능을 볼 수가 있는데, 이를 위해 문자열의 길이가 어느정도인지 알아야 한다.

 

그럴 때 length 메서드를 사용한다. 사용법은 해당 문자열이 입력되는 곳의 명칭 뒤에 .length를 붙이면 된다.

문자열 길이를 확인하는 length 메서드

이처럼 문자열에 연결하여 쓰는 메서드들이 많은데, 대표적으로 toUpperCase()와 toLowerCase()는 각각 문자열을 대문자화, 소문자화 해주는 기능을 가지고 있다.

 

개발자도구를 활용하여 확인하기

 

각 브라우저에는 훌륭한 개발자 도구라는 것이 있다. 내가 쓰는 크롬에도 사용자 친화적인 개발자 도구가 있는데, 브라우저창에서 검사를 누르면 나오는 창이 개발자 도구이다.

크롬 개발자 도구

이 개발자 도구에서 console로 가면 해당 웹페이지에 적용된 자바스크립트를 확인할 수 있는데, 코드를 통해 확인할 방법을 알려줘야 한다.

 

이때 console.log를 이용한다. 이는 console이라는 내장된 변수이며, 점(.)을 찍으면 여러 개의 메서드도 내장되어 있는 것을 확인할 수 있다. console.log는 그 중의 하나에 해당하는 메서드이다.

console.log의 활용

위 이미지는 객체 안의 greet() 함수를 객체 밖에서 실행하고 console.log를 통해 결과를 표출하는 것을 나타낸 것이다.

 

자바스크립트에서의 수학 연산

 

수학 연산의 제일 단순한 예시로 흔히 하는 산수같은 경우 +, -, *, /을 통해 가능하다. 그런데 여기서 10을 4로 나누면 2.5라는 값이 나오는데, 이렇듯 소수점이 없는 숫자와 있는 숫자는 서로 다른 명칭을 가지게 된다.

 

소수점이 없는 숫자는 정수(Integers)라고 하고, 소수점이 있는 숫자를 부동소수점(float)라고 한다.

 

그리고 자바스크립트에서는 나머지값을 연산할 수도 있다. % 기호가 나머지 연산자로 사용되며, 10 % 4를 하면 2라는 값이 나오게 된다.

 

또, 자바스크립트의 수학 연산은 기본적인 수학 연산방식이 그대로 적용된다. 계산식에 덧셈, 곱셈, 나눗셈이 혼합되어 있으면 곱셈과 나눗셈을 먼저 연산하고 덧셈을 하는 식이다. 만약 이 규칙을 바꾸고 싶다면 실제 계산처럼 소괄호를 이용하면 된다.

실제 연산방식이 적용된 자바스크립트

위 이미지는 덧셈을 먼저 처리하는 혼합계산식을 출력하여 4.9라는 결과값을 얻었고, 그 값 자체를 result라는 변수로 지정하여 이 변수의 값을 10 * 4로 바꾸고, 또다시 그 값에 7을 더하여 콘솔에 출력하는 과정을 나타낸 것이다. 최종적으로 47이라는 결과값이 나왔다.

 

또한, 어떤 값에 1씩 더하거나 빼려면 ++와 --를 사용할 수 있다. 이렇게 했을 때에는 예를 들어 result 값이 7일 때 result++를 하면 8이 되고 result--를 하면 6이라는 결과가 나온다. 

**은 지수연산자로서 7 ** 3을 하면 7의 3승이라는 뜻으로, 343이라는 결과값이 나온다.

 

연산식을 간소화하는 방법도 있다. +=, -=, *=, /=를 쓰는 방식이다.

연산식 간소화 방식

위 이미지는 7에 간소화된 연산식을 사용하여 5씩 사칙연산을 한 것과 그 결과값을 나타낸 것이다. 이처럼 간소화방식을 쓰면 사칙연산이 가능하다.

 

자바스크립트에서는 숫자의 연산뿐만 아니라 문자열 연산도 가능하다. 문자열끼리 더하면 해당 문자열들이 연결되는 식이다.

문자열의 연산

위 이미지에서는 Byeol과 ee라는 두 문자열을 합해서 Byeolee라는 문자열이 만들어지는 것을 보여주고 있다.

 

만약 문자열에서 뺄셈, 곱셈, 나눗셈을 사용하면 NaN (Not a number)라는 값이 뜬다. 이 값은 자바스크립트에 내장된 특수 유형으로, 자바스크립트가 숫자를 결과로 도출할 수 없는 값에 수학 연산을 실행했을 때 나타나게 된다.

 

덧셈 연산자는 예외인 것이다. 그래서 뺄셈, 곱셈, 나눗셈 연산자는 숫자에만 사용이 가능하다.

 

문자열과 숫자의 구분

 

자바스크립트를 사용하면서 문자열과 숫자를 반드시 구분할 수 있어야 한다. 이 뜻은 자바스크립트에서 문자열로 텍스트만 쓸 수 있는 것이 아니라는 것인데, 7은 숫자이지만 7을 따옴표 안에 넣으면 그것 또한 문자열이 된다.

문자열과 숫자의 구분

위 이미지를 예를 들어보면, stringTest에서는 byeol라는 문자열과 2라는 문자열을 합해서 byeol2라는 문자열이 나왔다. 두 번째에서는 byeol이라는 문자열과 숫자 2를 더했더니 이 또한 byeol2라는 문자열이 나왔다.

 

세 번째에서 숫자 2와 문자열 2를 더했더니 22라는 문자열값이 나왔고, 네 번째 문자열 2를 두 번 더하니 마찬가지로 22라는 문자열값이 나왔다.

 

그런데 마지막 다섯 번째에서 문자열 3과 숫자 2를 곱했더니 숫자 6이라는 값이 나왔다. 다른 예시들처럼 문자열값이 나올 줄 알았는데 숫자가 나온 것이다.

 

자바스크립트는 문자열에 대해서 -, *, /으로 무엇을 할지 모르는 상태가 된다. 하지만 연산을 실패하는 대신 문자열을 숫자로 변환하고 변환된 숫자로 연산을 시도하게 된다. 그래서 숫자 6이라는 값이 나온 것이다.