finally 문- try ... catch문이 끝난 다음에 최종적으로 실행될 코드를 다룰 때 활용try { // 실행할 코드} catch (error) { // 에러가 발생했을 때 실행할 코드} finally { // 항상 실행할 코드} function printMembers(...members) { for (const member of members) { console.log(member); }}try { printMembers('영훈', '윤수', '동욱');} catch (err) { alert('에러가 발생했습니다!'); console.error(err);} finally { const end = new Date(); const msg = `코드 실행을 완료한 시각은 ${..

try catch문- 에러를 다루는 문법 중 하나로 사용try { // 코드} catch (error) { // 에러가 발생했을 때 동작할 코드} try { console.log('에러 전'); const codeit = '코드잇'; console.log(codeit); codeit = 'codeit'; const language = 'JavaScript'; console.log(language);} catch (error) { console.log('에러 후');}/*에러 전코드잇에러 후*/ try catch 활용하기function printMembers(members) { for (const member of members) { try { for (const..

배열함수가 배열일 때 return값 활용하기function getArray() { return ['컴퓨터', '냉장고', '세탁기'];}const [el1, el2, el3] = getArray();console.log(el1); // 컴퓨터console.log(el2); // 냉장고console.log(el3); // 세탁기 - rest parameter가 배열인 점을 참고하여 destructuring 문법 활용하기function printWinners(...arg) { const [macbook, ipad, airpods, ...coupon] = arg; console.log('이벤트 결과를 알려드립니다!'); console.log(`맥북의 주인공은 '${macbook}'님 입니다.`); ..

Destructuring (구조분해)- 배열이나 객체를 구조분해 배열 구조분해const rank = ['효준', '유나', '민환', '재하'];const macbook = rank[0];const ipad = rank[1];const airpods = rank[2];const coupon = rank[3];console.log(macbook); // 효준console.log(ipad); // 유나console.log(airpods); // 민환console.log(coupon); // 재하const rank = ['유나', '효준', '민환', '재하'];const [macbook, ipad, airpods, coupon] = rank;console.log(macbook); // 유나console.lo..

옵셔널 체이닝 (?.)const user = { name: "뽀로로", address: { city: "jeju" }, number: { location: "seoul", }, sayHello() { console.log("Hello world"); }};console.log(user.number); console.log(user && user.number && user.number.location); // undefinedconsole.log(user?.number?.location); // undefined -> null이나 undefined가 아니면 뒷값으로 넘어감console.log(user.sayHello?.()); //undefined -> sayHello의 반환..

객체 프로퍼티 간결하게 작성하기const user = { title: 'Codeit', birth: 2017, job: '프로그래밍 강사'}; - 변수의 할당된 값을 활용하여 프로퍼티 작성가능- 변수의 이름과 프로퍼티 이름이 동일하면 축약형으로 하나만 작성가능const title = 'Codeit';const birth = 2017;const job = '프로그래밍 강사';const user = { title, birth; job};console.log(user); // {title: "Codeit", birth: 2017, job: "프로그래밍 강사"}function getFullName() { return `${this.firstName} ${this.lastName}`;};const u..

Spread 구문 (Spread Syntax)- 배열앞에 ...- 값을 하나로 묶은 배열을 각각의 배열값으로 펼칠 때 사용하는 문법- 배열을 다룰 때 유용하게 활용const numbers = [1, 2, 3];console.log(numbers); // [1, 2, 3] -> spread 구문 사용하기const numbers = [1, 2, 3];console.log(...numbers); // 1 2 3console.log(1, 2, 3); // 1 2 3 - push를 할 경우 같이 복사되어 같은 값을 반환const webPublishing = ['HTML', 'CSS'];const interactiveWeb = webPuslishing;interactiveWeb.push('JavaScript');c..

if문if (조건) { // 조건이 true일 때 동작} else { // 조건이 false일 때 동작} switch문switch (값) { case A: // 값이 A와 일치할 때 동작 break; default; // 값과 일치하는 case가 없을 때 동작}  조건 연산자 (Conditional operator)조건 ? truthy 할 때 표현식 : falsy 할 때 표현식- 삼항연산자라고도 불림const CUT_OFF = 80;function passChecker(score) { return score > CUT_OFF ? '합격!' : '불합격!';}console.log(passChecker(75)); // 불합격! if문일 때const CUT_OFF = 80;functi..

this- 일반적으로 사용되지 않음- 주로 함수 내부에서 사용- 객체의 메소드를 만들 때 중요한 역할을 함- 자바스크립트에서 this는 함수를 호출한 객체를 가르키는 키워드- 함수가 호출될 때 어떤 객체가 함수를 호출했는지에 따라 상대적으로 값이 변하는게 특징 - 브라우저 안에서 자바스크립트가 동작한다면 전역객체인 window객체가 this의 기본값console.log(this); // window 객체 출력 const user = { firstName = 'Tess', lastName = 'Jang', getFullName: function() { return `${user.firstName} ${user.lastName}`; }};console.log(user.getFullName());..

화살표 함수 (Arrow Function)- 이름이 없는 익명 함수- 이름을 가진 변수에 할당하거나 다른함수에 Argument를 선언할때 주로 사용- argument 객체가 없음const getTwice = function(number) { return number * 2;};console.log(getTwice(5)); // 10const myBtn = document.querySelector('#myBtn');myBtn.addEventListener('click', function() { console.log('button is clicked!');} Arrow Function으로 바꾸기- function 삭제- 소괄호 () 오른쪽에 => 추가const getTwice = (number) => {..