JavaScript - 조건부 배열 추가 하기

자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 1. if문 이용하기고전적인 방법이지만 if 문을 이용하여 조건부로 추가할 수 있습니다.const arr = [];const condition = true;if (condition) { arr.push('superman');} 2. 삼항 연산자 이용하기삼항연산자를 이용하여 조건부로 배열의 값을 추가 할 수 있습니다.true 시 값이 있는 배열은 push 가 되고, 빈 배열은 아무값도 추가되지 않습니다.const condition = true;const arr = [ ...(condition ? ['superman'] : [])]   JavaScript - 조건부 객체 속성 추가하기조건에 따라서 객체의 속성을 추가하고 싶을 때..

• format_list_bulleted Develop/JavaScript
• · 2024. 6. 27.
• textsms

자바스크립트 - 객체와 배열 성능 차이

자바스크립트에서 데이터를 저장할 수 있는 방법 중객체 또는 배열을 선언하여 여러 데이터를 저장할 수 있습니다.객체 (Object)var obj = { name: 'superman', age: 23, job: Front-end}; 객체는순서가 중요하지 않고 빠르게 데이터를 가져와야 할 경우에 주로 사용합니다.key & value 방식으로 데이터를 저장합니다.데이터 접근하여 값을 가져오는 속도가 빠릅니다.데이터 추가 / 삭제 빠릅니다.배열 (Array)var arr = ['superman', 'batman', 'pororo']; 배열은순서가 중요한 경우에 주로 사용합니다.배열에 값을 접근 할 때 빠릅니다.배열에 값을 추가 / 삭제할 때, 마지막 index에 추가 삭제하는 경우 빠릅니다.다만, 처음..

• format_list_bulleted Develop/자료구조 & 알고리즘
• · 2024. 3. 31.
• textsms

Vue 반복문 v-for 배열, 객체 렌더링

v-for 구문을 이용해서 반복문을 사용해서 배열이나 객체를 순서대로 렌더링 할 수 있습니다. 배열 v-for const App = { data() { return { array: ['superman', 'batman', 'pororo'] } }, } 배열의 경우 v-for문의 앞부분은 배열의 항목이고 뒷부분은 배열의 이름입니다. {{ hero }} 결과 superman batman pororo 객체 v-for const App = { data() { return { object: { 1: 'superman', 2: 'batman', 3: 'pororo' } } }, } 객체의 경우 첫번째 인자는 값이고 두번째 인자는 객체의 key 값입니다. 아래와 같이 사용할 수 있습니다. {{ key }} : {{v..

• format_list_bulleted Develop/Vue
• · 2023. 4. 28.
• textsms

자바스크립트 reduce 함수를 이용하여 배열 합계 구하기

자바스크립트에 reduce 함수가 있습니다. 자바스크립트 레퍼런스 문서에 reduce에 대해서 설명을 너무 어렵게 해놔서 무슨 말이지 하나도 모르겠네요. 좀 간단하계 합계를 구하는 함수를 만들어보면서 설명드리겠습니다. var arr = [1, 2, 3, 4, 5]; var sum1 = arr.reduce((a, b) => a + b)); // 15 reduce는 배열 함수입니다. 배열에서 사용할 수 있는 함수입니다. (a, b) => a + b) 이렇게 들어가 있는 부분이 reduce의 파라미터 입니다. reduce가 실행 될때, 해당 배열만큼 해당 callback이 타게 됩니다. a의 경우에는 이전 callback의 return 값입니다. b는 현재 배열의 값이 구요. 그렇게 되면서 이전 합계의 값을 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 20.
• textsms

자바스크립트 배열 함수 정리 filter, every, some

자바스크립트에서 자주 사용하는 배열 함수에 대해서 정리하려고 합니다. filter filter(callback) 배열에서 callback 함수가 true 인 값만 배열로 반환합니다. const hero = ["superman", "batman", "pororo"] const result = hero.filter(person => person === "superman"); console.log(result); ["superman"] superman 값이 있는 배열이 반환됩니다. every every(callback) 배열 안의 값들이 callback 함수 조건을 통과하는지 판별합니다. true, false값을 반환합니다. const hero = ["superman", "batman", "pororo"] c..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 12.
• textsms

jQuery merge - 배열 합치기

$.merge(first, second) 첫번째 배열에 두번째 배열을 추가하여 합치게 된다. 배열을 보존하면서 합치고 싶을때는? merge 하기 전에 함수를 만들어 준다. var newArray = $.merge([], array); Sample var hero = ['superman', 'batman', 'pororo']; var person = ['짱구', '짱아', '신형만']; var array = $.merge($.merge([], hero), person)); console.log(array); console.log(hero); 결과 ["superman","batman","pororo","짱구","짱아","신형만"] ["superman","batman","pororo"] jQuery.merge..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 22.
• textsms

자바스크립트 - 배열 값을 변경/삭제 하기 delete splice()

배열 값 변경 1. 인덱스를 이용 var hero = ['superman', 'batman', 'pororo']; hero[0] = 'ionman'; console.log(hero); //["ionman", "batman", "pororo"] 배열 값 삭제 1. delete를 사용 delete를 사용하면 빈자리에는 undefiend가 들어가게 됩니다. var hero = ['superman', 'batman', 'pororo']; delete hero[0]; console.log(hero); //[undefined, "batman", "pororo"] 2. splice() 메서드 이용 splice(변경값이 들어갈 위치, 그 위치에서 배열에서 지울 개수, 값, 값,,,,) 변경 값이 들어갈 위치 : 배열에..

• format_list_bulleted Develop/JavaScript
• · 2019. 4. 18.
• textsms

자바스크립트 - 배열 관련 함수 정리 toString, join, pop, push, shift, unshift

자바스크립트에서는 배열 객체에 사용할 수 있는 다양한 메서드들이 있습니다. 배열 메서드들을 이용하면 많은 기능을 쉽게 구현할 수 있습니다. 1.toString() 배열 안의 값을 콤마를 찍어가며 모두 문자열로 출력합니다. var hero = ['superman', 'batman', 'pororo']; console.log(name.toString()); // "superman,batman,pororo" 2. join() toString() 메서드와 같이 배열안의 값을 문자열로 출력하지만, 특정 구분자를 사이에 넣어줍니다. var hero = ['superman', 'batman', 'pororo']; console.log(hero.join('>')); //"superman>batman>pororo" 3...

• format_list_bulleted Develop/JavaScript
• · 2019. 4. 17.
• textsms

자바스크립트 - 배열 객체 선언 하는 방법 초기화 하기

배열이란 ? Java나 다른 프로그래밍 언어에서의 배열은 같은 자료형의 자료만 담을 수 있지만, 자바스크립트 배열의 다른 자료형의 자료도 담을 수가 있습니다. 배열 만드는 방법 생성자 방법과 객체 방법으로 배열을 만들 수 있습니다. 1. 배열 생성자 방법 var arr = new Array('대한민국', '일본', '중국'); var arr = new Array('대한민국', '일본', '중국'); 2. 배열 객체 방법 var arr = ['대한민국', '일본', '중국']; var arr1 = new Array(1, 2, 3); var arr2 = [1, 2, 3] console.log(arr1.length === arr2.length) //true; console.log(arr1[0]) // 1 co..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 25.
• textsms

자바스크립트 - split 특정 문자를 기준으로 자르기

split 특정 문자를 기준으로 문자열을 잘라 배열에 넣어 return 합니다. 강남구/용산구/마포구 위의 구들을 '/' 기준으로 문자로 잘라서 사용하고 싶을 때 사용합니다. 문법 문자열.split('특정 문자') 사용 예시 var pNum = 010-1111-2222 var arr = pNum.split('-') for(var i=0 i

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 22.
• textsms