본문 바로가기

728x90
반응형

Javascript

(128)
[Javascript] 단축 평가 논리 계산법 단축 평가 논리 계산법이란 이전 포스트에 게시된 truthy and falsy를 활용한 방법이다. 아래의 소스코드는 getName 의 파라미터에 제대로 된 객체가 주어지지 않아 에러가 발생한다. const dog = { name: '강아지' }; function getName(animal) { return animal.name; } const name = getName(); console.log(name); 물론 아래와 같이 if문을 사용하여 에러를 피할 수 있다. const dog = { name: '강아지' }; function getName(animal) { if (animal) { return animal.name; } return undefined; } const name = getName();..
[Javascript]에서의 Truthy and Falsy 일반적인 Javscript에서 null 체크 코드는 아래와 같다. function print(person) { if (person === undefined || person === null) { console.log('person is null'); return; } console.log(person.name); } const person = null; print(person); 위의 코드는 아래와 같이 축약하여 사용이 가능하다. function print(person) { if (!person) { console.log('person is null'); return; } console.log(person.name); } const person = null; print(person); 위와 같은 방식이 ..
[Javascript] 배열 내장 함수 정리(shift & pop, unshift, concat, join) shift 는 첫번째 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.shift(); console.log(value); console.log(numbers); pop은 맨 마지막 원소를 배열에서 추출한다. const numbers = [10, 20, 30, 40]; const value = numbers.pop(); console.log(value); console.log(numbers); unshift는 shift의 반대 개념으로 배열의 맨 앞에 새 원소를 추가한. const numbers = [10, 20, 30, 40]; numbers.unshift(5); console.log(numbers); concat은 여러 개의..
[Javascript] 배열 내장 함수 정리(splice, slice) splice는 배열의 특정 항목을 자를 때 사용한다. splice를 사용할 때 첫 번째 인자 값에는 시작점이고 두 번째 인자는 시작점부터 몇개까지 지울지를 적어준다. const numbers = [10, 20, 30, 40]; // 배열 선언 const index = numbers.indexOf(30); // 삭제할 인덱스 추출 let delList = numbers.splice(index, 1); // 삭제 리스트 console.log(numbers); // 삭제 후 배열 출력 console.log(delList); // 삭제 항목 출력 3행과 같이 splice한 항목을 변수에 담게 되면 삭제된 항목이 무엇인지 알 수 있다. slice 는 splice와 같이 배열을 잘라내는 용도로 사용되나 기존의 배열..
[Javascript] 배열 내장 함수 정리(indexOf, findIndex, find) indexOf는 내가 원하는 텍스트 위치를 알려준다. const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; const index = animals.indexOf('사자'); console.log('사자의 위치는 : ' + index); 하지만 indexOf의 경우 대상이 객체이거나, 특정 대상의 값으로 찾는 것이 아닌 어떤 조건을 가지고 찾을 경우 값을 찾을 기 어렵다. 이럴 때 findIndex를 사용한다. findIndex는 파라미터 값으로 함수를 넘겨준다. 특정 조건을 확인하여 그 조건이 일치하면 일치하는 원소가 몇 번째인지 알려주는 함수다. const todos = [ { id: 1, text: '자바 입문', done: true }, { id: 2, text:..
[Javascript] 배열 내장 함수 정리(forEach, map) forEach 구문 일반 for문 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; for (let i = 0; i < animals.length; i++) { console.log(animals[i]); } forEach 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; function print(animal) { console.log(animal); } animals.forEach(print); forEach 및 익명 함수 사용 const animals = ['호랑이', '사자', '사슴', '토끼', '거북이']; animals.forEach(function(animal) { console.log(animal)..
[Javascript] 변수와 상수 변수 : let 키워드 이용하여 선언 상수 : const 키워드 이용하여 선언 ** var 키워드는 권장하지 않는다 ** 주요 차이점으로 var는 똑같은 이름으로 여러 번 사용할 수 있다. let과 사용하는 범위가 다른데 이것은 나중에 별도로 정리할 예정이다. 아래는 let 과 var의 차이에 대한 예시다. let a = 1; if (a + 1 === 2) { let a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); var a = 1; if (a + 1 === 2) { var a = 2; console.log("if문 안의 a 값은 " + a); } console.log("if문 밖의 a 값은 " + a); let과 co..
[Javascript] 비구조화 할당(객체 구조 분해) function hello(name) { console.log('Hello' + name); } hello('kwkim'); 결과 : Hello kwkim! 위와 같은 방식을 es6 이상부터는 아래와 같은 방식으로 사용할 수 있다. function hello(name) { console.log(`Hello ${name}!`); } hello('kwkim'); 결과 : Hello kwkim! 다른 예시 const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero..

728x90
반응형