JavaScript/Modern Javascript(16)
-
Javascript 객체의 순회(Object.keys, values, entries)
목차 1. 객체의 데이터 조작 2. Object.key(obj) 3. Object.values(obj) 4. Object.entries(obj) 5. Object.fromEntries(array) 1. 객체의 데이터 조작 배열에는 관련된 메서드가 많았고, 모두 반복하는 형태였다. 배열에는 인덱스가 있어서 이것이 수월했지만, 객체에는 키가 일정한 형식을 띄고있지 않아 어려워보인다. 객체의 키와 값을 가지고 변형을 주기가 어려우니, 이를 잠시 변형하여 조작할 수 있는 메서드가 있다. Object.keys( obj ) Object.values( obj ) Object.entries( obj ) 위의 메서드는 모두 결과물(return)로 배열을 반환해준다. 배열로 반환받았으니, 배열 메서드를 적용하여 데이터를 ..
2023.01.14 -
Javascript 옵셔널 체이닝(Optional Chaining) " ?. "
목차 1. 옵셔널 체이닝(Optional Chaining) " .? " 2. 옵셔널 체이닝 작동원리 1. 옵셔널 체이닝(Optional chaining) " .? " 옵셔널 체이닝은 왜 필요할까? 예를 들어, 객체안에 객체가 들어있는 중첩 객체에 접근하려고 했다 가정하자. let user = {}; user.buyList = {} user.buyList.food = "Pasta" user.buyList.wash = "Shampoo" console.log(user) // { // buyList: { // food: 'Pasta', // wash: 'Shampoo' // } // } 만약 여기서 존재하지 않는 프로퍼티에 접근하면 어떻게 될까? let user = {}; user.buyList = {} use..
2023.01.14 -
Javascript Switch 문
목차 1. Swich 문 1. Switch 문 if 조건문은 switch 문으로 바꿀 수 있다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. swich 문의 장점은 비교 상황을 잘 설명해준다. 문법(Syntax) switch(변수) { case '값': // if (변수 === '값') ... // 코드 본문 [break] case '값': // if (변수 === '값') ... // 코드 본문 [break] default: ... // 코드 본문 [break] } - 하나 이상의 case문으로 구성된다. - default는 써도되고 안써도된다. 작동원리 변수와 값을 일치하는지 비교한다. 해당 case에서 일치하는 경우 코드 본문을 실행한다. break문을 만나..
2023.01.14 -
Javascript 반복문
목차 1. 반복문(loop) 2. while 반복문 3. do...while 반복문 4. for 반복문 5. 반복문의 종료(break) 6. 다음으로 넘어가기(continue) 7. break/continue와 사용하는 lable 1. 반복문(loop) 코드를 작성할 때에 단순히 반복적으로 작업해야하는 경우가 생긴다. 예를 들면, 배열 안에 차례대로 1, 2, 3, ... 을 넣어 주어야하는 경우 등등 이럴 때에 반복문을 이용하면, 단순 작업을 반복해서 하지 않아도 된다. 2. while 반복문 문법(Syntax) while ( 조건절 ) { 본문 } while ( 조건절 ) { 본문 } 조건이 truthy 인 경우에 본문을 실행한다. 예시(Sample) let i = 0 while ( i < 5 ) {..
2023.01.14 -
Javascript 논리 연산자
목차 1. OR ( || ) 2. AND( && ) 3. NOT( ! ) 1. OR( || ) OR 연산자의 표현 방법은 "||"로 나타낼 수 있다. 이항 연산자로써, 피연산자 앞 뒤로 두 가지 받을 수 있다. 문법(Syntax) a || b ( || c ...) OR 연산자의 반환 값은 true / false로 불린값을 조작하는 데에 쓰인다. OR 연산자는 뒤에 나올 AND 연산자와 비교하여 보면 좋다. console.log( true || true ); // true console.log( false || true ); // true console.log( true || false ); // true console.log( false || false ); // false 둘 중 하나라도 true 인경..
2023.01.14 -
Javascript 조건문
목차 1. if 문 2. 삼항연산자( ? ) 1. if문 if 문은 조건을 평가하여, 결과에 따라 어느 코드블럭을 실행할지 결정한다. 문법(Syntax) if( 조건절 ) { true 시 실행 블럭 } else { false 시 실행 블럭 } if( 조건절 1번 ) { 1번 true 시 실행 블럭 } else if ( 조건절 2번 ){ 2번 true 시 실행 블럭 } else { false 시 실행 블럭 } 형변환 if 문은 조건절(소괄호)의 표현식을 평가하여 불린값으로 형 변환하여 코드 블럭을 진행한다. falsy : 0, " ", Null, undefined, NaN 같은 형 변환시 false가 되는 값들 truthy : 이 외의 값들 2. 삼항 연산자( ? ) if 문과 ..
2023.01.14