본문 바로가기

TIL/Javascript13

spread 문법 객체 혹은 배열을 펼침 const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); 위의 것을 다음과 같이 바꿀 수 있다. const slime = { name: '슬라임' }; const cuteSlime = { ...slime, attribute: 'cute' }; const purpleCuteSlime = { ...cuteSlime, color.. 2022. 7. 18.
ajax ajax 통신이란? 서버와 클라이언트간에 정보를 비동기적으로 전달하기 위해 자바스크립트에서 사용하는 하나의 라이브러리 서버에 css 파일을 요청하고 그 응답 결과를 text에 저장하여 alert(text)를 수행한다. 2022. 7. 18.
프로토타입 : javascript는 클래스라는 개념이 없어 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어 상속을 흉내내어 구현 Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있습니다. 즉, eyes와 nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과 park이 공유해서 사용 function Person() {} Person.prototype.eyes = 2; Person.prototype.nose = 1; var kim = new Person(); var park = new Person(): console.log(kim.eyes); // =>.. 2022. 7. 16.
document document : html을 가리키는 객체 (많은 것들이 들어있는 객체) Grab me! hihi 1 hihi 2 hihi 3 console.dir(document.getElementById("title")); // h1태그에서 가져올 수 있는 모든 속성 출력 document.getElementsByClassName("name") document.querySelector(".hello h1") // 첫번째 것 return document.querySelectorAll(".hello h1") // 배열로 return const title = document.querySelector("div.hello:first-child h1"); title.style.color = blue; // 색상 바꾸기 func.. 2022. 7. 15.
반복문 for ... of 배열에 관한 반복문을 돌리기 위해 만들어짐 let numbers = [10, 20, 30, 40, 50]; for (let number of numbers) { console.log(number); } for ... in Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환 Object.keys: [키, 키, 키] 형태의 배열로 변환 Object.values: [값, 값, 값] 형태의 배열로 변환 객체가 지니고 있는 값에 대하여 반복을 하고 싶다면 위 함수들을 사용하셔도 되고, for...in 구문을 사용하셔도 됩니다. const doggy = { name: '멍멍이', sound: '멍멍', age: 2 }; for (let key in doggy) { co.. 2022. 7. 14.
조건문 if(condition === true){ } else if(age > 8){ } else{ } 2022. 7. 14.
연산자 === : 값과 data type 이 모두 같은 지 비교 == : 값이 같은 지 비교 let a = 1; let b = "1"; console.log(a == b); // true console.log(a === b); // false console.log(null == undefined); // true console.log(null === undefined); // false 삼항연산자 condition ? exprIfTrue : exprIfFalse 예시) var age = 26; var beverage = (age >= 21) ? "Beer" : "Juice"; console.log(beverage); // "Beer" 단축 평가 논리 계산법 const dog = { name: '멍멍이' }; f.. 2022. 7. 12.
함수 function sayHello(argument){ return "Hello my name is "+argument; } console.log(sayHello("dain")); 화살표 함수 (https://learnjs.vlpt.us/ 에서 발췌) 함수를 선언하는 방식 중 또 다른 방법은 화살표 함수 문법을 사용하는 것 입니다. const add = (a, b) => { return a + b; }; console.log(add(1, 2)); function 키워드 대신에 => 문자를 사용해서 함수를 구현했는데요, 화살표의 좌측에는 함수의 파라미터, 화살표의 우측에는 코드 블록이 들어옵니다. 그런데, 만약에 위와 같이 코드 블록 내부에서 바로 return 을 하는 경우는 다음과 같이 줄여서 쓸 수도 있습.. 2022. 7. 11.
객체 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 키가 변수처럼 사용되었지만, 실제로는 String 타입으로 저장된다. const player = { name : "dain", points : 10, student : false } console.log(player.name); console.log(player["name"]); player.name = "kimdain" // const로 선언되었지만, player의 자체를 변경하지 않고서는 안의 속성은 변경가능하다. 객체 비구조화 할당 : 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것 const captainAmerica = { name: .. 2022. 7. 8.
옵셔널 체이닝 ‘?.’ 옵셔널 체이닝 ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 다음과 같이 주소 정보가 없는 user가 있을 때 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 존재하지 않는 요소에 접근해 요소의 정보를 가져오려할 때 // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; ?. ?. ‘앞’의 평가 대상이 undefined 나 null 이면 평가를 멈추고 .. 2022. 7. 8.
배열 const array = [1,"hello",false, null, undefined]; array.push("sun") // 추가 비구조화 할당 const array = [1, 2]; const [one, two] = array; console.log(one); // 1 console.log(two); // 2 배열 내장함수 map() 함수의 파라미터로는 변화를 주는 함수를 전달 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); filter() 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만듦 const todo.. 2022. 7. 5.
변수 const : 상수 선언 let : 변수 선언 var : 형 변환이 되어도 ok ❗️ 기본적으로 const를 쓰고 필요할 때만 let을 쓰되, var은 쓰지 말 것 💡 추가적으로, IE9, IE10 같은 구형 브라우저에서는 let 과 const 를 사용 할 수 없습니다. 하지만, 보통 개발을 하게 될 때는 Babel 과 같은 도구를 사용하여 코드가 구형 브라우저에서도 돌아갈 수 있게끔 변환작업을 합니다. 만약에, 여러분이 나중에 별도의 도구 없이 구형 브라우저를 호환시켜야 하는 상황이 온다면 (그럴 일은 거의 없을 겁니다.) var 를 사용하게 될 수도 있습니다. null : 값이 아무것도 없는 것 undefined : 변수가 메모리에 만들어졌지만 값이 정해지지 않은 것 const a = null; //.. 2022. 7. 5.
반응형

티스토리툴바