목차
- 변수
1-1. 변수 선언 및 대입
1-2. 변수 명명 규칙
1-3. 상수 선언 및 대입 - 자료형
2-1. let, const
2-2. 원시 자료형
2-3. 참조 자료형 - 입출력
3-1. alert(내용);
3-2. console.log(내용);
3-3. let 변수 = confirm(내용); true/false
3-4. let 변수 = prompt(내용); 입력한 내용(또는 기본값)/null - 형변환
4-1. typeof() 연산자
4-2. 문자형변환 String(value);
4-3. 숫자형변환 Number(value);
4-4. 논리형변환 Boolean(value);
4-5. 문자열과 숫자간 + 연산 - 연산자
5-1. 비교 연산자 통한 문자열 비교
5-2. 동등 연산자와 일치 연산자
5-3. 논리 연산자 이용한 조건문 예시
1. 변수
1-1. 변수 선언 및 대입
<body>
<script>
// 변수 선언
let str;
// 대입
str = '변수';
// alert로 출력
alert(str);
// 선언과 대입 동시에
// 같은 이름의 변수 재선언 불가
// let str = '이름';
let name = '이름';
console.log(name);
</script>
</body>- 주의할 점은 같은 이름의 변수 재선언이 불가하다는 것이다.
- 예시에서 let str;을 다시 선언하면 SyntaxError 오류가 생긴다.
1-2. 변수 명명 규칙
❗ 자바(Java) 언어를 학습할 때 다룬 명명 규칙과 크게 다르지 않다.
<body>
<script>
// 유효한 변수명
let userName;
let number1;
let number_2;
let number$3;
// 유효하지 않은 변수명
//let 1number;
//let number#4;
// 유효하지만 권장하지 않음
let 변수 = '변수입니다';
console.log(변수);
</script>
</body>- 문자, 숫자, '$', '_' 사용 가능
- 첫 글자는 숫자가 될 수 없음
- 예약어 사용 불가
- 카멜 표기법 사용
1-3. 상수 선언 및 대입
<body>
<script>
// const는 재할당 할 수 없다
const PI = 3.141592;
// 재할당 시 오류 발생
//PI = 3.14;
console.log(PI);
// 선언 시 할당해야 함
//const NUM;
//NUM = 123;
</script>
</body>- 상수의 경우 선언 및 할당이 동시에 이루어져야 한다.
2. 자료형
- 자바스크립트는 느슨한 타입(loosely typed) 언어이자 동적(dynamic) 언어이다.
변수의 타입을 미리 선언할 필요가 없으며, 타입은 프로그램이 처리되는 과정에서 자동으로 파악된다.- 같은 변수에 여러 타입의 값을 넣을 수 있다는 의미이다.
2-1. let, const
❗var→ let, const
ES5까지는 모든 변수를 var라는 예약어로 선언해왔다. 하지만 ES6 문법에 들어서부터 let, const를 사용하도록 개정되었다. ES5는 '전역 범위' 및 '함수 범위'라는 두 가지 유형의 범위만 취급했지만, ES6에 있어서는 그 외에도 '블럭 범위'인 변수 및 상수를 제공한다. 변수 범위(scope)에 있어 개정사항이 생긴 것이다.
ECMAScript 6는 ES6 또는 ECMA Script 2015라고도 하며, JavaScript의 두 번째 주요 개정판(2015)을 말한다.
var-let 선언 범위 테스트
블럭 범위 구분 여부
<body>
<script>
var x = 1;
let y = 2;
console.log('블럭 밖 x = ' + x);
console.log('블럭 밖 y = ' + y);
{
var x = 3;
let y = 4;
console.log('블럭 안 x = ' + x);
console.log('블럭 안 y = ' + y);
}
console.log('블럭 밖 x = ' + x);
console.log('블럭 밖 y = ' + y);
</script>
</body>
- var의 경우 전역 범위와
블럭 범위간 구분을 짓지 못하고 마치 재할당된 값처럼 외부 변수 또한 3이라는 값으로 변경된다. - 반면 let은 블럭 범위를 취급 및 구분한다. 따라서 블럭 안에서 변수 재선언이 일어났다하더라도
외부 변수가 가진 값에는 아무런 영향을 끼치지 않는다.
var-let 선언 범위 테스트
loop 블럭 구분 여부
<body>
<script>
var i = 5;
for(var i = 0; i < 10; i++) {}
console.log("i = " + i);
let j = 5;
for(let j = 0; j < 10; j++) {}
console.log("j = " + j);
</script>
</body>- var로 선언된 변수 i는 for문을 지나오는 동안 다시금 0으로 재선언된다: var i=0;
- 하지만 let 타입의 변수 j는 for문 블럭에 선언된 let j=0;과는 무관하게 전역 범위에서는 여전히 5라는 값을 보인다.
2-2. 원시 자료형
✅ number, string, boolean, null, undefined
- 원시 자료형(primitive type)은 기본 자료형으로, 할당될 때에 변수에 값(value) 자체가 담긴다.
number
숫자(정수 및 실수)
<body>
<script>
let age = 20;
let height = 171.5;
console.log(age);
console.log(height);
</script>
</body>Infinity
무한대
<body>
<script>
console.log(1/0);
console.log(Infinity);
</script>
</body>NaN
Not a Number
<body>
<script>
console.log('문자'/2);
console.log(NaN);
</script>
</body>string
문자열, 큰따옴표/작은따옴표로 묶음
문자 자료형은 따로 없음
<body>
<script>
let strA = 'single';
let strB = "double";
console.log(strA);
console.log(strB);
</script>
</body>boolean
논리값
<body>
<script>
let boolA = true;
let boolB = 1 == 2;
console.log(boolA);
console.log(boolB);
</script>
</body>null
존재하지 않는 값, 알 수 없는 값, 비어 있는 값
<body>
<script>
let nullValue = null;
console.log(nullValue);
</script>
</body>undefined
값이 할당되지 않은 상태
<body>
<script>
let undef;
console.log(undef);
// 명시적 undefined
let undefB = undefined;
console.log(undefB);
</script>
</body>
2-3. 참조 자료형
✅ Array, Object, function
- 참조 자료형(reference type)은 할당될 때 보관함의 주소가 담긴다.
Array
배열
<body>
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr);
</script>
</body>
Object
객체
<body>
<script>
let user = {
name : "김자스",
age : 30,
id : "user01"
};
console.log(user);
console.log(user.name);
console.log(user.age);
console.log(user.id);
</script>
</body>
3. 입출력
❗ alert, confirm, prompt 창이 떠 있는 동안은 스크립트 동작이 일시정지한다. 사용자가창을 닫기 전까지는 나머지 페이지와 상호작용이 불가하며, 해당 창들은 브라우저마다 다른 모양을 가지기에개발자가 수정 불가한 요소이다.
| alert(내용); | 내용을 메시지 창에 출력 |
| console.log(내용); | 개발자 도구 화면에 콘솔에 출력 |
| confirm(내용); | 대화 창에 메시지와 함께 확인/취소 버튼 표시 질문에 대해 예/아니오 결과 얻을 때 사용 리턴값 : 확인(true), 취소(false) |
| prompt(내용); | 대화 창에 텍스트 필드와 함께 확인/취소 버튼 표시 리턴값: 입력한 내용 |
3-1. alert(내용);
<body>
<script>
alert('alert에 메시지 출력하기');
</script>
</body>- 사용자가 확인 버튼을 누를 때까지 메시지를 보여주기 위한 용도로 쓰인다.
3-2. console.log(내용);
<body>
<script>
console.log('콘솔 화면에 출력하기');
</script>
</body>- 개발자 도구 콘솔 화면에 출력하고자 할 때 사용하며, 주로 디버깅 시 활용 빈도가 높다.
3-3. let 변수 = confirm(내용); true/false
<body>
<script>
let result = confirm('참여를 원한다면 확인, 아니면 취소를 누르세요');
console.log('result : ' + result);
</script>
</body>- 주어진 질문에 대해 예/아니오의 결과를 얻을 때 사용한다.
- 확인 버튼과 취소 버튼이 나타나며, 확인 버튼 클릭 시 true/취소 버튼 또는 ESC 클릭 시 false를 리턴한다.
3-4. let 변수 = prompt(내용); 입력한 내용(또는 기본값)/null
<body>
<script>
let age = prompt('당신은 몇 년생인가요?', 2002);
console.log("yearOfBirth : " + yearOfBirth);
</script>
</body>- 텍스트를 입력할 수 있는 텍스트 필드와 함께 확인/취소 버튼이 있는 대화상자가 출력된다.
- 입력한 메시지 내용을 리턴값으로 반환 받는다.
- 취소 버튼 클릭시 null을 리턴하며, 두 번째 인자로 기본값 설정도 가능하다.
4. 형변환
4-1. typeof() 연산자
- 값의 자료형을 확인하는 연산자이다.
- 선언 시 자료형을 지정하지 않기에 변수명만으론느 데이터 확인이 불가하다. 따라서 자료형 확인 시에 typeof() 연산자를 자주 사용한다.
4-2. 문자형변환 String(value);
<body>
<script>
console.log("======= 문자형 변환 =========");
let str = false;
console.log(str);
console.log('typeof str : ' + typeof str);
str = String(str);
console.log(str);
console.log('typeof str : ' + typeof str);
</script>
</body>
- alert 메소드의 매개변수는 문자형이므로 alert(value)는 언제나 문자형이다. 다시 말해 value가 다른 타입인 경우는 문자형으로 자동 변환된다.
- 또한 String(value) 함수 호출로 강제 형변환도 가능하다.
- 예시에서는 기존 boolean 타입의 값을 가진 변수 str을 → String(str);로 강제 형변환하자 → 마침내 string 타입으로 결과가 바뀌었음을 알 수 있다.
4-3. 숫자형변환 Number(value);
<body>
<script>
console.log("====== 숫자형 변환 ========");
console.log('"10" / "2" : ' + "10" / "2");
let number = "100";
console.log(number);
console.log('typeof number : ' + typeof number);
number = Number(number);
console.log(number);
console.log('typeof number : ' + typeof number);
</script>
</body>- 수학과 관련된 함수 및 표현식에서 자동 변환된다.
- 필요에 따라 강제 형변환을 적용할 때는 Number(value);를 쓴다.
- 문자로서 "10" / "2"를 작성했음에도 결과적으로 숫자간 연산으로 읽혀 5라는 숫자값이 반환된다.
자바에서는 컴파일 에러에 해당된다. - 변수에 "100"이라는 문자를 담았을 때도 마찬가지이다. typeof 연산자로 확인하자 여전히 자료형은 string임을 알 수 있다.
- 이에 대해 Number(number); 강제형변환 적용하면 비로소 자료형이 number로 처리된다.
<body>
<script>
// 공백 자동 제거
console.log('Number(" 100 ") : ' + Number(" 100 "));
// 공백 외의 문자 포함시 NaN
console.log('Number("123a") : ' + Number("123a"));
// true -> 1, false -> 0
console.log('Number(true) : ' + Number(true));
console.log('Number(false) : ' + Number(false));
// null -> 0, undefined -> NaN
console.log('Number(null) : ' + Number(null));
console.log('Number(undefined) : ' + Number(undefined));
</script>
</body>
- Number(value); 강제형변환 진행 시 공백은 자동 제거 후 숫자로 변환시킨다.
- 공백 이외의
문자가 포함된 경우는 NaN(Not a Number)결과를 보인다. - boolean 타입의 값인 true는 1, false는 0으로 옮겨진다.
- 원시 자료형에 속하는 null은 0,
undefined는 숫자로 취급되지 못하고 NaN으로 읽힌다.
4-4. 논리형변환 Boolean(value);
<body>
<script>
console.log("========= 논리형 변환 ========");
// 1 -> true, 0 -> false
console.log('Boolean(1) : ' + Boolean(1));
console.log('Boolean(0) : ' + Boolean(0));
// 값이 있는 문자열 -> true
console.log('Boolean("str") : ' + Boolean("str"));
// 값이 없는 문자열, null, undefined -> false
console.log('Boolean("") : ' + Boolean(""));
console.log('Boolean(null) : ' + Boolean(null));
console.log('Boolean(undefined) : ' + Boolean(undefined));
</script>
</body>
- 논리 연산 수행 시 발생한다.
- Boolean(value); 함수 호출 통해 강제형변환 진행이 가능하다.
❗ true는 1, false는 0이라는 숫자값 통해 호출이 가능하다.
- 값이 있는 문자열이 전달되었을 때는 true를 반환한다.
- 한편 값이 없는 문자열이거나, null, undefined인 경우는 false가 리턴된다.
4-5. 문자열과 숫자간 + 연산
<body>
<script>
let test1 = 7 + 7;
let test2 = "7" + "7";
let test3 = "7" + 7;
let test4 = 7 + 7 + "7";
// '+'를 이항 연산자가 아닌 단항 연산자로 사용 시
// 숫자형이 아닌 피연산자는 숫자형으로 변화한다
let test5 = 7 + 7 + +"7";
</script>
</body>
- 문자열 + 숫자 = 문자열이 된다.
- 숫자 + 숫자 + 문자열 = 숫자간 계산 후 문자열과 합쳐진다.
- 플러스(+) 기호가 이항 연산자가 아닌 단항 연산자로 쓰인다면 해당 피연산자는 숫자형으로 읽히게 되어 있다. 단항 연산자라 함은 자바 언어에서도 전위연산/후위연산 시 많이 다뤘던 i++, ++i 형태처럼 문자 앞에 플러스(+) 기호가 자리잡는 경우를 말한다: 7 + 7 + +"7";
5. 연산자
❗ 연산자 우선순위 : 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입
| 최우선 연산자 | (), [], . |
| 단항 연산자 | ++, --, + sign, - sign |
| 산술 연산자 | +, -, *, /, % |
| 관계 연산자 | >, <, >=, <=, ==, !=, ===, !== |
| 논리 연산자 | &&, || |
| 삼항 연산자 | ? : ; |
| 대입 연산자 | = |
| 복합대입 연산자 | +=, -=, *=, /=, %= |
기본적인 연산자 사용 및 우선순위 등은 자바 언어와 크게 다르지 않다. 차이가 있는 부분에 대해서 확인해보자.
5-1. 비교 연산자 통한 문자열 비교
<body>
<script>
console.log("===== 문자열 비교 연산자 사용 =====");
console.log("'hello' == 'hello' : " + ('hello' == 'hello'));
console.log("'hello' != 'hello' : " + ('hello' != 'hello'));
console.log("'apple' < 'banana' : " + ('apple' < 'banana'));
console.log("'apple' > 'banana' : " + ('apple' > 'banana'));
console.log("'cat' <= 'Zoo' : " + ('cat' <= 'Zoo'));
console.log("'cat' >= 'Zoo' : " + ('cat' >= 'Zoo'));
</script>
</body>- 문자열간에 같다(==), 같지 않다(!=)는 비교가 가능하다.
- 사전순(유니코드순)으로 뒤쪽에 위치한 문자열이 그 앞의 문자열보다 큼(>)을 정의할 수 있다. 즉 ('apple' < 'banana')는 true이다. 사전상에 b가 a보다 뒤에 있기 때문이다.
- 주의할 점은 유니코드상에서 소문자가 대문자보다 큰 수를 가지고 있다는 것이다. 따라서 ('cat' >= 'Zoo')여야 true이다.
5-2. 동등 연산자와 일치 연산자
console.log('1 == "1" : ' + (1 == "1")); //true
console.log('1 == true : ' + (1 == true)); //true
console.log('1 == "true" : ' + (1 == "true")); //false- 동등 연산자(==, !=)의 경우 자료형과 상관 없이 값이 일치하면 true, 그렇지 않으면 false를 반환한다.
- 따라서 위 예시에서는 "true"라는 문자열을 데려다 읽힌 경우만 제외하고는 boolean 타입의 값인 true나 string 타입인 "1"에 대해서도 true로 읽어낸다.
console.log('1 === "1" : ' + (1 === "1")); //false
console.log('1 === true : ' + (1 === true)); //false
console.log('1 === "true" : ' + (1 === "true")); //false- 하지만 일치 연산자(===, !===)는 자료형과 값이 모두 같아야만 true, 그렇지 못한 경우 false가 리턴된다.
- 우선적으로 비교 대상의 타입이 모두 일치하지 않으므로 false라는 결과를 보인다.
<body>
<script>
//동등 연산자
console.log('0 == "0" : ' + (0 == "0")); //true
console.log('0 == "" : ' + (0 == "")); //true 빈 문자열=0
console.log('"0" == "" : ' + ("0" == "")); //false
console.log('null == undefined : ' + (null == undefined));
//일치 연산자
console.log('0 === "0" : ' + (0 === "0")); //false
console.log('0 === "" : ' + (0 === "")); //false
console.log('"0" === "" : ' + ("0" === "")); //false
console.log('null === undefined : ' + (null === undefined)); //false
</script>
</body>- 동등 연산자는 문자 "0" 또는 빈 문자열 ""에 대해 숫자 0과 같다고 해석한다.
- 특히 (null == undefined)의 경우도 true로 본다. null은 null이라는 값이 지정된 상태, undefined는 초기화가 일어나지 않은 상태라는 차이만 있다.
- 한편 일치 연산자의 경우 우선적으로 타입이 모두 다르므로 false라는 결과를 낸다.
5-3. 논리 연산자 이용한 조건문 예시
Q. prompt로 숫자를 입력 받고 해당 값이 홀수이면 "홀수입니다"라고 alert창으로 출력하고, 해당 값이 짝수이면 "짝수입니다"라고 alert창으로 출력한다. (* if문이 아니라 논리 연산자 &&, || 의 특징 활용해서 작성)
❗ 논리 연산자 &&의 경우 앞이 true이더라도 뒤에 오는 값까지 확인해야 하고(true && true → true), 반대로 앞에 오는 값이 false라면 뒤따른 값은 볼 것도 없이 false로 답을 낸다(false && ...→ false). ||는 앞에 오는 값이 false이더라도 뒤에 값 하나라도 true이면 true로 읽을 것이다(false || true → true). 처음 읽은 값이 true면 뒤에 오는 값은 볼 것도 없이 true라는 결과를 보인다(true || ...→ true). 예를 들어 입력된 숫자값이 2라면, 조건식이 true가 되므로 || 연산자는 동작을 않고, && 연산자를 동작한다.
<body>
<script>
let number = prompt("숫자를 입력하세요.");
console.log("number : " + number);
number % 2 == 0 || alert("홀수입니다");
number % 2 == 0 && alert("짝수입니다");
</script>
</body>
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
|---|---|
| [JavaScript] 배열 | for of | forEach | map | Array 객체 메소드 (0) | 2022.02.18 |
| [JavaScript] 함수 선언문 | 함수 표현식 | 콜백 함수 | 화살표 함수 (0) | 2022.02.17 |
| [자바스크립트/수업 과제 practice] 기본 문법 실습 (0) | 2022.02.16 |
| [JavaScript] 클라이언트 | 서버 | 개발자 도구 | 자바스크립트 개요 (0) | 2022.02.16 |
