Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Archives
Today
Total
관리 메뉴

현우의 개발상자

멋쟁이사자 FE7 30일차 본문

멋쟁이사자 FE7

멋쟁이사자 FE7 30일차

FrontEnd 개발자 준비생 최현우 2023. 8. 21. 23:05
728x90

JS

push()

원본 배열의 마지막 요소 다음에 새로운 요소를 추가하고, 그 배열의 새 길이를 반환한다.

reverse()

배열의 요소들을 역순으로 뒤집어주는 역할을 한다. 즉, 배열의 첫 번째 요소가 마지막으로, 두 번째 요소가 마지막의 바로 뒤 자리로, 그리고 마지막 요소가 첫 번째로 옮겨진다.

// 원래 배열
let fruits = ['apple', 'banana', 'cherry', 'date'];

// reverse() 메서드 사용
fruits.reverse();

console.log(fruits); // 출력: ['date', 'cherry', 'banana', 'apple']

join()

배열의 모든 요소들을 하나의 문자열로 결합하는 역할을 한다. 이때 각 요소들은 구분자(separator)로 구분되어 결합된다.

let colors = ['red', 'green', 'blue'];

// join() 메서드 사용
let colorString = colors.join('-');

console.log(colorString); // 출력: "red-green-blue"


let numbers = [1, 2, 3, 4, 5];

// join() 메서드 사용
let numberString = numbers.join(' + ');

console.log(numberString); // 출력: "1 + 2 + 3 + 4 + 5"


let words = ['Hello', 'world'];

// join() 메서드 사용
let greeting = words.join(' ');

console.log(greeting); // 출력: "Hello world"

Object.assign()

객체를 병합(merge)할 때 사용되는 메서드이다.

 

쉽게 설명하자면,

Object.assign()은 빈 상자에 다른 상자의 물건들을 넣는 것과 비슷하다. 첫 번째 상자는 "타겟(target)"이라고 하고, 나머지 상자들은 "출처(source)"라고 한다.

타겟(target): 빈 상자. 여기에 출처(source) 상자들의 물건을 넣는다.
출처(source): 물건이 들어 있는 상자들. 이 물건들을 타겟 상자에 넣는다.
하지만, 만약 출처(source) 상자들 중에 같은 이름의 물건이 있다면, 나중에 들어온 출처(source) 상자의 물건이 먼저 들어온 출처(source) 상자의 물건을 덮어씌울 수 있다.

// 타겟 객체
var target1 = {};
var target2 = {};

// 출처 객체
var source1 = { a: 1 };
var source2 = { b: 2 };

// 출처 객체
var source3 = { a: 3, b: 4 };
var source4 = { b: 5, c: 6 };

// Object.assign()을 사용하여 병합
Object.assign(target1, source1, source2);
Object.assign(target2, source3, source4);

// 출력
console.log(target1); // { a: 1, b: 2 }
console.log(target2); // { a: 3, b: 5, c: 6 }

추가적으로, Object.assign()은 병합뿐만 아니라 객체를 복사하는 데에도 사용할 수 있다. 객체를 복사하려면 첫 번째 인자로 빈 객체를 사용하면 된다.

// 원본 객체
var original = { a: 1, b: 2 };

// 객체 복사
var copy = Object.assign({}, original);

console.log(copy); // 출력: { a: 1, b: 2 }

'멋쟁이사자 FE7' 카테고리의 다른 글

멋쟁이사자 FE7 33일차 (8월 회고)  (2) 2023.08.26
멋쟁이사자 FE7 32일차  (0) 2023.08.24
멋쟁이사자 FE7 29일차  (0) 2023.08.17
멋쟁이사자 FE7 28일차  (0) 2023.08.17
멋쟁이사자 FE7 27일차  (0) 2023.08.10