048_자바스크립트 배열(Array) 요소 삭제하기 [적용] 배열 요소를 삭제하고 싶을 때 [문법] 메소드 의미 반환 배열.shift() 배열 첫 위치의 요소를 삭제 삭제된 요소 배열.pop() 배열 마지막 위치의 요소를 삭제 삭제된 요소 [내용] shift()와 pop()은 초기화 이후 배열의 요소를 삭제할 때 사용한다. 각각 배열의 첫 요소와 마지막 요소를 삭제하며, 반환값은 삭제된 요소다. const array1 = ['사과', '귤', '바나나']; const siftedValue = array1.shift(); // 첫 위치의 요소 삭제 console.log(shiftedValue); // 결과: "사과" (삭제된 요소) console.log(array1); // 결과: ["귤", "바나나"] ..

047_자바스크립트 배열 요소 추가하기 [적용] 배열에 요소를 추가하고 싶을 때 요소를 배열의 처음 혹은 마지막 부분에 추가하고 싶을 때 [문법] 메소드 의미 반환 배열.unshift(요소1, 요소2, ...) 배열 첫 위치에 요소를 추가 숫자(요소 전체 개수) 배열.push(요소1, 요소, ...) 배열 마지막 위치에 요소를 추가 숫자(요소 전체 개수) [내용] unshift()와 push()는 초기화 이후 배열에 요소를 추가로 삽입할 때 사용한다. 반환값은 추가된 요소를 포함한 배열 전체 요소의 개수이며, 수의 제한은 없다. const array1 = ['사과', '귤']; array1.unshift('바나나'); // '바나나'를 배열 첫 위치에 추가 console.log(array1); // 결과..

046_자바스크립트 배열(Array) 요소 다루기 [적용 1] 배열 요소의 데이터를 처리하고 싶을 때 [문법] 구문 의미 배열.forEach(콜백함수) 배열의 요소 데이터 콜백 함수로 실행 ([요소*], [인덱스*], [기존배열*]) => { } 요소, 인덱스, 기존 배열을 사용해 처리 * 생략 가능 [내용] 여러 데이터를 다루는 배열은 루프 처리, 반복 처리 등 각 요소를 일괄적으로 처리하는 경우가 많다. forEach()는 주어진 콜백(Callback) 함수를 사용해 배열의 요소를 순서대로 처리한다. 콜백 함수는 해당 요소 데이터, 인덱스, 기존 배열 정보를 가져온다. 콜백 함수에서 인덱스와 기존 배열 정보는 생략할 수 있다. const array = ['딸기', '귤', '사과']; array.fo..

045_자바스크립트 배열(Array) 길이(갯수) 확인하기 [적용] 배열 데이터 요소의 길이(갯수)를 확인하고 싶을 때 특정 JSON 데이터 요소의 수(갯수)를 확인하고 싶을 때 [문법] 속성 의미 반환 배열.length 배열의 길이(갯수)를 반환 숫자 [내용] 배열 요소의 데이터 길이(갯)수를 확인하기 위해서는 length 속성을 이용한다. const array1 = ['곰', '여우', '사자']; console.log(array1.length); // 결과: 3 const array2 = [{ id: 1, name: '사과' }, { id: 2, name: '배' }]; console.log(array2.length); // 결과: 2 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아..

044_자바스크립트 배열(Array) 정의하기 [적용] 배열을 정의하고 싶을 때 배열 데이터의 값을 가져오고 싶을 때 [문법] 구문 의미 [ ] 배열 정의 배열[인덱스] 배열 요소 데이터의 값 가져오기 [내용] 배열은 자바스크립트의 기본 테이터 타입 중 하나로, 다수의 문자열과 유저 데이터 등 복수의 데이터를 다룰 떄 사용한다. [] 안에 데이터를 입력하며, 타입에 상관없이 사용이 가능하다. const array1 = []; // 빈 배열 const array2 = [0, 1, 9]; // '0', '1', '9'가 들어 있는 데이터 타입 cost array3 = ['곰', '여우']; // '곰', '여우'가 들어 있는 데이터 타입 const array4 = [1, '곰', false]; // '1',..

043_자바스크립트 문자열 디코드(Decode) 하기 [적용] 인코딩된 URI 문자열을 디코딩하고 싶을 때 [문법] 메소드 의미 반환 decodeURI(문자열) 문자열을 디코딩 문자열 decodeURIComponent(문자열) 문자열을 디코딩 문자열 [내용] 인코딩된 문자의 복원은 디코딩이 필요하다. (예- '%EA%B0%80'을 디코딩하면 '가'로 변환된다.) 디코딩은 decodeURI()와 docodeURICompoment()를 사용한다. encodeURI()는 decodeURI()를 encodeURIComponent()는 decodeURIComponent()를 사용하여 디코딩한다. decodeURI('http://example.com/%EA%B7%80%EC%97%AC%EC%9A%B4%20%EA%B3..

043_자바스크립트 문자열 URI 이스케이프(Escape) 처리하기 [적용] URI의 한글을 인코딩 할 때 SNS의 한글을 인코딩 후 URL로 변환하고 싶을 때 [문법] 메소드 의미 반환 encodeURI(문자열) 문자열을 인코딩 문자열 encodeURIComponent(문자열) 문자열을 인코딩 문자열 [내용] URI에 한글이 포함되면 그대로 사용할 수 없기 때문에 인코딩이 필요하다. (예- '가'를 인코딩하면 '%EA%B0%80'로 변환된다.) 인코딩을 위한 메소드는 두 종류가 있으며, 대상이 되는 문자가 각각 다르다. encodeURI()와 encodeURIComponent()는 문자열 인코딩을 위한 메스드로 숫자, -, _, ., !, ~, *, ', (,)는 이스케이프(Escape) 처리되어 인코..

041_자바스크립트 문자열 길이 맞추기 [적용] 10 미만의 숫자 앞에 0을 붙여 두 자리 형식을 만들고 싶을 때 [문법] 메소드 의미 반환 문자열.padStart(전체길아, [추가문자열*] 문자열 시작 부분에 문자열 추가 문자열 문자열.padEnd(전체길이, [추가문자열*]) 문자열 끝 부분에 문자열 추가 문자열 * 생략 가능 [내용] padStart(), padEnd() 는 문자열이 지정한 길이가 될 때까지 작업을 반복한다. '5'.padStart(2, '0'); // 05 'ff'padEnd(6, '0'); // ff0000 지정한 길이가 실제 문자열보다 짧은 경우 문자열 변환은 이루어지지 않는다. 인수에 추가 문자열을 생략하면 공백이 입력된다. '123'.padStart(3, '0'); // 12..

040_자바스크립트 소수점 자리수 지정하기 [적용] 숫자 3.14159265를 문자열 '3.14'로 변환하고 싶을 때 숫자 10을 문자열 '10.00'으로 변환하고 싶을 때 [문법] 메소드 의미 반환 숫자값.toFixed([자리수*]) 소수점 이하 자리수 지정 문자열 숫자값.toPrecision([자리수*]) 자리수 지정 정밀도 반환 문자열 * 생략시 0 [내용] toFixed()는 소수점의 자릿수 지정이 가능하며, 소수점 이하는 지정된 자릿수 변환 후 문자열로 반환한다. (0.33333).toFixed(2); // 0.33(문자열) 소수점 이하의 자리수가 줄어들 경우 값을 근사치로 변환한다. (123.5678).toFixed(1); // 123.6(근사치로 변환) 소수점 이하의 자리수가 늘어날 경우 0..

039_자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 떄 [문법] 메소드 의미 반환 /패턴/.test(문자열) 문자열과 패턴의 일치 여부 확인 진리값 [내용] 정규 표현의 test() 메소드를 사용해 문자열과 패턴의 일치 여부를 확인한다. /J/.test('JavaScript'); // 'J'가 'JavaScript'에 포함되어 있는지 여부. true /^iP/.test(iPhone'); // 'iPhone'의 시작 문자가 'iP'인지 여부. true /\d/.test('래시피'); // '래시피' 문자열 내 숫자 포함 여부. false /Java.*/.test('JavaScript'); // 'Jav' 다음의 문자 'a'가 0회 이상 ..