[JavaScript] 변수의 스코프, 형변환 함수, 문자열 함수

🍁변수의 스코프

---

변수의 스코프는 변수 생명주기 혹은 영역이라고 부른다.

 

Java와 JavaScript의 변수

Java

• 멤버 변수: 클래스 전역에서 사용할 수 있다.
• 지역 변수: 메서드 또는 제어문 전역에서 사용할 수 있다.

static 변수도 멤버 변수의 일종이므로 Java에는 멤버 변수와 지역 변수만 존재한다.

 

JavaScript

• 전역 변수: 한 페이지 내에서 사용할 수 있다. 변수 선언문이 실행될 때 생성이 되었다가 브라우저의 페이지가 바뀌는 경우(종료되는 순간) 사라진다.
• 지역 변수: 함수 내에서만 사용할 수 있다. 자바스크립트의 지역 변수는 함수 단위 지역 변수이므로 함수만 자기 영역으로 인식하고, 제어문은 영역으로 인식하지 못한다.

지역 변수는 함수만 자기 영역으로 인식한다는 점에서 함수 스코프를 갖는다고 말한다.

 

전역 변수와 지역 변수

전역 변수

var num1 = 100; //전역 변수

<script> 태그 내에서 선언한 num1은 전역 변수이며, 자바스크립트의 전역 변수는 자바의 멤버 변수와 비슷하다.

개발자 도구의 Console에서 num1을 입력하자 100을 출력한다.

 

지역 변수

function m1() {
    var num2 = 200; //지역 변수
    console.log('num2', num2);
}

m1();
console.log('num2', num2);

m1 함수를 영역으로 하는 num2은 지역 변수이다.

지역 변수는 함수 내에서만 사용할 수 있기 때문에 함수 밖에서 num2를 출력하면 인식하지 못해 에러가 발생한다.

 

if문에서 선언한 변수는 전역 변수이다.

if (num1 > 0) {
    console.log('참');
    var num3 = 300; //지역 변수(X) 전역 변수(O)
    console.log('num3', num3);
}
console.log('num3', num3);

if문 내에서 선언한 num3는 지역 변수가 아니라 전역 변수라는 점에서 주의가 필요하다.

 

변수를 선언할 때 반드시 var을 쓴다.

var num4 = 400; //전역 변수
num5 = 400; //전역 변수

자바스크립트는 변수를 선언할 때 var로 선언하는데, var(variable) 없이 선언할 수 있다.

하지만 var 없이 선언하면 선언을 한 건지 값을 바꾼 건지 알 수 없어 가독성을 떨어뜨린다.

그러므로 var 없이 변수를 선언하지 않도록 한다.

 

var 키워드 없이 변수를 선언하면 전역 변수가 된다.

function m2() {
    var num6 = 600; //지역 변수
    num7 = 700; //지역 변수(X) 전역 변수(O)
}
m2();
console.log(num7);

앞서 함수 내에서 선언한 변수는 지역 변수가 된다고 했다. 그런데 함수 내에서 선언한 num7을 함수 밖에서 호출하자 출력이 된다.

var키워드 없이 선언한 변수는 모두 전역 변수가 되기 때문이다.

 

🍁형변환 함수

---

내장 함수 (Built-in Function)

• number parseInt(value): value를 정수로 변환한다.
• number parseFloat(value): value를 실수로 변환한다.

형변환 내장 함수로는 위의 두 가지가 있다.

 

number parseInt(value)

var n1 = 3.99;
console.log(parseInt(n1)); //실수 > 정수

실수 3.99를 3으로 출력한다. 이때 반올림이 아니라 절삭한다.

파란색이면 숫자, 검은색이면 문자이다.

 

var n2 = '300';
console.log(n2, typeof n2); //string
console.log(parseInt(n2), typeof parseInt(n2)); //number

문자열의 '300'을 넣더라도 형변환으로 정수로 돌려준다.

 

var n3 = 'Issac';
console.log(parseInt(n3)); //NaN

var n4 = '100점';
console.log(parseInt(n4)); //100

n4 = 'score90';
console.log(parseInt(n4)); //NaN

n4 = '100점이 아니라 95점입니다.';
console.log(parseInt(n4)); //100

parseInt는 문자열도 숫자형으로 바꿔줄 수 있다.

하지만 자바스크립트는 처음부터 숫자가 나오고 숫자가 아닌 걸 만나기 직전까지 나오는 숫자만을 정수로 바꾸는 작업을 해준다. 그래서 'score90'은 NaN으로 실패한 것이다.

 

var width = '200px';
console.log(width + 100); //200px100

console.log(parseInt(width) + 100); //300

CSS에서는 px 같은 단위가 함께 들어간 값을 계산해야 하는 경우가 있는데, 문자열을 버리는 형변환 함수의 특징이 계산을 쉽게 해 준다.

 

number parseFloat(value)

var size = '1.5em';
console.log(parseInt(size));
console.log(parseFloat(size));

parseFloat도 parseInt와 마찬가지로 뒤의 문자열을 버리고 숫자만을 인식한다.

 

boolean isNaN(value)

• true: 숫자가 아니다.
• false: 숫자이다.

boolean isNaN(value)은 value가 숫자가 아닌지를 물어보는 내장 함수이다.

 

//사용자 나이 입력
var age = '25세';

console.log(isNaN(age));

if (isNaN(age)) {
    console.log('나이가 올바르지 않습니다.');
} else {
    console.log('올바른 나이입니다.');
}

age = 25;

if (isNaN(age)) {
    console.log('나이가 올바르지 않습니다.');
} else {
    console.log('올바른 나이입니다.');
}

위 코드는 '25세'와 '25'를 숫자인지 물어서 올바른 나이인지를 물어보는 코드이다.

 

🍁문자열 함수

---

var txt = "Hello world";

문자열 함수를 신나게 알아보도록 하자.

 

문자열 길이

console.log(txt.length); //프로퍼티(Property)

문자열 길이 함수는 프로퍼티(Property)라고 부른다.

 

검색

var txt = "Hello world";

console.log(txt.indexOf('o'));
console.log(txt.indexOf('o', 5));
console.log(txt.lastIndexOf('o'));
console.log(txt.lastIndexOf('o', 6));

 

txt = 'Isaac';

console.log(txt.startsWith('I'));
console.log(txt.endsWith('c'));

 

대소문자 변환

console.log(txt.toUpperCase());
console.log(txt.toLowerCase());

 

추출

console.log(txt.substr(0, 5));
console.log(txt.substring(6, 11));
console.log(txt.charAt(0));
console.log(txt.charCodeAt(0));

chatAt는 문자를 추출할 때 사용하며, charCodeAt은 문자 코드값을 추출할 때 사용한다.

 

치환

txt = "Hello world Hello friend";

console.log(txt.replace('Hello', 'Bye')); //Bye world Hello friend

치환 함수는 첫 번째로 만나는 인자값만을 바꿔준다.

모두 바꾸려면 정규 표현식을 사용해야 한다.

 

정규 표현식 사용

console.log(txt.replace(/Hello/g, 'Bye'));

정규 표현식은 슬래시 안에 작성하는 방식을 많이 사용하며, global의 의미로 g를 사용해 주었다.

모든 'Hello'를 찾아서 'Bye'로 바꿔주었다.

 

공백 제거

txt = '       공       백        ';

console.log('@' + txt.trim() + '@');
console.log('@' + txt.trimLeft() + '@');
console.log('@' + txt.trimStart() + '@');
console.log('@' + txt.trimRight() + '@');
console.log('@' + txt.trimEnd() + '@');

 

분할

txt = 'Isaac,Sopia,Lee';

console.log(txt.split(','));

 

기타 등등

txt = '1';

console.log(txt.padStart(3, '0'));
console.log(txt.padEnd(3, 'A'));
console.log(txt.repeat(3, txt));

padStart 함수와 padEnd 함수로 문자에 내용을 채워 넣을 수 있다.

repeat 함수는 해당 문자를 반복하여 출력할 수 있다.