7월 2주차 정리

변수

호이스팅

호이스팅이란?

• 변수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 것처럼 보이는 현상
• 호이스팅에서 var, let, const의 차이점
  • var는 호이스팅이 되지만 let, const는 TDZ로 인해 되지 않는 것처럼 보임
  • TDZ: Temporal Dead Zone(임시 접근 불가 구역)의 약자이며 let과 const는 TDZ에 배치되어 호이스팅이 발생하지 않는 것처럼 보임

객체

객체란?

• 여러 개의 데이터를 한 변수에 저장할 수 있는 자료형
• 여러개의 키와 값의 쌍으로 이루어짐
• 이 쌍을 프로퍼티라고 함

객체 생성방법

• 생성예시

const user = {
	name: "성훈",
	age: 21,
	from: "Dongtan",
};

• 객체에서 메서드 생성예시

const user = {
	textHim : function () {
		console.log("I like cookie")
	},
};

// 혹은
const user = {
	textHim() {
		console.log("I like cookie")
	},
};

객체 접근방법

• 객체['키']
• 객체.키

객체 속성 추가/제거 방법

• 추가방법
  • 객체['키'] = '값';
  • 객체['키'] = ['값2','값2'];
  • 객체.키 = '값';
• 삭제방법
  • delete 객체.키;

연산

산술 연산

• 더하기 연산을 제외한 나머지 산술연산은 숫자형이 아닌 경우 자동으로 타입을 변환하여 연산을 수행

산술 할당 연산

• 산술연산과 동시에 변수에 값을 할당하는 연산자

증감 연산자

let x = 1;
console.log(x++); // 1, x = 2
console.log(++x); // 3

let y = 10;
console.log(y--); // 10, y = 9
console.log(--y); // 8

비교 연산

• 결과값은 항상 true 또는 false가 됩니다.

대소관계 연산자

let x = 10;
let y = 30;

console.log(x > y); // false
console.log(x < y); // true

console.log(x >= y); // false
console.log(x <= y); // true

동등 / 부등

• 값을 비교
• 타입이 다른경우: 타입 변환을 수행한 후 비교. 원시타입은 값이 같을 때, 객체 타입은 동일한 객체를 참조할 때만 true를 반환

자동 형 변환

• 연산과 비교를 위하여 JS 엔진이 데이터 형을 자동으로 변환하는 것
  • 원시값끼리 비교할 때는 숫자로 변환
  • null과 undefined는 각자와 서로끼리 비교할 경우에는 true를 반환
  • 객체와 원시타입 비교할때는 객체를 원시타입에 맞춰 변환
• NaN의 경우: false로 변환

일치 / 불일치

• 값과 타입이 일치하는지 비교
• 타입변환을 하지 않고 엄격한 비교를 수행

논리연산

논리곱 AND(&&) / 논리합 OR(||) 의 비교

• 논리곱 연산자: 두 개의 피연산자가 모두 true일 때만 true를 반환. 모든 값이 true라면 가장 마지막 값을, false 값이 있다면 가장 처음 만나는 false값을 반환하며 나머지 평가를 생략(단축 평가)
• 논리합 연산자: 두 개의 피연산자 중 적어도 한 개 이상이 true면 true를 반환. 즉 모두 false일 때만 false를 반환. 모든 피연산자가 false라면 마지막 값을, true값이 있으면 가장 처음 만나는 true값을 반환(단축 평가)

논리부정 NOT(!)

• true ⇒ false
• false ⇒ true

nullish 연산자(??)

• 왼쪽 피 연산자를 먼저 만나서 null도 아니고 undefined도 아니면 왼쪽, null이거나 undefined라면 오른쪽을 반환함. 즉, undefined나 null이 아닌 값을 반환
• OR연산자와의 차이: OR 연산자는 첫 번째 true 값을 반환하고, nullish 연산자는 첫 번째로 값이 할당된 피연산자를 반환

옵셔널 체이닝(?.)

• 객체의 속성값에 접근할 때 속성이 존재하지 않아도 오류가 발생하지 않게 해줌
• 객체의 속성값에 접근할 때 프로퍼티가 존재하지 않으면 undefined로 반환되며 오류를 발생함.
• 단축 평가를 이용해 오류가 나지 않고 undefined를 출력함.
• 그러한 단축 평가를 간결하게 표현하는 것이 옵셔널체이닝(?.)
• ex. console.log(user?.address?.city)

형변환

문자로 변환 예시

// String 함수
String(2);
String(true)

// .toString() 메서드 사용
(2).toString();
(10).toString(8); // 숫자형 변환 시 진법을 지정하여 변환 가능
null.toString(); // TypeError = undefined

// 문자열 연결 연산자 +
// 빈 문자열과 더하기 연산을 수행하면 자동 타입 변환이 발생
3 + ''; // '3'
NaN + '';

숫자로 변환 예시

// Number 함수
Number('1');
Number('hello');

// 더하기 연산자 사용
+'1';
+'hello';

// 곱하기 연산자 사용
'1' * 1;
'hello' * 1;

불리언으로 변환 예시

// Boolean 생성자 함수 사용
Boolean('x');

// 부정 논리 연산을 2번 사용(부정의 부정은 원상태)
!!'false';
!!20;

조건문

if문

if () {
    // 실행코드
}

else문

if () {
    // 실행코드
} else () {
 	// 조건이 거짓일 때 실행코드 
}

else if문

if () {
    // 실행코드
} else if () {
 	// 조건이 여러 개일 때 실행 코드
} else if () {
 	// 조건이 여러 개일 때 실행 코드
} else if () {
 	// 조건이 여러 개일 때 실행 코드
} else if () {
 	// 조건이 여러 개일 때 실행 코드
} else () {
 	// 어떠한 조건도 거짓일 때 실행 코드
}

삼항연산자

• 간단한 if-else문을 한 줄로 표현 가능한 연산자

조건식 ? (조건이 참일 때 실행되는 코드) : (조건이 거짓일 때 실행되는 코드)

• 너무 많이 중첩하면 가독성이 떨어질 수 있으므로 주의

switch문

switch (표현식) {
	case 값1:
		// 실행코드
	case 값2:
		// 실행코드
	...
	default:
		// 모든 case에 해당하지 않을 때 실행되는 코드
}

fall through현상

• case 문의 끝에 break 문이 생략된 경우 값이 일치하는 case문 이후의 모든 case문이 실행되는 현상

반복문

• 언제사용할까?: 동일한 작업을 여러번 반복해야 할 때

for

• for문의 구조:

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

• for문으로 2차원 배열을 만들 수 있을까?: 이중 for문을 사용해서 만들 수 있음.

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
    	console.log(`${i}, ${j}`)
    }
}

while

• while문의 구조:

while (조건식) {
     // 조건식이 참일 때 실행될 코드
}

do-while

• 조건식의 평가 전 코드를 실행하는 반복문.
• 최소 1번의 실행이 보장됨
• do-while문의 구조:

do {
    // 무조건 한 번 실행되는 코드
} while (조건식) {
    // 조건식이 참일 때 실행될 코드
}

break와 continue

• 반복문의 흐름을 제어함
• 특정조건에 따라서 반복문을 중단, 건너뛰게 하는 역할

break

• 반복문 즉시 종료

continue

• 반복문의 다음 반복으로 이동

label

• 특정한 코드블록에 이름을 지정함
• 사용예시:

outer: for (let i = 0; i < 3; i++) {
	for (let j = 0; j < 3; j++) {
		if (i + j === 3) {
			break outer;
		}
		console.log(i, j);
	}
}

전개 구문과 구조분해할당

전개구문(Spread syntax)

• 배열이나 객체와 같은 데이터 구조를 확장하기 위해 사용하는 문법 == 전개식

배열의 전개구문

• 대괄호 안에서 세 개의 점(…)을 사용하여 배열을 확장
• 배열의 전개구문 사용한 예시:

const text1 = ['a', 'b', 'c'];
const text = [...text1];
    
console.log(text); // a, b, c

객체의 전개구문

• 중괄호 안에서 세 개의 점(…)을 사용하여 객체를 확장
• 객체의 전개구문 사용한 예시:

const test = {name: "apple", color: "red"};
    
const cloneTest = {...test};
    
cloneTest.category = "fruit";
    
console.log(cloneTest);

구조분해할당(destructuring)

• 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식
• 구조분해할당 사용시의 장점: 반복과 불필요한 변수 생성을 줄여 코드를 깔끔하게 작성 가능
• 구조분해할당의 기본 구조:

const obj = {food1 : '과일', food2 : '채소', food3 : '육류'};
    
function objReturn(){
	return obj
}
    
const {food1, food2, food3} = objReturn();
    
console.log(food1, food2, food3);

배열의 구조분해할당

• 배열의 구조분해할당의 예시:

const [a, , c] = [1, 2, 3, 4, 5];
    
console.log(a);
console.log(c);

함수의 구조분해할당

• 함수의 구조분해할당의 예시:

function func1({ a, b }) {
	console.log(a, b);
}

func1({ a: "hello", b: "world" });

func1({ b: 20, a: 10 }); // 10 20
    
function func2([a, b, c]) {
	console.log(a, b, c);
}
func2([10, 20, 30]);

this

• this는 객체를 가리키는 참조 변수
• 호출되는 위치에 따라 다른 값을 출력함

호출되는 위치에 따른 this

전역 컨텍스트

• 전역컨텍스트에서 this는 전역객체, 브라우저에서는 window를 가리킵니다.

함수 호출

• 일반 함수 내부에서 this는 전역 객체를 가리킵니다.

메서드 호출

• 객체의 메서드 내에서 this는 그 메서드를 호출한 객체를 가리킵니다.

이벤트 핸들러

• 이벤트 핸들러 내에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

this를 사용자 의도대로 값 조작하기

call()

• call메서드의 인수에 this로 사용할 값을 전달할 수 있습니다.
• 예시

var peter = {
	name : 'Peter Parker',
	sayName : function(){    
		console.log(this.name);
	}
}
    
var bruce = {
	name : 'Bruce Wayne',
}
    
peter.sayName.call(bruce);
// Bruce Wayne

apply()

• apply() 메서드의 인수에 this 로 사용할 값을 전달할 수 있습니다.
• 배열의 형태로 전달할 수 있습니다.
• 예시

var peter = {
	name : 'Peter Parker',
	sayName : function(is, is2){    
		console.log(this.name+ ' is '+ is + ' or ' + is2);
	}
}
    
var bruce = {
	name : 'Bruce Wayne',
}
    
peter.sayName.apply(bruce, ['batman', 'richman']);
// Bruce Wayne is batman or richman

bind()

• bind()는 this가 고정된 새 함수를 반환
• 예시

function sayName(){
	console.log(this.name);
}
    
var bruce = {
	name: 'bruce',
	sayName : sayName
}
    
var peter = {
	name : 'peter',
	sayName : sayName.bind(bruce)
}
    
peter.sayName();
bruce.sayName();
    
// bruce
// bruce