본문 바로가기

반응형

전체 글

(57)
선택적체이닝 ?. -대괄호 혹은 점 표기법의 대상이 null 혹은 undefined 인경우 에러 대신 undefined 를 반환한다 대상이 null 이나 undefined 가 아닌 경우에는 원래의 방식으로 잘 동작이 됨 에러가 뜨게 되면 그 뒤에 있는 것들은 작동 하지도 않음 = 에러가 아닌 undefined로 해서 뒤에 있는 것들이 실행할 수 있음 console.log(null.abc)console.log(null?.abc)console.log(undefined?.abc) Hello world! --const el = document.querySelector('h1')console.log(el.textContent) //Hello world! 문서에 쿼리셀렉터를 통해 h1 요소를 찾아서 el (E..
객체데이터에서 구조분해할당 객체데이터에서 구조분해할당 사용 전 const user = { name: 'Neo', age: 22, isValid: true}const name = user.nameconst age = user.ageconst isValid = user.isValidconsole.log(name) //Neoconsole.log(age) //22console.log(isValid) //true user 라는 변수의 객체데이터를 할당const 를 통하여 name / age / isvalid 이라는 변수엔 user의 name / age / isvalid 을 할당 하고 콘솔로그로 확인할 수 있음 객체데이터에서 구조분해할당 사용 const user = { name: 'Neo', age: 22..
배열 구조 분해 할당 배열이나 객체의 구조에 맞게 바로 개별 변수에 값을 할당하는 방법으로 필요한 값만 추출하여 변수에 할당할 수 있다. const numbers = [1,2,3] const a = numbers[0] //1const b = numbers[1] //2const c = numbers[2] //3 console.log(a,b,c) //1 2 3 numbers[0] - numbers의 첫번째 numbers[1] - numbers의 두번째numbers[2] - numbers의 세번째 const numbers = [1,2,3]const [a,b,c] = numbersconsole.log(a,b,c) //1 2 3 구조 분해 할당 문법은 실제 데이터와 같은 구조를 만들어서 원한느 값을 개별 변수에 ..
전개연산자 (Spread operator) 전개: 배열데이터와 객체데이터 안쪽에 있는 데이터를 껍데기를 날려버리고 풀어서 전개한다 spread 풀어헤친다 ... 을 붙여 자신을 감싸고 있는 전개연산자(...)와 대괄호[] / 중괄호 {}를 날려버림 //배열데이터const numbers = [1,2,3]console.log(numbers) //[1,2,3]console.log(...[1,2,3]) // 1 2 3 const n1 = [1,2,3]const n2 = [2,3,4]const n3 = n1.concat(n2)const n4 = [...n1, ...n2]console.log(n3) // [1,2,3,2,3,4]console.log(n4) // [1,2,3,2,3,4] n3 = n1 + concat을 이용해 (n2)를 ..
삼항연산자 (Ternary operator) 3개의 항을 가진 연산자 조건 ? (조건이 참일때 실행) : (조건이 거짓일때 실행) const fruits = ['Apple', 'Banana', 'Cherry']//if 조건문if (fruits.length > 0) { console.log ('과일이 있습니다')} else { console.log ('과일이 없습니다.')}// 삼항 연산자 const message = fruits.length > 0 ? '과일이 있습니다.' : '과일이 없습니다.'console.log(message) 조건 fruits.length > 0 ?참일때 실행 : '과일이 있습니다.' :거짓일때 실행 '과일이 없습니다.' const fruits = ['Apple', 'Bana..
함수선언문/표현식 호이스팅 함수 선언문 (Declaration)function hello () { console.log('Hello')} function 함수 이름 () {} 함수 표현식 (Expression)const world = function () { console.log('world')} const / let 키워드를 통해 변수에 함수 데이터를 할당- 변수=함수데이터 자체이기 때문에 함수 이름을 지정하여 표현하지 X 호이스팅(Hoisting) 호이스팅 - 끌어올려지다 라는 의미를 가짐 자바스크립트는 위에서 아래로 차례대로 읽어나가는데함스선언문은 자바스크립트에서 자동적으로 먼저 끌어올려져서 선언문 먼저 읽고 그 다음으로 넘어가게 됨 함수 선언문은 함수 사용부터 하고 정의로 넘어가는것이 가능 -> 정의한 것이 ..
부정, 비교 연산자 부정연산자 (Negation Operator)참과 거짓의 반댓값을 불린 데이터로 반환 console.log(!true) console.log(!false) 중첩사용 가능 console.log(!0)console.log(!!0)console.log(!!!0) 거짓 데이터에서 사용 console.log(!null)console.log(!NaN)console.log(!undefined)console.log(!'') 참 데이터에서 사용 console.log(!{})console.log(![])console.log(!' ') // ' ' 안에 아무런 내용은 없지만 스페이스바가 있어 내용이 있다고 간주함비교연산자 (Comparison Operator)두 데이터를 비교할 때 사용 피연산자 연산자 ..
산술, 할당, 증감 연산자 산술연산자console.log(1+2)console.log(6-7)console.log(3*4)console.log(10/2)console.log(7%5)% 는 나누고 나머지를 나타냄 할당연산자 (Assingment Operators)= 기호 하나만 있으면 비교하는것이 아니라a = b a에 b를 할당해라 let a = 3console.log(a)a += 2 //더하기할당연산자 a=3+2console.log(a)a -= 2 //빼기할당연산자 a= 5-2console.log(a)a *= 2 //곱하기할당연산자 a=3*2console.log(a)a /= 2 //나누기할당연산자 a= 6/2console.log(a)a %= 2 //나누기할당연산자 a ..

반응형