본문 바로가기

프론트엔드/Java Script

(42)
JavaScript Sec 02_6 Spread 연산자 Spread Spread : …을 통해 중복되는 객체의 프로퍼티들을 새로운 객체에 펼쳐주는 연산자 객체에서 spread연산자 사용 배열에서 spread 연산자 사용
JavaScript Sec 02_5 비 구조화 할당 (구조 분해 할당) 배열이나 객체에서 원하는 값을 더 쉽고 빠르게 뽑아내는 방법 배열의 비 구조화 할당 (배열의 인덱스를 기준으로) 대괄호 [ ] 를 이용해 배열의 값을 순서대로 할당받아서 사용할 수 있다. let arr = ["one", "two", "three"]; let [one,two,three]=arr; // let one = arr[0]; // let two = arr[1]; // let three = arr[2]; console.log(one,two,three); 배열의 선언 분리 비 구조화 할당 배열을 선언할 때 배열의 값을 분리한다. let [one,two,three]=["one", "two", "three"]; // let one = arr[0]; // let two = arr[1]; // let thre..
JavaScript Sec02_4 조건문 Upgrade 조건문을 더 smart하게 사용하는 방법 배열 내장 함수인 includes를 이용 if(food==="불고기" || food==="떡볶이" || food==="비빔밥" ) ⇒ if(["불고기", "떡볶이", "비빔밥"].includes(food)) 여러 가지 케이스를 다룰 때 배열 내장 함수인 includes를 사용하면 더 편리하다. 객체 리터럴과 Truthy & Falsy 속성을 이용 const getMeal = (mealType)=>{ if(mealType === "한식") return "불고기"; if(mealType === "중식") return "멘보샤"; if(mealType === "양식") return "파스타"; return "굶기"; } console.log(getMeal("한식"));..
JavaScript Sec 02_3 단락회로 평가 논리 연산자의 왼쪽에서 오른쪽 방향으로 연산하는 특성을 이용한 문법 단락회로 평가 단락회로 평가 : 두 개의 피연산자 중 뒤에 위치한 피연산자를 확인할 필요없이 그냥 연산을 끝내버리는 것을 의미 const getName=(person)=> { return person && person.name}; let person; const name = getName(person); console.log(name); person이라는 변수에는 객체가 정의되지 않았으므로 person type은 undefined type이다. 매개변수에 이 undefined type인 person을 넣으면 논리 연산자 (&&) 에서는 falsy 속성으로 인해 person을 false로 인식하게 된다. 단락회로 평가 문법에 의해 &&는 ..
JavaScript Sec02_2 삼항 연산자 긴 조건문을 짧게 줄일 수 있는 연산자 삼항 연산자 조건식 ? 조건식이 참일 때 수행할 식 : 조건식이 거짓일 때 수행할 식 ; let a =-1; a >=0 ? console.log("양수") : console.log("음수"); let a =[]; const arrayStatus = a.length===0 ? "빈 배열" : "안 빈 배열"; console.log(arrayStatus); Truthy & Falsy를 활용한 삼항 연산자 let a=[]; const result = a ? true: false; console.log(result); 출력 값 ⇒ true let a; const result = a ? true: false; console.log(result); 출력 값 ⇒ false 중첩..
JavaScript Sec02_1 Truthy & Falsy 자바스크립트의 조건식에는 boolean 형 값을 넣지 않아도 참이나 거짓으로 인식되는 속성이 있다. Truthy : 자바스크립트가 조건식에서 참으로 평가하는 타입 빈 배열 [ ] 객체 리터럴 { } 숫자형, Infinity (양의 무한대) 문자열 Falsy : 자바스크립트가 조건식에서 거짓으로 평가하는 타입 null undefined 숫자 0, 숫자가 아님을 의미하는 NaN “” (빈 문자열) EX) //객체를 매개변수로 받아서, 받은 객체에서 특정한 프로퍼티를 반환하는 프로그램 const getName = (person) => { return person.name; }; let person; //여기서 person은 undefined type이 된다. const name = getName(person)..
JavaScript Sec01_12 배열 내장함수 객체의 메소드를 쓰는 것처럼 사용한다 ( 배열명.메소드명( ~ ) ) forEach 배열의 모든 요소를 한 번씩 순회 할 수 있도록 해주는 내장 함수 const arr = [1,2,3,4]; for(let i =0; i console.log(elm)); arr.forEach(function(elm){ console.log(elm); }); map 원본 배열의 모든 요소들을 순회하고 연산하여 return 값들을 요소로 하는 배열로 반환해주는 함수 const arr = [1,2,3,4]; const newArr = []; // arr.forEach((elm) => console.log(elm)); arr.forEach(function(elm){ newArr.push(elm*2); }); console.log..
JavaScript Sec01_11 반복문 for문 ; 배열과 객체를 순회할 때 주로 사용한다. 반복문 함수 for (초기식 ; 조건식 ; 연산식) { // 반복 수행할 명령 // } 배열 순회 객체 순회 key 값 순회 ( Object.keys() ) value 값 순회 key 값을 이용해 value를 구할 수 있다. values 함수를 이용해 key 값 없이 바로 value값만을 구할 수 있다.( Object.values() )