Javascript / 기초 / 변수, 자료형, 조건문, 연산자, 문자열

 

변수와 자료형, 함수

 

1. 코드 입력 및 변수 선언

한 줄의 코드를 입력하고 나면, ';(세미콜론') 으로 줄이 끝났음을 표기해주어야 한다.

따로 변수 선언을 해주어 메모리를 할당해야 한다.

 

let 변수명

 

추후에는 var, const 등으로 변수 선언을 하지만, 일단은 모두 let으로 처리하도록 한다.

정확한 차이는 다음 글에서 확인 가능하다.

Javascript / 기초 / Scope

 

---

 

2. 변수의 종류 및 확인 방법

 

변수의 종류는 "문자열(String), 숫자(number), 불린(boolean), undefined, 함수 BigInt, Symbol 등"이 있다.

자세한 내용:  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof

 

변수의 종류는 Python에서 'class'를 쓰듯이, Javascript에서는 'typeof'을 사용하여 확인할 수 있다.

>>>of가 소문자 임에 유의하자.

 

 

typeof(변수명)

let a = 1234;
let b = '1234';
 
console.log(typeof(a));
console.log(typeof(b));
 
VM232:4 number //4번줄의 type은 'number'
VM232:5 string //5번줄의 type은 'string'

type 이름은 quotation mark ( ' ' ) 안에 number, string 등으로 표현된다는 것을 기억하자!

 

 

 

 

* 코드 작성 결과 살펴보기

 

>> Javascript는 Python의 print 함수와 같이, 작성한 코드를 출력해볼 수가 없다.

(아마 독립적으로 작동하는 언어가 아니라, HTML에 종속되는 Script 언어라서 그런 것 같다.)

 

console.log(출력을 원하는 변수 이름)

 

따라서, Chrome 브라우저의 'F12(개발자 도구) > console 탭'에서 console.log를 활용하도록 한다.

코딩을 하는 과정에서 개발자도구를 활용하여 본인이 코딩을 잘하고 있는 것인지 중간중간 검사를 잘하는 것이 매우 중요하다!!

 

---

 

3. 함수

 

함수는 Python에서 'def'를 쓰듯이, Javascript에서는 'function'을 기술하면 된다.

게다가, 변수명을 정의할 때 변수에 함수를 할당할 수도 있다.

 

 

fuction 함수명

let a = 1234;
let b = 11;
 
//입력받은 두 수의 곱을 반환해주는 'multiple' 함수 생성
function multiple(num1, num2){
    let result = 0;
    result = num1 * num2;
    return result;
}
 
//정의된 함수를 변수 c에 지정 (선언식)
let c = multiple(a, b);
 
//변수 c 출력해보기
console.log(c);
13574

---

 

 

조건문, 연산자

 

 

JS에는 elif가 없다! else if로 써주어야 한다.

아래에서 JS의 조건문 작성을 위한 기초 지식을 공부한다.

 

 

if(조건식1){
  조건식1이 성립할 때 실행할 코드
}
else if(조건식2){
  조건식2가 성립할 때 실행할 코드
}
else{
조건식 1, 2 외 다른 조건이 성립할 때 실행할 코드

 

 

1. Boolean

 

참과 거짓을 표현하는 boolean은 각각 false, true로 표시한다. (소문자)

 

 

Boolean : true or false

 

 

+++ Boolean() 함수를 쓰면 해당 객체가 falsy한 값인지, truthy한 값인지 알 수 있다.

 

Boolean(변수명)
: 변수가 true, false 값인지 판단하여 출력해줌

 

Boolean(123) : true
Boolean('123') : true
Boolean(0) : false
 
//.... falsy 값인 false, null, 0, NaN, undefined, ' '(공백)을 넣으면 false가 나옴을 알 수 있다.

 

 

---

 

 

 

 

2. 비교연산자

 

1. 같다 : ===
2. 다르다: !==
3. x가 y에 비해 크다, 크거나 같다:  x > y, x >= y

 

 

'==', '!=' 연산자도 있는데, 타입을 정확하게 나누어 비교해주지 않는다.

따라서 삼중연산자를 쓰도록 한다.

 

'1' == 1  : true, '1' === 1 : false
 
//'=='가 어떤 변수들, 상황에 따라 true 값을 반환하는지는 'Javascript Comparision Table'에서 찾아볼 수 있다.
 

 

 

---

 

 

3. 산술 연산자

 

산술연산자는 +, -, *, /, %, ** 가 있다.

 

 

 

>> / 는 나눗셈을 의미한다.

>> %는 나머지를 의미한다.

ex) 10 % 3   // 결과: 1

  >>> 몫을 구하는 산술연산자는 없고, parseInt라는 method를 활용해야 한다.

          ex) let a = parseInt(10 / 3);   // 결과 : 3

>> **는 지수를 의미한다.

 ex) 2 ** 3  // 결과: 8

  >>> Math.pow(밑, 지수) 라는 method를 활용해도 된다.

 

 

>> Math.floor(숫자)는 숫자를 내림 해준다. Math.ceil(숫자) 는 숫자를 올림 해준다.

>> Math.round(숫자)는 숫자를 1의 자리까지 반올림 해준다.

  >>> 내가 원하는 소수점자리 수까지에 해당하는 10의 지수승을 곱하고, round처리 후 다시 나눠주면 원하는 자리까지 반올림된다.

  ex) Math.round(9.876 * 100) / 100    : 9.88

  >>>숫자.toFixed(value) : value에 해당하는 자리까지 숫자를 반올림 해주는 내장함수

 

 

---

 

4. 논리연산자

 

-논리 연산자는 "and 일때, '&&'", "or 일때 '||'" 를, "not 일때 '!'"를 조건 맨 앞에 두어 사용하여 표기한다.

('|'는 엔터키 위에 있음)

 

1. and(그리고) : &&
2. or(또는) : ||
3. not(부정) : !

 

 

 

>> &&연산자는 모두 true여야 true가 되고, 나머지 경우에는 false가 된다.

 

true && false = false,
 
true || false = true,
 
!true&&false = false && false = false
 
!false&&!false = true && true = true

 

 

 

>> &&연산자는 ||연산자에 대해 우선순위가 높다.

 

a && b || c && d   === (a&&b) || (c&&d)

 

 

 

>> 값을 부정하면, 할당된(존재하는?) 값인지를 기준으로 boolean을 출력한다.

!undefined : 할당되지 않은 값을 부정하므로, true (참스러움, truthy)

!'World' : 할당된 'string'을 부정하므로, false (거짓스러움, falsy)

!!'Hello' : true

 

 

  >>> falsy 값은 6가지로 다음과 같다. 다르게 말해, false로 변환된다.

  false, null, undefined, 0, NaN, ' '

 

 

 

---

 

 

문자열

 

 

아래 기술된 모든 method는 immutable(변환불가) 이므로 원본을 바꾸지는 않고, 새로운 값을 반환하기만 한다.

String은 immutable한 값이다.

 

 

1. 문자열의 특정 위치 문자 출력하기

 

변수이름[원하는위치(index)]
: 문자열 중 특정 위치의 문자 출력해준다.

 

var str = 'Hello World';
str[6] = 'W'
str[0] = 'N'   : error

>> index로 접근 및 출력은 가능하지만, 수정은 불가능하다.

 

 

---

 

2. 문자열 더하기

 

문자열 더하기(이어붙이기)
  1. "'문자열' + '문자열'"
  2. 문자열.concat(문자열2, 문자열3...)

(concatenate; 연결하다)

 

var str1 = 'Hello';
var str2 = 'World';
str1+str2 : 'HelloWorld'
 
 
str.concat(str1, str2)
str : 'HelloWorld'
 
 
var str3 = '1';
var str4 = 5;
str3+str4 : '15'
 
 
str3 + [1,2,3] : '11,2,3'

 

>>>>'문자열'에 '숫자, 배열 등'을 더하면 '문자열'로 출력된다.

 

 

 

---

 

 

3. 문자열 길이 출력하기

 

문자열.length

 

ex1)

var str1 = 'Hello';

str1.length : 5

 

 

---

 

4. 문자열에서 특정 문자 찾기

 

 

str.indexOf(searchValue)
: searchValue의 첫 번째 문자와 일치하는 위치의 index를 반환해준다. 찾고자하는 문자열이 없으면 -1을 반환해준다.

ex) 'seaside'.indexOf('S');  : -1 (대,소문자 구분)

 

 

 

str.lastIndexOf(searchValue)
: 문자열의 뒤에서부터 검색하여 값을 반환한다.

ex) 'seaside'.lastIndexOf('s');   : 3

 

 

 

str.includes(searchValue)
: 문자열이 searchValue를 포함하고 있는지 확인하여 boolean값을 반환한다.

ex) 'seaside'.includes('s'); : true

 

 

---

 

5. 문자열 분리하기

 

 

str.split(seperator)
: seperator를 기준으로 문자열을 분리하고, 배열로 반환해준다.

 

var str = 'Nice to meet you';
str.split(' ');
 
// 결과 :  ['Nice', 'to', 'meet', 'you']

>> '\n'(한 줄 띄우기; Enter와 같은 효과)과 ','(comma)로 값들이 분리되어 있는 CSV 파일을 분리할때 split 메소드가 유용하다.

 

 

---

 

6. 특정 구간에 있는 문자열을 반환하기

 

str.substring(start, end)
: start index부터 end- 1 index 위치까지의 문자열을 반환해준다.

 

>> start와 end가 바뀌어도 상관없다.

>> 음수를 입력하면 0의 index로 취급한다.

>> end 범위 초과 시, 문자열의 끝부분까지만 출력한다.

 

 

var str = 'MannerMakethMan';
 
str.substring(0, 4) : 'Mann'
str.substring(5, 0) : 'Manne'
str.substring(-1, 6) : 'Manner'
str.sbustring(-1, 100) : 'MannerMakethMan'

 

 

---

 

7. 문자열을 대문자 또는 소문자로 변환

 

str.toLowerCase()
: str이라는 문자열을 전부 소문자로 만들어준다.

str.toUpperCase()
: str이라는 문자열을 전부 대문자로 만들어준다.

 

 

ex)

'WONDERLAND'.toLowerCase() : 'wonderland'

 

>>  변환된 문자열을 어떤 변수에 저장해야만 변환된 문자열을 활용할 수 있다.

단순히 문자열로 저장된 변수에 .toLowerCase()나 .toUpperCase() 메소드를 걸어준다고 해서,

변수 자체가 바뀌지는 않는다.

 

 

let a = 'wonderland';
a.toUpperCase();
 
console.log(a)  // a : 'wonderland' (변환되지 않음)
 
 
 
let b = 'message'.toUpperCase();
 
console.log(b)  // b : 'MESSAGE' (변환됨)

 

 

---

 

8. 문자열 안에 변수명 바로 쓰기. (Template literal, backtick)

 

` 작성을 원하는 내용 ${작성을 원하는 변수명} 작성을 원하는 내용 .... `

 

 

let name = 'Charlie';
let age = 50; 일때,
 
return '저의 이름은' + name + '이고, 나이는' + age + '입니다.'

위 return에 해당하는 내용을 더 간편하게 출력하기 위해,

 

 

return ` 저의 이름은 ${name}이고, 나이는 ${age} 입니다.`

라고 쓰면된다.

여기서, template literal에 쓰이는 따옴표는 숫자키 1번 왼쪽에 있는 backtick(`) 키 이다.

(ES6 부터 새롭게 반영된 내용)

 

 

>> template literal을 사용해서 줄 띄우기(\n)를 할려면, '\n'을 쓰는 것이 아니라 그냥 enter를 치면 된다.

 

 

 

return '저의 이름은' +name+ '이고, 나이는' + age + '입니다. \n'

===

return ` 저의 이름은 ${name}이고, 나이는 ${age} 입니다. (Enter키 입력)

`

 

 

---

 

9. 문자열을 숫자로, 숫자를 문자열로 바꾸기

 

Number('문자열')
: 문자열을 숫자로 바꾸어준다.

String(숫자)
: 숫자를 문자열로 바꾸어준다.

 

>> Number() 함수를 쓸 때, 숫자로 구성된 문자열( ex) '123')이 아닌

그냥 문자열( ex)'hello')를 쓰면 NaN(Not a number)가 return 된다.

  >>>

  Number(공백) = 0,   typeof(Number(공백)) = 'number'

  Number(문자열) = NaN,   typeof(Number(문자열)) = 'number' (아닛.. 숫자가 아닌 것(NaN)의 type이 number 라니...)

 

 

 

---

 

10. (기초문제 풀이) 반복문을 이용하여 빈 문자열에 문자 한개씩 추가해주기

 

>> 'result[i]'로 할당하는 것이 아니라, 'result +='를 사용하여 한개씩 더해주어야 한다.

 

 

let result = '';
let str = 'Hello';
 
for(i = 0; i < str.length; i++){
  result += str[i]
}

}

 

 

---

 

 

11. 문자열 안에 있는 '숫자' 출력하기

 

 

위 '9. 문자열을 숫자로, 숫자를 문자열로 출력하기'에서 정리한 것처럼, Number() 함수를 사용한다고 해서, 어떤 문자열 안에 있는 숫자를 구분해낼 수는 없다.

 

방법1) digit = '0123456789' 라는 변수를 만들고, 숫자를 추출하기 위한 문자열의 요소와 digit의 요소를  .includes를 사용하여 비교한다.

 

방법2) 'number' type, 정수일때만 true를 반환하는 Number.isInteger(value) 함수를 사용한다.