Frontend (278) 썸네일형 리스트형 [JavaScript] 구조 분해 Destructuring (객체) [Desturcturing 문법] const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장 장치', display: '16형 Retina 디스플레이', }; const title = macbook.title; const price = macbook.price; console.log(title); // 맥북 프로 16형 console.log(price); // 3690000 보통 객체를 다룰때 점 표기법을 이용하여 이처럼 변수에 값을 할당함. const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장.. [JavaScript] 구조 분해 Destructuring (배열) [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); // 맹구 상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당하면, 랭크 순위가 변동되어도 자연.. [JavaScript] 모던한 프로퍼티 표기법 객체의 프로퍼티를 표현할때 보통 다음과 같이 표기함. const user = { title: 'Codeit', birth: 2017, job: '프로그래밍 강사' } 이처럼 변수에 할당된 값을 이용해 다음과 같이 프로퍼티를 만들 수도 있는데, const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사'; const user = { title: title, birth: birth, job: job, }; 변수의 이름과 프로퍼티 네임이 똑같으면 다음처럼 하나만 표현하는 방식이 가능함. const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사' const user = { title, birt.. [JavaScript] 객체 Spread [객체 Spread] const codeit = { name: 'codeit', }; const codeitClone = { ...codeit, // spread 문법! }; console.log(codeit); // {name: "codeit"} console.log(codeitClone); // {name: "codeit"} 중괄호 안에서 객체를 spread 하게되면, 해당 객체의 프로퍼티들이 펼쳐지면서 객체를 복사할 수가 있음. const latte = { esspresso: '30ml', milk: '150ml' }; const cafeMocha = { ...latte, chocolate: '20ml', } console.log(latte); // {esspresso: "30ml", milk: ".. [JavaScript] Spread 구문 [Spread 구문] 하나로 묶여있는 값을 각각의 개별값으로 펼쳐주는 구문. const numbers = [1, 2, 3]; console.log(numbers); // [1, 2, 3] console.log(...numbers); // 1 2 3 console.log(1, 2, 3); // 1 2 3 [Spread 구문의 사용] 1. 배열 복사 const webPublishing = ['HTML', 'CSS']; const interactiveWeb = webPublishing; interactiveWeb.push('JavaScript') console.log(webPublishing); // [ 'HTML', 'CSS', 'JavaScript' ] console.log(interactiveWeb); .. [JavaScript] 조건부 연산자 (Conditional operator) 조건부 연산자(Conditional operator) 삼항 연산자(Ternary operator) 로도 불리며 자바스크립트에서 유일하게 세개의 피 연산자를 가짐. if문과 같은 원리로 조건에 따라 값을 결정할 때 활용됨. // 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식 const CUT_OFF = 60; function passChecker(score) { return score > CUT_OFF ? '합격!' : '불합격!' } console.log(passChecker(50)); // 불합격! console.log(passChecker(70)); // 합격! 조건에 따라 값을 결정해야하는 순간에 if문보다 간결하게 축약된 코드로 작성할 수 있음. 그러나 내부에 변수나 함수를 선언.. [JavaScript] Rest Parameter [Rest Parameter] 파라미터 앞에 마침표 세 개를 붙여주면, 여러 개로 전달되는 아규먼트들을 배열로 다룰 수가 있음. arguments객체는 유사 배열이기 때문에 배열의 메소드를 활용할 수 없지만, rest parameter는 배열이기 때문에 배열의 메소드를 사용할 수 있음. function printArguments(...args) { // args 객체의 요소들을 하나씩 출력 for (const arg of args) { console.log(arg); } } printArguments('김철수', '이훈이', '신짱구'); Rest Parameter 는 다른 일반 파라미터와 함께 사용될 수 있는데, function printRankingList(first, second, ...others.. [JavaScript] Arguments 객체 [Arguments 객체] Arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체임. 함수를 호출할 때 전달되는 아규먼트의 개수가 불규칙적일 때 유용하게 활용함. function printArguments() { // arguments 객체의 요소들을 하나씩 출력 for (const arg of arguments) { console.log(arg); } } printArguments('Young', 'Mark', 'Koby'); [줄임말 만들기] 1. arguments 객체를 이용한 for 반복문 function firstWords() { let word = ''; // 여기에 코드를 작성하세요 for (i = 0; i < arguments.length; i+.. 이전 1 ··· 29 30 31 32 33 34 35 다음