[JavaScript] 입출력 함수와 형 변환 (2)

[입출력 함수]

우리가 결과에 대해서 출력을 확인해야하는 경우, 사용자로부터 입력을 받아야하는 경우 등

간단한 코드를 작성하려고 할 때, 자주 사용하는 함수가 있다. 아래를 확인해보자

 

1. window.prompt(' ')

해당 함수는 텍스트 필드, 확인, 취소 버튼이 있는 대화 상자를 띄운다. 입력한 메세지 내용을 리턴 값으로 돌려받는다.

 

2. document.write(' ')

브라우저 화면 상의 페이지에 직접 값을 출력한다. 해당 함수는 html 내부에서 script 태그를 사용하여 사용 가능하다(위치가 필요하기 때문)

 

3. window.alert(' ') 

해당 함수는 화면에 출력문과 알림창을 띄운다. window <는 생략 가능하며 alert()로 사용 가능하다.

 

4. document.querySelector(선택자)

자바스크립트 코딩을 하면서 가장 많이 사용될 함수로 어떤 태그에 대해서 작업을 해줄 지 위치를 가져오는 함수이다.

 

다음과 같이 로그인 페이지 값이 들어간 h1 태그에 id 'title'을 document.querySelector 메서드에 인자로선택자 형식의

#title로 넣어주면 리턴으로

 

다음과 같이 해당 태그의 정보를 알려준다. 자바스크립트에서 매우 자주 사용하는 함수로써 해당 함수를 사용하기 위해서는 선택자에 대해서도 알아두는 것이 좋다.

 

[선택자]

1. 태그 선택자 = "태그명"

2. id 선택자 = "#id명"

3. class 선택자 = ".클래스명"

4. 전체선택자 = "*";

5. 자식요소 선택자 = "선택자1 선택자2" (선택자 1의 하위태그 선택자2 모두를 지정)

6. 자식요소 선택자2 = "선택자1 > 선택자2" (선택자1의 하위태그 선택자2 맨 위 한가지 요소만 지정)

7. 자식요소 선택자3 = "선택자1 > 선택자2:nth-child(n)" (선택자1의 하위태그 선택자2 중 n번째 요소 지정)

 

 

[형변환]

우리가 코드를 짜는 경우에 문자열과 정수형 등 여러가지 형태가 혼합되어 연산을 해야하는 경우가 있다. 그럴 때 어떤식으로 결과가 산출되는지에 대해서 생각을 하고 코딩을 진행해야한다. 다른 개발자가 해당 식을 확인했을 때, 어떤 의도를 가지고 해당 연산을 진행 했는지 가시적으로 보여주는 것 또한 중요하다.

 

해당 구문에서 자바스크립트에서 사용되는 일반 형변환과 강제 형변환에 대해서 간략하게 알아보자.

 

1. 일반 형변환

let a = "2" + "2" - "2"
console.log(a);

let b = 'hello' * 3;
console.log(b);

let c = "2" * 2
console.log(c);

 

해당 예시코드를 확인해보자. 변수 a에 대한  식을 확인해보면 숫자가 쌍따옴표에 담겨 문자형태로 연산이 이루어 진다.

자바스크립트에서는 + 기호에 대해서는 문자열 연결 기호로 사용되며, "2" + "2"의 경우 문자열 22가 출력된다. 그리고 뺄셈 연산에 대해서는 문자열에 담긴 내용이 숫자인 경우에 정수형태로 바꾸어서 계산을 마치고 정수형으로 반환한다. 

변수 b에서는 문자열과 정수간의 곱셈 계산이 이루어진다. 문자열 내에 문자가 정수값이 아니라면 해당 계산은 이루어지지 않고 Not a number 라는 NaN 가 출력된다.

변수 c에서는 문자 2와 정수형 2가 만나서 계산이 이루어진다. 쌍따옴표 안에 문자가 숫자이므로 문자와 정수형 계산이지만 자동으로 형변환 되어서 2 * 2의 결과 4가 출력되게 된다.

 

 

2. 강제 형변환

 

강제 형 변환을 사용하는 이유는 자동형변환을 통한 의도를 가시적으로 다른 사람에게 보여줄 수 있다.

 

 위에 예시 코드에서 변수에 대해서 연산할 때, 자동형변환이 되더라도 Number() 메서드를 통해서 진행해주는 것이 좋다. 변수 a를 확인해보면 let a ="2"+ "2" -"2" 에 대해서 연산을 하고있다. 

여기서 "어짜피 자동 형변환 되는데 "2"를 강제형변환 해줄 필요가 없지 않나요???" 라고 질문할 수 있다.

하지만 "2"가 변수안에 담겨져 있는 값이라고 생각해보자 

let v1 = "2";
let v2 = "2";
let v3 = "2";

let b = v1 + v2 - v3

 

다른 개발자가 아래 b = v1 + v2 - v3를 봤을 때, 단순히 변수명만 보고 해당 변수가 문자열인지 정수형인지 알 수 없다. 단순히 계산을 하는구나 정도로 알고 있다. 하지만 여기서 Number() 메서드와 String() 메서드를 통해서 가시적으로 보여주면

let v1 = "2";
let v2 = "2";
let v3 = "2";

let b = String(v1) + String(v2) - Number(v3)

 

썩 좋은 예시는 아니지만, v1과 v2의 연산의 경우에는 문자열을 합친다는 의도가 보이고, v3와는 정수형 계산으로 v3를 뺄셈연산을 하겠다는 의도가 맨 아랫줄 코드 한줄로서 확인이 가능하다.

 

 

정리하자면, 나중에 협업의 개념을 생각해보면 코드는 같이 일하는 사람들에게 보여질 코드이다. 의도가 확연히 보여야하며 나만 봤을 때 이해가 되는 코드는 좋지 않은 코드에 속한다. 다른 사람이 봤을 때도 한눈에 의도파악이 가능한 코드가 정말 좋은 코드가 된다.