코드로보시죠

이번엔 배열에 이어 객체를 구조분해 해봅시다! 바로 코드로 보시죠 const myCar = { brand: 'benz', model: 'E220', 'purchase-year': 2023 }; //구조분해 const {brand, model} = myCar; console.log(brand); //benz console.log(model); //E220 자, 우선 배열과의 차이점은, 대괄호가 아닌 중괄호를 사용한다는 점이네요! 또, 중괄호 속에 들어가는 변수의 이름은 배열과 달리 객체에 존재하는 이름이어야 합니다! 배열에서는, 저희가 원하는 이름을 아무렇게나 사용했다면, 객체에서는 프로퍼티 이름을 적어줘야 합니다. 이건 정해진 약속입니다. {프로퍼티 네임} = 값을 가져올 객체 이름; 이렇게 적어주면, ..

파이썬을 배워보신 분들은.. unpacking이라고 말씀드리면 바로 아실텐데요! JS의 배열 구조분해는 파이썬의 리스트 unpacking과 완전 같은 문법입니다. 다만, 언어가 다르니 표기법은 달라요. 파이썬을 모르시는 분들을 위해 구조분해에 대해 차근차근 설명드려볼게요! 코드를 먼저 보시죠 const arr = [1, 2, 3 , 4, 5]; //구조분해 const [one, two, three, four, five] = arr; console.log(one); //1 console.log(two); //2 console.log(three); //3 console.log(four); //4 console.log(five); //5 자, 두 번째 코드에 집중해주세요! 대괄호 속에 요소들을 적어주면, 순서..

간단합니다! 바로 코드로 보여드릴게요 이번 코너는 그냥 쉬어가는 코너가로 생각하셔도 무방할 정도로 내용이 가볍습니다! 즐거운 마음으로 함께 볼까요?! let x = 'lee'; let y = 'kim'; //바로 여기!! [x, y] = [y, x]; 이렇게, 대괄호 속에 요소를 한 번 써주고, 자리를 한 번 바꿔서 써주면 됩니다! 한 가지 주의할 점은, 순서를 바꾼다는 것은 결국, 변수에 들어갈 값을 재할당하는 것이기에, const로 선언된 변수는 저렇게 내용을 바꿀 수 없겠죠?

자바스크립트에서는 물음표도 아주 중요한 문법 요소입니다! 오늘은, 물음표를 사용하는 두 가지 어법에 대해 알아보도록 해요! (1) null병합 연산자 null병합 연산자는, 물음표 두 개를 써서 나타냅니다. console.log(null ?? 'hi'); //hi console.log('bye' ?? 'hi'); //bye 물음표의 앞 대상이 null, undefined라면, 물음표 오른쪽의 값을, 물음표의 앞 대상이 null, undefined가 아니라면 물음표의 왼쪽 값을 선택해주는 연산이라고 보시면 됩니다! (2) 옵셔널 체이닝 옵셔널 체이닝은 물음표 하나와 마침표 하나를 써서 표현하는데요, 특정 객체 안에 접근하고자 하는 프로퍼티가 있으면 접근하고, 없으면 undefined값을 리턴해줍니다. 코드..

음 일단, 우리가 지금까지 프로퍼티를 만들어오던 방식대로 객체를 하나 만들어 볼게요! const myCar = { brand: 'benz', model: 'E220 }; myCar라는 객체는, 두 개의 프로퍼티를 가지고 있죠? 자 그런데, 최신 버전의 JS에서는, 객체의 프로퍼티 "값(value)"을 객체 외부에서 선언하고, 객체 내부에선 그걸 가져오기만 하는게 가능해요! 말이 조금 어려워서, 코드로 보여드릴게요! const brand = 'benz'; const model = 'E220'; const myCar = { brand: brand, model: model }; 이렇게 말이죠! brand: brand를 해주게 되면, brand라는 이름의 프로퍼티에 해당하는 value는, myCar객체 외부에서..

지난 시간에 배열 spread를 배웠습니다. 배열의 요소를 하나씩 그대로 가져올 수 있었죠. 객체에도 spread문법을 적용 가능하고, 마찬가지로 객체 이름 앞에 마침표 세 개를 찍어주면 되는데요. 코드로 바로 보시죠 const myCar = { 'brand': 'benz', 'model': 'E220' }; const momCar = { ...myCar, 'purchase-year': 2023 }; //myCar에서 가져온 내용 중, model프로퍼티는 값을 수정 momCar.model = 'S350'; console.log(momCar); //{'brand': 'benz', 'model': 'S350','purchase-year': 2023} 조금 이해가 되시나요? ...myCar를 통해, myCar..