23일차 - Javascript 문법 복습(0)

javascript 기초문법

1. 변수 선언, 대입 연산자연산자

• 변수 선언 키워드 : var let const
  • var는 존재한다는 것만 이해 하고 사용 ㄴㄴ
  • let 키워드는 한번 선언한 변수를 여러번 변경 가능
  • const 키워드는 한번 선언한 변수의 값을 변경 불가능 !
• 대입 연산자 키워드 : =

2. 비교 연산자

• === : 양쪽에 위치한 값이 같은 경우 true로 평가, 다른 경우 false로 평가

• !== : 양쪽에 위치한 값이 다른 경우 true, 같은 경우 false ( ! 느낌표가 부정하는 Not의 의미)

• > , <

  • > 는 좌측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false로 평가

  • < 는 우측에 위치한 값이 더 클 때에만 true로 평가되며, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false로 평가

• >= , <=

  • >= 는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true로 평가되며, 우측에 위치한 값이 더 큰 경우 false로 평가
  • <= 는 우측에 위치한 값이 더 크거나 좌측에 위치한 값과 같을 때에만 true로 평가되며, 좌측에 위치한 값이 더 큰 경우 false로 평가

• ==는 === 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장

• !=는 !== 와 같은 기능을 하는 연산자이나, 사용하지 않는것을 권장합니다.

  • 자동 형변환이 적용되는 경우, 예시로 '10' == 10의 결과가 true 로 평가된다.
    숫자 자료형을 가진 값에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다고 여겨
    '10' === '10' 처럼 동작한다고 이해하면 됩니다.

3. 자료형

• Boolean (불리언)
  • true 또는 false 값으로만 표현 가능
• String (문자열)
  • '값' 또는 "값" 와 같이 외따옴표, 쌍따옴표나 외따옴표를 쌍으로 값을 묶어 표현.
• Number (숫자)
  • 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현.
  • 10 !== '10' 두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없다.
• undefined
  • 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가진다.
• null
  • 어떤 값이 비어있음을 의도적으로 표현할 때 사용
• Object (객체)
  • { key1: value, key2: value } 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있다.
  • 다른 언어에서는 이와 같은 자료형을 Dictionary(딕셔너리)로 부르기도 하지만 JS에서의 공식 명칭은 Object
  • key를 기준으로 객체에 있는 value(값)에 접근 가능
  • obj.key
  • obj['key']

const person = {
	name: '강승현',
	age: 52
};

person.name;
// Print: '강승현'

person['name'];
// Print: '강승현'

person.hobby;
// Print: undefined

• 만약 객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등 일반적인 변수명을 선언할 때 허용되지 않는 문자열을 사용할 경우 반드시 obj['key'] 와 같은 표현식을 사용해야 함!

const person = {
	name: '강승현',
	age: 52,
	'raising dog': '푸들',
}

• person.'raising dog'는 참조가 불가능하지만, person['raising dog']로 하는 경우 참조가 가능

ES6에서 새롭게 도입한 문법이며 객체(Object) 나 배열(List)을 변수로 ‘분해'할 수 있다

• 객체를 분해할 때에는 반드시 변수명과 객체의 프로퍼티 이름이 일치

const obj = { name: "이용우", age: 28, tech: "Node.js" };

const { name, age, tech, hair } = obj;
console.log(name); // 이용우
console.log(age); // 28
console.log(tech); // Node.js
console.log(hair); // undefined: obj에는 "hair" 프로퍼티가 존재하지 않습니다.

• Array (배열)
  • [value, value2, value3] 의 형태로 표현하며, value에는 모든 자료형의 값을 담을 수 있다.
  • 다른 언어에서는 이와 같은 자료형을 List(리스트)로 부르기도 하지만 JS에서의 공식 명칭은 Array이다.
  • 배열에는 Index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자

const names = ['강승현', '홍길동', '김아무개'];
// Index의 최소 값은 0입니다.
names[0];
// Print: '강승현'

names[2];
// Print: '김아무개'

names[3];
// Print: undefined

ES6에서 새롭게 도입한 문법이며 객체(Object) 나 배열(List)을 변수로 ‘분해'할 수 있다.

• 배열을 분해할 때에는 변수 이름을 마음대로 선언할 수 있고, 배열의 순서대로 할당된다.
  배열 구조 분해 할당으로 선언한 변수를 제외한 나머지 배열의 요소는 할당되지 않음

const arr = ["Node.js", "React", "Spring"];

const [backEnd, frontEnd] = arr;
console.log(backEnd); // Node.js
console.log(frontEnd); // React

• NaN
  • Not a Number의 줄임말, 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
// isNaN()은 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN이 될 경우 true를 반환
isNaN(Number.NaN);  // true
// Number.isNaN()은 현재 값이 NaN이어야만 true를 반환

• Function (함수)
  • 함수는 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용
• 아래와 같은 형태로 표현

function Hamburger() {
	return '함수가 반환할 값';
}

Hamburger(); // 위처럼 정의된 함수는 이렇게 사용가능!
// Print: '함수가 반환할 값'

• 또는 아래와 같은 형태로 변수 할당 가능

const vegetable = function() {
	return '함수가 반환할 값';
}

vegetable(); 

• Argument(인수 또는 인자)를 입력 받을 수 있음!

function getMyName(myName) {
	return myName;
}

getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용
// Print: '인자를 넣습니다.'

4. 불리언 연산

• Truthy 한 값은 true로 평가되며, Falsy 한 값은 false로 평가되는 연산 방식
• Falsy 값에는 빈 문자열 '', 숫자 0, 불리언 false, null, undefined, NaN가 해당된다.
• Falsy 값이 아닌 모든 값은 Truthy 값으로 연산되며 결국 true로 평가된다고 이해
• 항상 Truthy 로 판단되는 자료형이 있음!! (중요!!)
  • Array
  • Object
• 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수를 사용할 수 있다.
  • Boolean('String') → true
  • Boolean('') → false
  • Boolean(undefined) → false

5. 조건문 ⭐⭐⭐

• 조건문은 조건이 충족할때만 특정 구문을 실행하기를 원할 때 사용한다.
• 논리적인 로직을 표현할 때 가장 중심이 되는 구문으로, 조건에 들어가는 값은 항상 불리언 연산이 적용

if...else 문

if (condition1) // 명령문1
else // 명령문2

if...else + Block

if (condition1) {
  // 명령문1
} else {
  // 명령문2
}

• 조건에 대해 여러 명령문을 묶어서 실행하기 위해서는 반드시 block으로 묶어야 한다.
  (block은 항상 사용해도 문제 X)

if...else 문 Chaining(체이닝)

if (condition1) {
  // 명령문1
} else if (condition2) {
  // 명령문2
} else if (condition3) {
  // 명령문3
} else {
  // 명령문4
}

• 위 내용에 모두 block 를 사용하면 아래 예시와 같다.

if (condition1) {
  // 명령문1
} else {
  if (condition2) {
	  // 명령문2
	} else {
		if (condition3) {
		  // 명령문3
		} else {
		  // 명령문4
		}
	}
}

6. 논리 연산자

&& (AND 연산자)

• condition1 && condition2 의 형태로 표현하며, condition1~2는 모든 자료형의 값을 넣을 수 있으며, 불리언 연산이 적용된다.
• 여기서 condition1 과 condition2 자리는 모두 truthy 해야 AND 연산자의 결과물도 모두 truthy한 것으로 볼 수 있음!!
  • Truthy && Truthy → 결과: Truthy
  • Truthy && Falsy → 결과: Falsy
    양 조건 중 하나라도 Falsy가 있다면 항상 Falsy한 결과값이 나옴 !

// 예시 1)
const condition1 = "안녕하세요"
const condition2 = true
let result = null;

if (condition1 && condition2)
	result = 'Value';

// 예시 2)
const condition1 = "안녕하세요"
const condition2 = true

const result = condition1 && condition2 && 'Value';

result
// Print: 'Value'
// AND 연산자(&&)를 사용할 때 모든 값이 Truthy할 경우 맨 뒤에 있는 값이 result 변수에 할당되는 것을 확인

|| (OR 연산자)

• condition1 || condition2 의 형태로 표현하며, condition1~2는 모든 자료형의 값을 넣을 수 있으며, 불리언 연산이 적용됩니다.
• OR 연산자는 양쪽에 있는 값 중 하나라도 Truthy 하면 OR 연산자의 결과물도 Truthy 하게 나온다.
  • Falsy || Truthy → 결과: Truthy
  • Falsy || Falsy → 결과: Falsy

let name;

if (condition1)
	name = condition1;
else if (condition2)
	name = condition2;
else if (condition3)
	name = condition3;
else
	name = '강승현';

const condition1 = false
const condition2 = null
const condition3 = "이용우"

const name = condition1 || condition2 || condition3 || '강승현';

name
// Print: '이용우'
// OR 연산자(||)를 사용할 때, 가장 먼저 오는 Truthy한 값이 name변수에 할당되는 것을 확인

7. 반복문 ⭐⭐⭐

• 모든 반복문은 기본적으로 특정 구문을 반복할때 사용함 !

for 문

• 모든 for문은 조건문 위치에 있는 값이 Truthy 한 경우 계속 반복된다.
  기본적인 for 문

for (초기화구문; 조건문; 증감문) {
	// 명령문
}
// 초기화구문 : for 구문 안에서만 사용될 변수를 선언할 수 있다.
// 조건문 : 조건문에 있는 값이 Falsy한 경우 명령문의 반복을 중단
// 증감문 : 구문이 끝나는 경우 증감문에 선언된 구문이 실행

for (let i = 0; i < 3; i = i + 1)
	console.log(i);

// Print: 0
// 1
// 2
// 괄호로 묶인 부분은 조건문의 결과가 Falsy할 때 까지 무한 반복함 ㄷㄷ

1. 초기화 구문 실행

• let i = 0; 구문에 의해 i라는 변수가 선언되며, 이 변수는 for 문 바깥에서 사용할 수 없다.

2. 조건문 검사

• i는 0이므로 i < 3 코드를 0 < 3으로 볼 수 있으며, 0보다 3이 크므로 이 조건은 true로 평가됩니다.

3. 명령문 실행

• 조건문이 true로 평가됐으므로 명령문을 실행해 console.log(i); 명령어에 의해 i의 현재 값인 0이 출력됩니다.

4. 증감문 실행

• i = i + 1코드가 실행되며 i 변수의 값은 1이 됩니다. i = 0 + 1와 같습니다.

5. 조건문 실행

• 1 < 3 은 true 이므로 다음 명령문 실행

6. 명령문 실행

• 현재 i의 값인 1 출력

7. 증감문 실행

• i = i + 1 → i = 1 + 1

8. 조건문 실행

• 2 < 3 은 true이므로 다음 명령문 실행

9. 명령문 실행

• 현재 i의 값인2출력

10. 증감문 실행

• i = i + 1 → i = 2 + 1

11. 조건문 실행

• 3 < 3 은 false이므로 다음 명령문 실행 안함

12. 반복문 탈출 !!🚗 🚗

• 조건문이 false이므로 더 이상 반복하지 않습니다.

다른 반복문 제어 방법 (break , continue)

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

for...of 문

• for of 문은 Array, Map과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 해준다.(object는 제외)

for (변수선언문 of 반복가능한객체) {
  // 명령문
}

const persons = ['강승현', '홍길동', '김아무개'];

for (const person of persons) {
  console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'

for...in 문

• for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달 문자열인데 0, 1, 2 이렇게 출력
• for...of 문처럼 반복 가능한(Iterable) 객체는 모두 사용가능!!

for (변수선언문 in 반복가능한객체) {
	// 명령문
}

const persons = ['강승현', '홍길동', '김아무개'];

for (const person in persons) {
	console.log(person);
}

// Print: 0
// 1
// 2

const persons = ['강승현', '홍길동', '김아무개'];

for (const index in persons) {
  const person = persons[index]; // index 사용
	console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'