dev in Serengeti

[자바스크립트] javascript Object.entries() 사용하기 자바스크립트 객체를 배열로 변환해주는 메소드! 객체의 {key : value} 형식을 배열 형태의 [key, value] 로 변환하여 준다. [사용법] var son = { name : 'Son', age : 30, position : 'forward', team : 'Spurs' } Object.entries(son); // 결과값 : // [['name', 'Son'], ['age', 30], ['position', 'forward'], ['team', 'Spurs']] [간단설명] Object 에서는 사용할 수 없는 자바스크립트 Array 메소드를(forEach(), find(), filter()... 등) 사용하고자 할 때..

[자바스크립트] javascript Array forEach() 사용하기 배열의 모든 요소를 순회하는 메소드! 배열을 순회하는 기능만을 가진 메소드라 반환값은 없다! (undefined 로 표시) [사용법] //화살표 함수 표기법 array.forEach((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.forEach(callbackFn, thisArg); //익명함수로 표기법 array.forEach(function(element, index, array) { }, thisArg); [간단설명] array.forEach() 는 배열을 순환하면서, 모든 요소 각각에 콜백함수를 한 번씩 실행한다. [특징] 값이 존재하지 않거나, delete 된 요소는 ..

[자바스크립트] javascript every() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열의 모든 요소가 조건에 만족하는지 확인하는 메소드! 배열 요소 중, 조건에 맞지 않는 요소가 있는지 검사한다. (some() 과는 반대되는 접근방식) 결과값은 true or false 로 반환한다! [사용법] //화살표 함수 표기법 array.every((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.every(callbackFn, thisArg); //익명함수로 표기법 array.every(function(element, index, array) { }, thisArg); [간단설명] array.every() 는 배열을 순환..

[자바스크립트] javascript some() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소 중, 조건에 만족하는 요소가 최소 하나라도 있는지 검사하는 메소드! (every() 와 반대되는 접근방식) 결과값은 true or false 로 반환한다! [사용법] //화살표 함수 표기법 array.some((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.some(callbackFn, thisArg); //익명함수로 표기법 array.some(function(element, index, array) { }, thisArg); [간단설명] array.some() 은 배열을 순환하면서, 콜백함수의 조건에 "true" 인 요..

[자바스크립트] javascript filter() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소 중, 어떠한 조건에 상응하는 모든 요소를 골라내고 싶다면 가장 알맞는 함수! 단, 결과 값은 배열로 리턴한다! [사용법] //화살표 함수 표기법 array.filter((element, index, array) => { ...}); //콜백함수로 호출하는 법 array.filter(callbackFn, thisArg); //익명함수로 표기 법 array.filter(function(element, index, array) { }, thisArg); [간단설명] array.filter() 는 배열을 순환하면서 콜백함수의 조건 "true" 인 모든 요소를 새로운 배열로 반환한..

[자바스크립트] javascript find() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소 중, 어떠한 조건에 맞는 첫번째 요소만 골라내고 싶다면 가장 알맞은 함수! [사용법] //화살표 함수 표기법 array.find((element, index, array) => { ... }); //콜백함수로 호출하는 법 array.find(callbackFn, thisArg); //익명함수로 표기법 array.find(function(element, index, array) { }, thisArg); [간단설명] array.find() 는 배열을 순환하면서 콜백함수의 조건에 만족하는 첫번째 배열요소를 반환한다. 만약 조건에 만족하는 요소가 없다면, undefined 를 re..

[자바스크립트] javascript map() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소를 순환하며 어떠한 가공을 가하거나, 배열요소 안의 요소를 추출하거나 할 때 가장 알맞은 함수! 가공된 결과물은 새로운 배열로 반환된다! [사용법] // 화살표 함수 array.map((element, index, array) => { ... }) // 콜백함수만 호출 array.map(callbackFn, thisArg) // 익명함수 array.map(function(element, index, array) { },thisArg) [간단설명] array.map()은 배열을 순환하면서 지정된 callback 함수를 각 요소마다 순서대로 실행하여 새로운 배열을 return 한다...

[AngularJS] ng-style 사용법 AngularJS 에서 제공하는 ng-style! 일단 AngularJS 공식문서에 따르면, ng-style 은 조건적으로 CSS style을 입힐 수 있는 directive 다. 보통 css를 따로 쓰지만, 때에 따라 inline 형식으로 직접 DOM에 style을 명시할 때 유용하다. 간단하게 정리하자 [예시] {{yourGift}} 1) 위의 div 에 명시한 것처럼 (giftCd == 1) 이면 배경색을 black으로, 아니면 gray로! 2) span 에 명시한 것처럼 그냥 flag 값이 true면 green 으로, false면 red 로! class 를 동적으로 입히고 싶다면? https://devinserengeti.tistory.com/4?cat..

[자바스크립트] slice() vs splice() vs split() 자바스크립트에서 제공하는 배열에 관련된 함수들로, 이름이 비슷하여 맨날 헷갈리는 친구들인데, 맨날 찾지말고 정리해보자 간단히, Slice(startIdx, endIdx) : 원본은 건들지 않고 배열 자르기 Splice(startIdx, number, elementToAdd) : 원본을 자르거나 추가하기 Split(separator, limit) : 문자열을 잘라서 배열로 변환 (문자열 => 배열) 1) slice() : 원본을 건들지않고, 복사된 array를 return! array.slice(startingIndex, endIndex); startingIndex : 시작 index endIndex : 끝 index (끝 index ..

[자바스크립트] Javascript This 정리 자바스크립트에서 this 는 execution context 가 실행될 때에 정해진다. 실행 컨텍스트는 함수가 호출될 때에 실행되는데, 그 때에 this 가 binding 된다! 1) 전역공간 - this 는 window (전역객체) - node.js 에서는 global 이 나온다. 2) 함수 호출 시 - 전역객체가 호출됨 - 함수는 무조건 전역객체가 호출된다. 3) 메서드 호출 시 - 메서드를 호출한 주제 => a.b(); 에서 a가 this - 메서드란 원래 함수인데 어떤 객체와 관련된 동작을 하면 그것을 메서드라 부른다. 4) callback 호출 시 - 원래는 함수인 만큼 전역객체지만, call() 을 어떻게 호출하느냐에 따라 달라진다. - 함수로..