JS 기초(2)

JS 기초(1)에 이어서.

연산자

산술 연산자

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %

  alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력

• 거듭제곱 연산자 **

  alert( 2 ** 3 ); // 8  (2 * 2 * 2)

할당 연산자 (Assignment)

값을 반환한다.

let x = 2 * 2 + 1;

alert( x ); // 5

복합할당 연산자(산술 + 할당)

섞어 쓸 수 있다. (+=, *=, /=, -= 다 가능)

let n = 2;
n += 5; // n은 7이 됨(n = n + 5와 동일)
n *= 2; // n은 14가 됨(n = n * 2와 동일)

alert( n ); // 14

증감 연산자(Increment & Decrement)

순차적으로 1을 더하거나 뺄때 사용한다.

i++
i--

i += 1
i -= 1

이때 ++이나 --는 피연산자 뒤에 올 수도, 앞에 올 수도 있다.
앞에 오면 전위형(prefix form), 뒤에 오면 후위형(postfix form)이라고 하며 각각 증감 후의 새로운 값을 반환하거나 증감 전의 기존 값을 반환하는 차이가 있다. (아래 예시의 결과값 참고)

let counter = 1;
let a = ++counter; 

alert(a); // 2

let counter = 1;
let a = counter++; 

alert(a); // 1

더 손쉽게 i += 1 을 사용해도 된다(추천).

비교 연산자(Comparison)

크거나 작고(>, <), 같거나(==) 다름(!=)을 비교할 때 사용한다. 비교한 값은 Boolean 데이터로 반환한다.

• 타입 일치까지 확인하기 위해서는 일치 연산자(===)를 사용해야 한다.

  alert( null == undefined ); // true
  alert( null === undefined ); // false

논리 연산자(Logical)

||(OR), &&(AND), !(NOT), 세 종류의 논리 연산자가 있다.
피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다.

|| (OR)

result = a || b;

• 피연산자 중 하나라도 true라면 true값을 반환하고 그렇지않으면 fasle를 반환한다.
• 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 반환된다.
• truthy를 만나면 평가를 멈추고 그 값을 반환한다. (truthy가 없으면 가장 마지막 falsy 데이터를 반환한다.)

&& (AND)

result = a && b;

alert( true && true );   // true
alert( false && true );  // false

• 두 피연산자가 모두 참일때 true를 반환하고 그렇지않으면 (첫번째로 만나는) false를 반환한다.
• falsy를 만나면 평가를 멈추고 그 값을 반환한다.(falsy가 없으면 가장 마지막 truthy 데이터를 반환한다.)

❗주의

AND 연산자(&&)의 우선순위는 OR 연산자(||)보다 높다.
a && b || c && d는 (a && b) || (c && d)와 똑같이 동작한다.

! (NOT)

참이나 거짓의 반대값을 Boolean 데이터로 반환한다.

console.log(!true) // false
console.log(!false) // true

console.log(!0) // true
console.log(!!0) // false

Nullish 병합 연산자 '??'

OR 연산자를 사용할때, 0이나 ''(빈 문자)값을 사용하는 경우 예상치못한 결과가 발생할 수 있다. 이때 연산자??를 사용하면 Nullish(null과 undefined)를 만났을 때만 다음으로 넘어간다.
(값이 '확정'되어있는 변수를 찾거나, 변수에 기본값을 할당하는 용도로 사용할 수 있다.)

x = a ?? b
// 위 아래 두 코드는 같은 의미임
x = (a !== null && !== undefined) ? a : b;

• ??의 연산자 우선순위는 꽤 낮아서, 복잡한 표현식 안에서 사용할 때는 ()괄호를 활용하는 것이 좋다.
• 안정성 관련 이슈로 ??는 &&나 ||함께 사용하면 문법 에러(SyntaxError : Unexpected token)가 발생한다. 이를 피하려면 ()괄호를 사용해줘야 한다.

전개 연산자(Spread Operator)

객체나 배열의 아이템item이나 속성property을 전개(확장) 할 수 있다. *얕은 복사가 필요할 때 사용한다.

• 객체나 배열 데이터의 리터럴 기호를 날려버리는 역할을 한다.

// 배열에 적용
const a = [1, 2, 3]
const b = [4, 5, 6]
const c = [...a, ...b]
console.log(c) // [1, 2, 3, 4, 5, 6]
// const d = a.concat(b) 도 같은 동작을 함

// 객체에 적용
const a = { x: 1, y: 2 }
const b = { y: 3, z: 4 }
const c = { ...a, ...b }
console.log(c) // { x: 1, y: 3, z: 4 }
// const d = Object.assign({}, a, b) 도 같은 동작을 함

// 인수에 적용
const a = [1, 2, 3]
function fn(x, y, z) {
  console.log(x, y, z) // 1, 2, 3
}
fn(...a)
console.log(x, y, z) // Uncaught ReferenceError: x is not defined

// 나머지 매개변수에 적용(rest키워드 사용)
const a = [1, 2, 3, 4, 5, 6]
function fn(x, y, ...rest) {
  console.log(x, y, rest)// 1 2 [3, 4, 5, 6]
}
fn(...a)

---

구조 분해 할당(Destructuring assignment)

객체나 배열을 변수로 분해할 수 있게 해준다.
(함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 유용하다.)

// 배열의 경우
let arr = ["Hyunsoo", "Bae"]
let [firstName, surname] = arr;
// let [firstName, surname] = "Bora Lee".split(' ') 와 같은 동작을 한다.

console.log(firstName); // Hyunsoo
console.log(surname);  // Bae

// 객체의 경우
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options; // 이때 순서는 상관없다. 
// 고유한 속성의 이름으로 할당해서 꺼내 쓰는 것이기 때문에 
// 속성 이름 그대로 변수로 만들어 사용할 수 있다.

console.log(title);  // Menu
console.log(width);  // 100
console.log(height); // 200

• 필요하지 않은 값은 ,(쉼표)를 사용하여 배열 요소를 버릴 수도 있다.

// 세 번째 요소는 필요하지 않음
let [firstName, , title] = ["Hyunsoo", "Bae", "Info", "republic of korea"]; // Hyunsoo, undefined, Info

console.log( title ); // Info

• 변수 값을 교환할 수도 있다.

let a = 1
let b = 2
;[b, a] = [a, b]

console.log(a, b) // 2 1

• 나머지 할당을 할때는 ...rest키워드를 쓴다. (할당할 값이 없을 때는 undefined로 취급된다.)

// 배열의 경우
const arr = [1, 2, 3]
const [a, ...rest] = arr

console.log(a, rest) // 1 [2, 3]

//객체의 경우
let options = {
  title: "Menu",
  height: 200,
  width: 100
};

let {title, ...rest} = options;

alert(rest.height);  // 200
alert(rest.width);   // 100

• 두 변수에 저장된 값을 교환할 때도 사용할 수 있다.

let guest = "You";
let admin = "Me";

[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Me You

• 객체를 '구조 분해 할당'하는 경우 ()괄호를 활용해줘야 할 때가 있다. (자바스크립트에서는 표현식 안에 있지 않은 {}중괄호를 코드블록으로 인식하기때문)

const obj = { a: 1, b: 2, c: 3 }
let a, b, c
({ a, b, c } = obj) // 소괄호 사용

console.log(a, b, c) // 1 2 3

• 변수명을 바로 변경해줄 수도 있다.

const obj = { a: 1, b: 2, c: 3 }
const { a: x, b: y, c: z } = obj

console.log(x, y, z) // 1 2 3

• 할당 연산자를 이용해서 할당할 값이 없을 때 기본으로 할당해 줄 값인 '기본값(default value)'을 설정해줄 수 있다.

// "기본값"
let [name = "Guest", surname = "Anonymous"] = ["Hyunsoo"];

console.log(name);    // Hyunsoo 
console.log(surname); // Anonymous 

---

선택적 체이닝(Optional Chaining)

점 표기법에 ?를 추가해 ?.로 사용하면 객체 속성이 없는 경우도 에러 없이 접근이 가능해진다. (에러 대신 undefined를 반환한다.)

let user = null

console.log(user) // null
console.log(user?.name) // undefined

//-----
            
const userA = {
  a: 'Hyun',
  b: 27,
  c: {
    cd: 'Bucheon',
    ce: 'Korea'
  }
}
const userB = {
  a: 'Soo',
  b: 23
}

function getCd(user) {
  return user.c?.cd || 'cd 없음.'
}

console.log(getCd(userA)) // 'Bucheon'
console.log(getCd(userB)) // 'cd 없음.'

---

구문(Statements)

if문

• if, else 키워드를 사용해 구문을 작성한다. 분기처리 한다고도 함.

//괄호 안이 'truthy' 일때
if (1) {
  ... // 실행 됨
}
  
// 괄호 안이 'falsy' 일때
if (0) {
  ... // 실행되지 않음
}

else

• if 문에 붙일 수 있다. else 뒤에 이어지는 부분은 ()괄호안이 falsy일 때 실행된다.

if (0) {
  ... // 실행 되지 않음
} else {
  ... // 실행 됨
}

else if

• 조건을 여러번 처리할 수 있다.

if (0) {
  ... // 실행 되지 않음
} else if (-0) {
  ... // 실행 되지 않음
} else {
  ... // 실행 됨
}

조건부 연산자 ? (삼항 연산자) 로 축약해서 사용하기

if (1 > 2) {
  console.log('truthy')
} else {
  console.log('falsy')
} // falsy가 출력 됨
  
console.log( 1 > 2 ? 'truthy' : 'falsy' ) // falsy가 출력 됨

활용 예)

let result = condition? value1 : value2;
let a = 1 > 2 ? true : false;

let resule = condition // condition 자체가 true나 false를 반환하므로 이렇게 더 축약해서 사용 가능!
let a = 1 > 2;

*if ~ else if ~ else처럼 물음표를 여러번 사용해서 조건을 처리하는 것도 가능하다.

let result = condition1 ? value1 :
	condition2 ? value2 :
	condition3

---

while문

동일한 코드를 반복 실행 해야할 때 사용.

while 반복문

• 조건이 truthy면 {}블럭의 코드가 실행된다.

while (condition) {
  // 반복 실행할 코드
}

do...while 반복문

• 조건이 truthy면 {}블럭의 코드가 실행되는 것은 같으나, 조건(condition)의 위치가 실행 코드 블럭 아래로 내려간다.

do {
  // 반복 실행할 코드
} while (condition);

• 때문에 조건(condition)이 truthy든 falsy든 상관없이 최소 한번은 '반복 실행할 (예정이었던) 코드 내용'이 실행된다.

---

for문

• 가장 많이 쓰이는 반복문 중 하나.

for(초기화; 조건; 증감) {
	// 실행할 코드
}

• 초기화; 부분이 한 번 실행되고, 조건을 체크하면서 증감 부분(과 실행할 코드 부분)이 계속 반복된다.

예시)

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력 됨
  console.log(i);
}

*이미 블록 위에서 i 변수를 선언한 뒤라서 초기화; 부분에서 같은 내용을 써줄 뿐이라면, 생략도 가능하다.

for in

• 객체를 다루는데 적합하다.

let obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (let prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}

for of

• 배열, 문자를 다루는데 적합하다.

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value); // 10, 20, 30
}

---

반복문 빠져나오기

break로 반복문을 완전히 종료하거나, continue로 실행중인 이터레이션을 멈추고 다음 이터레이션을 강제 실행하도록 할 수 있다.
*이터레이션(iteration) : 반복문 본문(실행할 코드)이 한 번 실행되는 것

• break의 사용

for (let i = 0; i < 10; i++) {
  if (i == 3) { // i 가 3 와 같을 경우
    break; // for 문 종료
  }
  console.log(i); // 0,1,2,
}

• continue의 사용

for (let i = 0; i < 10; i++) {
  if (i % 2 == 0) { // i 를 2로 나눴을때 0이 되는 경우(= 짝수 인 경우)
    continue; // 짝수 인 경우 실행하지 않고 다음 이터레이션(순회)으로 넘어감
  }
  console.log(i); // 1, 3, 5, 7, 9
}

❗주의

? 오른쪽엔 break나 continue가 올 수 없다.

• 에러 발생 :

(i > 5) ? alert(i) : continue; // Uncaught SyntaxError: Unexpected token 'continue'

?를 if 대용으로 쓰지 말것!

---

Switch문

복수의 조건문을 가독성있게 사용할 수 있다.

• 더 직관적이고 간단한 관리가 필요한 부분에 (if 대신) 사용할 수 있다.
• switch는 if문으로 대체 할 수 있지만 if문은 switch문으로 반드시 대체될 수 있는 것은 아니다.

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
} // switch문이 끝나거나 도중에 break를 만나면 코드 실행을 종료한다
  // x와 일치하는 case문이 없다면 default문의 코드가 실행된다(default문이 있는 경우)

*중간에 break를 넣어주지 않으면 해당되는 모든 코드가 실행되므로 주의할 것

참조

https://jsdev.kr/t/for-in-vs-for-of/2938
https://ko.javascript.info/comparison
https://ko.javascript.info/destructuring-assignment