혼공학습단 3주차. 이번 주에는 배열, 파괴적 처리와 비파괴적 처리, 반복문 에 대해서 공부하였다.
배열(Array)
배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열은 대괄호[ ... ]를 사용하여 생성하고 내부의 값은 쉼표( , )를 구분하여 입력한다. 이때 배열 내부의 들어있는 값을 요소(element)라고 하며, 어떠한 종류의 자료형도 요소가 될 수 있다. 다음과 같이 입력하게 간단하게 배열을 만들고 출력할 수 있다.
const array = [ "choonsik", 2022, true, function() {}, {} ]
array
(5) ['choonsik', 2022, true, ƒ, {…}]
다음과 같은 배열에서 맨 앞의 ( 5 )는 요소의 갯수가 되며 'choonsik', 2022, true, ƒ, {…} 등은 배열의 요소라고 볼 수 있다.
배열 요소에 접근하기
배열의 기본적인 조작은 문자열과 비슷하지만 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호[ ... ]를 입력하고 그 안에 숫자를 넣어 작성한다. 이때 요소의 순서를 인덱스(index)라고 부른다.
배열[인덱스]
const KAKAOFRIENDS = [ "Choonsik", "Ryan", "Frodo", "Apeach", "Con" ]
KAKAOFRIENDS[0]
'Choonsik'
KAKAOFRIENDS[1]
'Ryan'
자바스크립트는 가장 앞에 있는 요소를 0번째로 표현하기때문에 제일 첫 번째의 "Choonsik"에 접근하기 위해서는 0으로 표현해야한다.
배열에 요소 추가하고 제거하기
1. 배열의 뒷부분에 요소를 추가하기
배열.push(요소)
const array = [ "a", "b", "c"]
array.push("d")
array = [ "a", "b", "c", "d"]
1 - 1. 인덱스를 사용하여 배열에 요소를 추가하기
const array = ["a", "b", "c"]
array[5] = "f"
'f'
array
(6) ['a', 'b', 'c', empty × 2, 'f']
array[1] = "z"
'z'
array
(6) ['a', 'z', 'c', empty × 2, 'f']
2. 배열의 앞부분에 요소를 추가하기
const array = [ "a", "b", "c"]
array.unshift("z")
array = [ "z", "a", "b", "c"]
3. 배열의 요소 제거하기
배열.splice( 인덱스, 제거할 요소의 개수)
const array = ["a", "b", "c"]
array.splice( 2, 1)
['c']
array
(2) ['a', 'b']
혼공학습단 7기 혼공 JS 3주차 기본미션
비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
자료의 비파괴와 파괴
자바스크립트는 자료 처리르 위해 다양한 연산자, 함수, 메소드를 제공한다. 이 중 메소드는 크게 비파괴적 처리와, 파괴적 처리로 구분할 수 있다. 각각은 처리후 원본의 상태 변화에 따라 구분한다.
1. 비파괴적 처리 : 처리 후에 원본 내용이 변경되지않는다.
const a = "안녕"
const b = "하세요"
const c = a + b
c
"안녕하세요"
a
"안녕"
b
"하세요"
2. 파괴적 처리 : 처리 후에 원본내용이 변경된다.
const array = [ "a", "b", "c" ]
array.push("d")
array
(4) [ "a", "b", "c", "d" ]
배열과 같이 거대해 질 수 있는 자료는 메모리를 절약할 수 있게 대부분 ‘파괴적 처리’로 이루어졌지만 파괴적 처리는 메모리를 절약할 수는 있지만 원본이 변경되기 때문에 위험할수 있다. 메모리가 여유로운 현대의 프로그래밍언어와 라이브러리는 자료 보호를 위해 대부분 비파괴적 처리를 한다. 또한 초기에 표준화된 것들은 파괴적 처리를 많이 했으나, 최근 표준화된 것들은 비파괴적 처리를 많이 한다.
혼공학습단 7기 혼공 JS 3주차 선택미션
p.173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기
1, 3, 4 : 메소드 처리 후 원본 내용이 변경되지않았으므로 비파괴적 처리에 해당한다.
2 : 메소드 처리후 원본 내용에 "감" 이라는 요소가 추가되어 변경되었으므로 파괴적 처리에 해당한다.
#한빛미디어 #혼공학습단 #혼공단 #혼자공부하는자바스크립트 #혼공JS
