[항해99] W2 Javascript 기초문법 (2)

1. 논리 연산자

&& (AND 연산자)

• condition1 && condition2 의 형태로 표현
  (condition1,2에는 모든 자료형의 값이 가능하며 불리언 연산이 적용된다.)
• 연산자 양값이 모두 Truthy 해야 AND 연산자의 결과값도 Truthy한 것으로 판단
  - Truthy && Truthy // Truthy
  • Truthy && Falsy // Falsy
  • 순서와 무관하게 조건에 Falsy가 있다면 Falsy한 결과값이 나온다.
• 조건은 여러개를 사용할 수 있으며, 조건을 여러개 사용하는 것을 Chaining 이라고 부른다.
  (조건문에서 Else if 를 여러번 사용한 Chaining 개념과 동일)

if (variable1 && variable2) { ... }

|| (OR 연산자)

• condition1 || condition2 의 형태로 표현
  (condition1, 2에는 모든 자료형의 값이 가능하며, 불리언 연산이 적용된다.)
• 연산자 양값 중 하나라도 Truty한 경우 OR 연산자의 결과물도 Truthy한 것으로 판단
  - Truthy || Truthy // Truthy
  • Truthy || Falsy // Truthy
  • Falsy || Falsy // Falsy
• AND 연산자와 마찬가지로 Chaining 가능

if (variable1 || variable2) { ... }

! (NOT 연산자)

• !value 의 형태로 표현, 모든 자료형 가능
• NOT 연산자의 결과물은 항상 불리언 연산이 적용된 Boolean 자료형 값
• !'StringValue!!', !true, !123 과 같이 불리언 연산에서 Truthy 값이 ! 뒤에 오는 경우 False 를 반환
• !0, !'', !null, !Nan, !undefined 등 불리언 연산에서 Falsy 값이 ! 뒤에 오면 True 를 반환한다.

2. 반복문

• 특정 구문을 반복할때 반복문을 사용하며, for 문 / while 문이 있다.

1) for 문

• 모든 for 문은 조건문 위치에 있는 값이 Truthy 한 경우 반복된다.
• 조건이 만족하지 않는 경우, 반복문은 실행되지 않는다.

for (초기화구문; 조건문; 증감문)
// 명령문

for (초기화구문; 조건문; 증감문) {
// 명령문
}

초기화구문 : for 구문 안에서만 사용될 변수 선언 가능

조건문 : 조건문 값이 Falsy한 경우 명령문 반복 중단

증감문 : 구문이 끝나는 경우 증감문에 선언된 구문이 실행됨

2) for 문 제어방법 (break, continue)

• 반복문을 중단하거나 무시하기 위해 조건문에서 false가 평가되게 하는 것 외에도 다른 방법이 존재한다.

break 문 : 조건에 상관없이 반복문을 중단하기 위한 키워드

for (let i = 0; i < 5; i++) {
  if (i === 2) break;

  console.log(i);
}

// Print: 0
// 1

continue 문 : 조건에 상관없이 명령문을 중단하고 바로 증감문을 실행하는 키워드

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

// Print: 0
// 1
// 3
// 4

3) for ... of 문

• Array, Map과 같은 반복 가능한(iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 한다.
  * Object는 반복 불가한 객체
• 조금 더 쉽게 배열을 하나씩 반복해주는 문법으로 이해할 수 있음
• 인터페이스

  	```

  for (변수선언문 of 반복가능한 객체) {
  //명령문
  } //example const persons = {'수영', '티파니', '윤아'};
  for (const person of persons) {
  console.log(person);
  } // Print: '수영'
  // '티파니'
  // '윤아'

4) for ... in 문

• for ... of 문과 유사하게 객체의 요소를 반복하지만, 선언한 변수에 값이 들어가지 않고 요소의 Key를 전달한다.
• for ... of 와 마찬가지로 반복 가능한(iterable) 객체는 모두 사용 가능
• 인터페이스

  	```

  for (변수선언문 in 반복가능한객체) {
  // 명령문
  } // example const persons = {'수영', '티파니', '윤아'}; for (const person in persons) {
  console.log(person);
  } // Print: 0
  // 1
  // 2 // example 2 const persons = {'수영', '티파니', '윤아'}; for (const index in persons) {
  const person = persons[index];
  console.log(person);
  } // Print: '수영'
  // '티파니'
  // '윤아'

3. 함수

• 반복되는 코드를 하나로 묶거나, 의미/역할 부여를 위해 사용
• 인터페이스

  	```

  function 함수이름(인자1, 인자2, 인자3) {
  //명령문
  } 함수이름(인수1, 인수2, 인수3); // 명령문 내용을 실행

• 인자(Parameter || 매개변수)란 함수를 호출할 때 전달 받기 위해 지정한 변수이며, 몇개든 콤마를 통해 입력 받을 수 있다.
• 인수(Argument)란 인자에 전달하는 값 그 자체를 일컫는다.

4. 화살표 함수(Arrow function)

• ES6에서 새롭게 추가된 문법
• 기존 문법보다 간결한 문법으로 이루어져 있음

//일반 익명 함수 문법
const sum = function(a,b) {
	return a + b;
};

//화살표 함수 이용
const sum = (a, b) => {
	return a + b;
};

//화살표 함수 표현식2 : return 생략
const sum = (a, b) => a + b;

//화살표 함수 표현식3 : 인자 괄호 생략
const hello = a => {
	return a;
};
hello('hi'); // hi

• 인자 괄호는 하나의 인자를 입력받는 경우에 생략 가능

5. 익명 함수

• 익명 함수는 함수의 이름이 존재하지 않고, 변수에 함수를 담아 사용하는 함수
• 변수에 값을 저장하는 것처럼 변수에 함수를 저장해서 사용

//일반 함수
function foo() {
	console.log('bar');
}

//익명 함수
let foo = function () {
	console.log('bar');

• 익명 함수는 재사용 되지 않는 일회성 함수에 주로 사용한다. 일회성인 함수를 별도로 메모리에 저장함으로써 불필요한 메모리를 차지하지 않도록 메모리 낭비를 방지하기 위한 사용 방법이다.
• 다만, 익명 함수는 Hoisting이 적용되지 않는다.
  일반적으로 작성된 함수의 경우 함수 선언보다 호출이 위에 있더라도 호출하는 위치에 상관없이 사용될 수 있지만, 익명함수의 경우 Hoisting이 적용되지 않아 에러가 발생함

6. 구조 분해 할당

• 구조 분해 할당 문법은 배열 혹은 객체에서 각각 값이나 프로퍼티를 분해하여 개별 변수에 담을 수 있도록 한다.
• 배열에서의 구조 분해 할당
  [100, 200] 을 a와 b에 할당하기

const [a, b] = [100, 200];
console.log(a); //100
console.log(b); //200

• 객체에서의 구조 분해 할당

• 배열에서의 구조 분해 할당은 '배열의 값'을 대상으로 할당하였으나,
  객체에서는 프로포티(property)를 대상으로 할당한다.

const student = {
name: 'sparta',
age: 18,
onlinClass: 'react',
};
const { name, age, onlineClass } = student
console.log(name); // 'sparta'
console.log(age); // 18
console.log(onlineClass); // 'react'