항해99) 2주차:: TIL(화살표 함수 & 구조 분해 할당 & break문 & continue문 & for...of문 & for...if문)

📚 화살표 함수(Arrow function)

👉🏻ES6에서 새로 추가된 문법! 이름처럼 문법 안에 화살표가 들어 있음ㅋㅋ 기존 함수보다 더 간결한 문법으로 함수를 만들 수 있당!~!

 

const sum = function(a, b) {
  return a + b;
};

일반 함수 표현식👆🏻 vs 애로우 펑션👇🏻

<<화살표 함수 표현식 (1): 기본 형태>>
const sum = (a, b) => {
	return a + b;
};

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

<<화살표 함수 표현식 (3): 인자 괄호 생략 형태(인자 하나면 괄호 생략 가능)>>
const hello = a => {
	return a;
};
hello('hi'); // hi

 

 

📚 구조 분해 할당

👉🏻배열이나 객체에서 각각 값 이나 프로퍼티를 분해하여 손쉽게 개별 변수에 담을 수 있도록 해 줌

▶배열에서의 구조 분해 할당

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

//혹은 아래와 같이 표현할수있습니다.

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

// a 에는 array[0] , b에는 array[1] 값이 할당 되었습니다.

 

▶객체에서의 구조 분해 할당(배열에서의 구조 분해 대상이 배열의 값이 였다면 , 객체에서는 프로포티(property) 가 대상)

const student = {
  name: "Sparta",
  age: 18,
  onlineClass: "Node JS",
};
const { name, age, onlineClass } = student
console.log(name); // "Sparta"
console.log(age); // 18
console.log(onlineClass); // "Node JS"

↳쉽게 말해서, student라는 객체(파이썬에서의 딕셔너리!!!!)에서 name, age ,onlineClass등의 property를 쉽게 뽑아서 사용할수있다

 

 

📚 break문

👉🏻break 만나면 조건에 상관 없이 반복문을 중단하고 빠져나옴!!!

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

	console.log(i);
}

// Print: 0
// 1

 

 

📚 continue문

👉🏻continue를 만나면 거기서 멈추고(해당 i는 실행 X) for 조건으로 돌아가서 그 다음 i부터 실행!!

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

	console.log(i);
}

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

 

 

📚 for...of문

👉🏻배열의 요소들을 하나씩 찍어줌~!

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

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

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

 

 

📚 for...in문

👉🏻for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달

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

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

// Print: 0
// 1
// 2