자바스크립트 기초 2

1. 연산자

1. 산술연산자

사칙연산에 쓰이는 + - * /  와 나머지 % 연산자가 있다.

숫자와 문자열 모두 산술연산자를 사용할 수 있다.

단 한가지 다른 점은 문자열에서 + 연산자를 사용할 때는 더하기가 아니라 문자열끼리 붙여진다는 것이다.

console.log("20" + "22");    // 2022

console.log("20" - "3");    // 17

console.log("20" * "3");    // 60

console.log("20" / "3");    // 6.666666666...

console.log("20" % "3");    // 2

+ 외의 다른 연산자들은 문자열을 숫자처럼 계산한다.

 

2. 증감연산자

++ 와 -- 가 있다.

++ 는 1 씩 증가하고, -- 는 1 씩 감소한다. 변화한 값은 다시 변수에 자동으로 들어간다.

주의할 것은 증감연산자가 숫자의 앞에 붙는지 뒤에 붙는지에 따라서 출력값이 달라진다는 것이다.

let num = 10;

console.log(++num);    // 11 출력값과 변수 num에 든 값이 같다.

console.log(--num);    // 10 출력값과 변수 num에 든 값이 같다.

console.log(num++);    // 10 출력값은 증감연산자 적용 전의 값이다.

console.log(num);    // num을 다시 출력해보면 11이 나온다.

console.log(num--);    // 11 마찬가지로 출력은 11을 하지만 num에는 10이 들어있다.

증감연산자가 변수 뒤에 붙어 있으면 console.log()를 출력한 후, 변수에 증감연산자를 적용한 값이 들어간다.

 

3. 비교연산자

>, <, ===, !== 4가지가 있다. >= 이상, <= 이하 연산자도 쓸 수 있다.

등호는 == 과 === 이 있지만 특별한 이유가 없으면 === 을 쓰는 게 좋다.

== 는 값이 같다는 의미이고, === 은 데이터 타입까지 같다는 의미인데, "10" 과 10 을 비교했을 때 == 은 true를 출력하고, === 은 false를 출력한다.

 

4. 논리연산자

&&(and), ||(or) 가 있다. && 는 두 조건이 모두 참이어야 true, || 은 한 조건만 참이어도 true를 반환한다.

true && true : true

true && false : false

true || true : true

true || false : true

 

---

2. 조건문

if( 비교연산자나 논리연산자 ){
	true이면 실행
} else if (){
	첫번째 조건이 거짓이면 실행
} else if (){
	첫번째, 두번째 조건이 거짓이면 실행.
} else {
	위의 모든 조건이 거짓이면 실행.
}

if , else if, else 를 사용하여 조건을 괄호 안에 넣고, 조건이 여러가지일 경우 else if를 사용한다.

조건은 boolean 타입이어야 해서 주로 비교연산자나 논리연산자를 쓴다.

 

---

3. 반복문

1. for 문

조건에서 변수초기화, 조건, 변수증감 세가지를 모두 주고 조건이 참인 동안 코드를 실행한다.

for (let i = 0; i < 5; i++){
	console.log(i);
}

 

2. while 문

조건이 참일 동안 코드를 실행한다.

while ( num < 10 ){
	console.log(num);
    num++;
}

for 문과 다른 점은 변수를 중괄호 안에서 변화시켜줘야 한다는 것이다. 조건이 계속 참이면 무한 루프를 돌게 된다.

 

3. do while 문

코드를 일단 한 번 실행하고 조건에 따라 반복한다. 

let i = 1;

do {
	console.log(i);
    i++;
} while (i < 10)

 

---

4. 변수선언

① var : 범위가 넓어서 스코프 밖에서도 적용된다.

var <-> let, const : let, const는 스코프 안에서 설정한 변수가 스코프 밖에서는 적용이 안됨.

② let : 한 번 선언한 변수의 값을 변경할 수 있다. 한번 더 선언하면 에러가 난다.

③ const : 한 번 선언한 변수는 딱 한번만 초기화할 수 있다. 한번 선언한 변수의 값을 바꿀 수 없다.

-> 상수를 선언할 때, 변경하면 안되는 변수를 선언할때 사용.

** scope : { } 중괄호, 코드가 활성되는 영역

 

---

5. 알아두면 좋은 개념들

 

① 포인터

변수에 데이터를 저장하면 데이터값과 데이터가 들어있는 메모리의 주소를 변수가 가리키게 된다.

이 때, 깊은복사는 값을 복사하고, 새로운 주소를 가리킨다. 따라서 복사 했을 때 새로운 객체가 된다. 

얕은복사는 메모리 주소만 복사하여 새로운 변수가 기존의 주소를 가리킨다. 따라서 B = A 라고 했을 때, B를 변경하면 A도 변경된다.   

문자열에는 이런 개념이 적용 안되므로 배열과 객체에서만 신경쓰면 되는데 왠만하면 깊은복사를 사용하는게 좋다.

* es6 : 자바스크립트 새로운 버전, 새로운 버전에서 생긴 문법들을 얘기한다.

 

② 화살표함수 ★

const 함수명 = (매개변수) => { 시행할 코드랑 리턴값 }          // 한줄이면 중괄호 필요없음.

const add = (a, b) => { a + b };

함수를 const로 생성하면 함수를 변경하지 않을수있어서 유용하다.

 

③ 익명함수

1회용 함수, 함수명이 없어서 다시 시행할 수 없다.

() =>{ }      

setInterval(() => console.log('hi'), 1000);      // 1초마다 콘솔에 hi 찍기

** clearInterval( ) : setInterval을 멈출수있다.

let A = [1, 21, 31, 4, 5, 61, 71, 8, 9, 10];

A.sort((a,b)=>{ return a-b});         // 배열을 오름차순으로 정렬하기

 

④ 템플릿 리터럴

` ${ 변수 } 문자열 `     // 변수와 문자열 한번에 쓸 때 사용.

` 여러줄
${arr}
입력가능!`              // 여러줄 \n arr \n 입력가능!

"(큰따옴표), '(작은 따옴표) 같은 문자를 출력하고 싶을 때는 깔끔하게 백틱으로 감싸준다.

 

https://kim-solshar.tistory.com/57