050_자바스크립트 배열(Array) 결합하기(합치기), 문자열 만들기 [적용] 여러개의 배열을 하나로 결합하고 싶을 때 배열 내 요소의 문자 데이터를 결합하고 싶을 때 [문법] 구문 의미 배열1.concat(배열2, 배열3, ...) 배열1에 배열2, 배열3을 결합 [...배열1, ...배열2, ...배열3] 배열1에 배열2, 배열3을 결합 메소드 의미 반환 배열.join([결합문자열*]) 배열 요소를 결합해 문자열 만들기 문자열 * 생략가능 [배열 요소 결합하기] 여러 개의 배열을 하나의 배열로 결합할 수 있다. concat()을 사용해 인수의 배열을 결합하며, 결합하는 배열의 수는 제한이 없다. 인수의 배열은 결합한 후에도 삭제되지 않는다. const array1 = ['곰', '사자']; cons..

049_자바스크립트 배열(Array) 요소 부분(지정위치) 변환(삭제, 추가)하기 [적용] 배열 내 요소를 다른 요소로 변환하고 싶을 때 [문법] 메소드 의미 반환 배열.splice(위치, 추출개수, 요소1, 요소2, ...) 지정 위치 요소 추출, 요소 추가 배열 [내용] splice()는 지정한 위치의 요소를 추출하고 새로운 요소를 추가한다. 위치를 지정하여 요소를 추가하고 싶을 때 유용하다. const array1 = ['사과', '귤']; array1.splice(1, 0, '바나나'); // 인덱스 1의 위치에서 0개의 요소를 삭제하고 '바나나'를 추가함 console.log(array1); // 결과: ['사과', '바나나', '귤'] const array2 = ['사과', '귤']; arra..

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..