에이블디 공식 블로그

#33 자바스크립트(JavaScript) - indexOf

에이블디 — Tue, 28 Jun 2022 09:27:10 +0900

안녕하세요 여러분! 에이블디입니다!

이번 시간에는 배열이나 문자열에서 특정 배열 값이나 문자열과 일치하는 값이있는 첫 주소값(인덱스)을 찾아주는 indexOf에 대해 배워보려 합니다!

indedOf는 배열이나 문자열에서 특정 배열값이나 문자열을 (serchValue) 찾고 검색된 일치하는 값이 있는 첫 번째 주소 값을 반환합니다.

두 가지 방법으로 사용할 수 있는데, 첫째로 indexOf 인수에 찾고자 하는 배열 값이나 문자열은 필수로 입력하셔야 합니다.

두 번째로 포지션 값을 함께 입력할 수 있는데 이 값은 옵션 값으로써 인수에 포지션 값을 입력하지 않으면 기본값은 0이 되는데요 포지션 값은 찾고자 하는 배열 값이나 문자열을 찾기 시작할 위치를 나타내게 됩니다.

indexOf에서는 찾고자 하는 배열이나 문자열이 없으면 -1을 반환하며 데이터를 찾을 때 대소문자를 구분합니다.

그럼 코드를 직접 작성하며 indexOf에 대해 알아볼게요!

이번 시간에도 여김 없이 hyundai 배열을 사용해 보도록 하겠습니다!

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90"];

여기서 두 가지 방법으로 sonata를 찾아볼 텐데요, 첫 번째는 포지션 값을 인수에 주지 않고 sonata를찾는 방법과 두번째는 포지션값을 입력하여 sonata를 찾는 방법입니다.

hyundai.indexOf('sonata');
hyundai.indexOf('sonata', 2);

위의 코드에서 두번째 코드를 보시면 포지션 값을 2로 주었는데요, sonata의 주소값이 1인데 포지션값을 2로 주게되면 어떻게 값을 반환하는지 살펴보도록 하겠습니다!

위의 코드를 실행해 보면

첫 번째 코드에서는 'sonata'의 값이 들어있는 배열의 주소 1을 반환하였고, 두번째 코드에서는 indexOf가 hyundai 배열의 주소값 2부터 'sonata' 데이터를 찾기 때문에 주소값 2 이후의 데이터에 'sonata' 데이터가 없으므로 -1을 반환하는 것을 볼 수 있습니다!

그런데 indexOf는 찾고자 하는 데이터의 첫번째 주소 값을 반환한다고 하였는데요, 'sonata' 데이터를 hyundai 데이터의 가장 끝에 추가해 보고 다시 한번 idexOf를 사용하여 'sonata' 데이터를 찾아보도록 하겠습니다.

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90", "sonata"];

console.log(hyundai.indexOf('sonata'));
console.log(hyundai.indexOf('sonata', 2));

위와 같이 hyundai 배열의 맨 끝에 'sonata' 데이터만 추가한 상태로 코드를 실행해 보겠습니다.

위의 배열에서 'sonata' 데이터는 주소 값 1과 6에 있는데요, 첫번째 코드에서는 'sonata' 데이터의 첫번째 주소값인 1을 반환하였고, 두번째 코드에서는 주소값 2에서 부터 데이터를 찾기 때문에 주소값 2 이후의 첫번째 'sonata'데이터가 있는 주소값 6을 반환하는 것을 볼 수 있습니다!

이번에는 문자열에서 indexOf를 사용해 볼까요?

간단하게 alphabet 변수에 문자열 "ababcdefg" 값을 넣어 선언해 주세요.

var alphabet = "ababcdefg";

그다음, indexOf로 'ab', 'ba', 'AB' 값을 찾아보고, 'ab' 값에 포지션 값 1을 넣어 실행시켜 보겠습니다.

alphabet.indexOf('ab');
alphabet.indexOf('ba');
alphabet.indexOf('AB');
alphabet.indexOf('ab', 1);

코드를 실행해 보면

여러분이 예상한 대로 값이 반환되었나요? 특이점을 보면 indexOf는 대소문자를 구분한다고 이 글의 초반에 말씀드렸었죠? 대문자 'AB'의 값은 alphabet 문자열에 없기 때문에 -1을 반환하는 것을 볼 수 있네요!

이번 시간에는 indexOf에 대해 알아보았습니다! 다음 시간에 또 다른 함수에 대해 알아보도록 할게요!

#32 자바스크립트(JavaScript) - slice

에이블디 — Mon, 27 Jun 2022 14:15:02 +0900

안녕하세요 여러분! 에이블디입니다!

이번 시간에는 지난 시간에 이어 배열에서 사용할 수 있는 함수에 대해 조금 더 알아보도록 하겠습니다!

이번 시간에 배울 함수는 slice함수인데요! slice 함수는 배열의 시작 인덱스와 끝 인덱스를 지정해 그 사이의 데이터를 추출합니다.

지난 시간에 배웠던 splice 함수처럼 slice 함수에서도 배열의 시작 인덱스만 지정할 경우 시작 인덱스부터 배열의 끝까지 데이터를 추출합니다.

그리고 가장 중요한 특징이 있는데요! splice 함수를 사용해서 배열의 데이터를 추출했을 때는 배열이 변경되지만, slice 함수는 배열의 데이터를 추출해도 배열이 변경되지 않는 특징을 가지고 있습니다!

그럼 코드를 직접 작성해 보면서 slice에 대해 알아보도록 할게요!

배열 관련 함수 포스팅에서 계속 사용하던 hyundai 배열을 이번에도 사용해 보겠습니다!

여기서 기존의 데이터에 g70, g80, g90 데이터를 추가로 넣어줄게요!

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90"];

위와 같이 hyundai 배열을 세팅해 주도록 하겠습니다.

여기서 avante, sonata, grandeur 데이터를 slice를 사용하여 추출해 보도록 할게요!

slice 함수를 사용할 때에는 시작 인덱스와 끝 인덱스 두 가지의 인수를 넣어 사용할 수 있는데요, 이렇게 시작 인덱스와 끝 인덱스를 인수로 넣어주면 배열의 시작 인덱스부터 시작해서 끝 인덱스 직전까지 데이터를 추출합니다.

끝 인덱스까지가 아니라 끝 인덱스 직전 까지라는 점 꼭 기억해 주세요!

먼저 시작 인덱스 값 0과 끝 인덱스 값 3을 인수로 넣어주어 avante, sonata, grandeur 데이터들을 추출해 보도록 하겠습니다!

그리고 hyundai 배열을 출력해 볼게요!

hyundai.slice(0, 3);
console.log(hyundai);

코드를 실행해 보면

slice로 0번째 인덱스의 데이터 "avante"부터 3번째 인덱스의 "g70" 직전의 데이터인 "grandeur"까지의 데이터가 추출된 것을 볼 수 있는데, 위에서 언급했던 것처럼 기존의 배열이 변경되지 않은 것을 확인할 수 있습니다.

이번엔 slice로 g70, g80, g90 데이터를 추출해 볼까요?

slice는 기존의 배열의 데이터가 변경되지 않는 특징이 있기 때문에 slice에서 특정 요소를 삭제하는 용도로는 사용할 수 없습니다.

하지만 배열에서 추출한 데이터를 가지고 새로운 배열을 만들어 사용할 때 slice 함수를 사용할 수 있는데요, 이번엔 hyundai 배열에서 위의 세 가지의 데이터를 genesis라는 새로운 배열에 넣어주도록 하겠습니다.

이번에는 slice에 시작 인덱스만 인수로 넣어주어 데이터를 추출해 볼게요!

인수에 시작 인덱스만 넣어주면 시작 인덱스에 있는 데이터부터 배열의 끝 인덱스에 있는 데이터까지 추출한다는 것 잊지 않으셨죠?

코드를 아래와 같이 작성해 봅시다!

var genesis = hyundai.slice(3);

그럼 genesis 배열에 slice로 추출된 g70, g80, g90 데이터가 잘 들어갔는지 확인해봐야겠죠?

기존의 hyundai 배열도 함께 확인해 보도록 해요!

전체 코드는 다음과 같습니다!

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90"];
var genesis = hyundai.slice(3);

console.log(genesis);
console.log(hyundai);

코드를 실행해 보면

genesis 배열에 hyundai 배열에서 slice로 추출한 g70, g80, g90 데이터가 들어가 있는 것을 확인할 수 있고, 기존의 hyundai 배열은 여전히 데이터의 변경이 없는것을 확인 할 수 있습니다.

배열에서 특정 위치의 데이터를 활용한다는 점에서 splice 함수와 slice 함수는 비슷한 기능을 제공합니다.

하지만 slice 함수는 기존의 배열에 영향을 주지 않고, splice 함수는 데이터를 추가하거나 삭제하면 기존의 배열 자체가 수정된다는 차이점이 있지요.

따라서 기존의 배열에서 추출한 데이터를 가지고 새로운 배열을 만들어 사용하려면 slice 함수를, 기존의 배열에서 일부 데이터를 삭제하겠다면 splice 함수를 사용하면 되겠습니다!

#31 자바스크립트(JavaScript) - splice

에이블디 — Fri, 24 Jun 2022 15:49:13 +0900

안녕하세요 여러분! 에이블디입니다!

이번 시간에는 지난 시간에 이어서 함수에서 사용할 수 있는 함수중 하나인 splice에 대해 알아보겠습니다!

지난 시간에 배웠던, push, unshift, pop, shift 함수들은 배열의 맨 앞이나 맨 뒤에 데이터를 추가하거나 추출하는 함수였던 것 기억하시죠?

그렇다면 배열의 중간 부분에 데이터를 추가하거나 삭제하고 싶을 때가 있겠죠?

그리고 2개 이상의 데이터를 추가하거나 삭제하고 싶을 때도 있을 겁니다.

이럴 때 사용하는 것이 splice 함수입니다!

splice 함수는 () 괄호 안에 들어 있는 인수에 따라 일정 구간의 데이터를 삭제하고 새로운 데이터를 추가하는 함수인데요, splice 함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 만들어집니다.

그럼 지금부터 splice에 대해 알아볼까요?

먼저 splice 함수의 ()괄호 안에 인수가 하나인 경우부터 알아보도록 할게요!

괄호 안의 인수는 배열의 인덱스 값을 가리키는데요, 이때 splice 함수는 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제합니다.

코드를 작성하여 실습하면서 학습해 볼게요!

지난 시간에 사용했던 hyundai 배열을 그대로 사용해 보도록 하겠습니다!

var hyundai = ["avante", "sonata", "grandeur"];

위와 같은 hyundai 배열에 splice 함수를 사용해 볼 건데요, splice() 괄호 안에 1이라는 인수를 넣어보도록 하겠습니다.

hyundai.splice(1);

위의 코드는 인덱스가 1인 데이터부터 끝에 있는 데이터까지 모두 삭제해 버리는데요, 배열의 주소 값은 0부터 시작하는 것 잊지 않으셨죠?

그럼 위의 코드를 실행하면 주소 값이 1인 "sonata" 데이터부터 끝에 있는 데이터까지 모두 삭제해 버려 "avante" 데이터만 배열에 남게 되겠죠?

코드를 실행시켜 보겠습니다!

splice로 추출되어 삭제된 데이터는 "sonata"와 "grandeur"이라는 걸 확인할 수 있고, 두 데이터가 삭제되고 난 이후 hyundai 배열에는 "avante" 값만 남아있는걸 확인 할 수 있습니다!

그럼 splice 함수에 인수가 2개일 경우를 알아보도록 할게요!

인수가 2개일 경우 첫 번째 인수는 배열의 인덱스 값이고 두 번째 인수는 삭제할 데이터의 개수입니다.

아래의 코드처럼 정리할 수 있을 것 같아요!

splice(배열의 인덱스 주소, 삭제할 데이터의 갯수);

코드를 작성하여 실습해 볼까요?

아까와 같이 hyundai 배열에 splice함수를 사용해 볼 텐데요, 이번엔 인수를 하나 더 추가해 보도록 하겠습니다!

hyundai.splice(1, 1);

1번째 주소 값에 있는 데이터부터 1개의 데이터를 삭제하라고 요청했으니 "sonata" 데이터만 삭제되겠죠?

바로 코드를 실행시켜 확인해 보도록 할게요!

배열의 1번 주소에 있던 데이터 "sonata"가 추출되었고, "sonata" 데이터가 삭제되고 "avante"와 "grandeur" 데이터만 남아있는 hyundai 배열을 확인할 수 있습니다!

그럼 splice 함수에 인수가 3개일 경우도 알아보도록 하죠!

세 번째 인수부터는 앞서 데이터를 삭제한 위치에 새로 추가할 데이터를 작성해 주시면 됩니다!

직전에 실습한 splice 코드의 세번째 인수에 "sonata N line"이라는 값을 추가해 볼게요!

hyundai.splice(1, 1, "sonata N Line");

코드를 실행해 보면,

"sonata" 데이터가 추출된 자리에 "sonata N Line" 데이터가 추가된 것을 확인할 수 있습니다!

그럼 기존 배열의 데이터를 꼭 삭제해야 다른 데이터를 추가할 수 있을까요?

아닙니다. 기존 배열의 데이터를 삭제하지 않고 새로운 데이터를 추가하고 싶다면 삭제할 개수를 지정하는 두 번째 인수에 0을 넣으면 됩니다.

직전에 실습한 코드의 두 번째 인수를 0으로 수정한 뒤 다시 실행해 볼게요!

hyundai.splice(1, 0, "sonata N Line");

주소 값 1에 기존의 데이터를 삭제하지 않고 새로운 데이터가 추가되어 "sonata N Line" 데이터가 주소값 1에 추가된 것을 확인할 수 있습니다!

그럼 여러 개의 데이터를 추가하고 싶을 때는 어떻게 할까요?

이때는 추가하고 싶은 데이터를 세 번째 인수부터 차례대로 나열하여 작성하면 됩니다!

직전 코드의 세 번째 인수부터 수정하여 여러 개의 데이터를 추가해 보도록 하겠습니다!

hyundai.splice(1, 0, "avante N Line", "avante N", "sonata N Line");

위의 코드를 실행해 보면,

역시 기존의 데이터를 삭제하지 않고 배열 1번 주소부터 "avante N Line", "avante N", "sonata N Line" 데이터가 차례대로 추가된 것을 확인할 수 있습니다!

이번 시간에는 splice 함수에 대해 알아보았습니다!

다음 시간에 또 다른 array에서 사용할 수 있는 함수를 배워보도록 할게요!

#30 자바스크립트(JavaScript) - pop, shift

에이블디 — Thu, 23 Jun 2022 14:31:50 +0900

안녕하세요 여러분! 에이블디입니다!

이번 시간에는 지난 시간에 이어 배열에서 사용할 수 있는 함수에 대해 조금 더 알아보도록 할게요!

코드를 작성하다 보면 배열에 담긴 데이터를 삭제해야 할 일이 생길 때도 있는데요, 이번 시간에는 배열에 담긴 데이터를 삭제할 수 있는 pop과 shift라는 함수에 대해 알아보려고 합니다!

배열에서 맨 뒤에 있는 데이터를 추출할 때는 pop함수를 사용하고요, 배열의 맨 앞에 있는 데이터를 추출할 때는 shift 함수를 사용합니다.

배열에서 데이터를 추출하면 해당 데이터가 배열에서 빠지면서 배열이 수정되기 때문에 배열에서 데이터를 삭제할 때는 추출 함수를 사용합니다.

그럼 간단하게 코드를 직접 짜 보면서 두 함수에 대해 이해해 보도록 할까요?

먼저 pop 함수를 먼저 사용해 보도록 하겠습니다!

지난 시간에서 사용했던 hyundai 배열을 사용하도록 할게요.

그리고 hyundai 배열에 pop을 사용해 보고 결괏값을 확인해 보도록 하겠습니다.

var hyundai = ["avante", "sonata", "grandeur"];
hyundai.pop()

코드를 실행해 보면,

pop으로 추출된 배열의 맨 끝에 있던 "grandeur" 데이터가 추출이 되고, 추출된 이후 "grandeur" 데이터가 삭제되고 "avante"와 "sonata" 데이터만 남은 hyundai 배열이 출력되는 것을 확인할 수 있습니다!

다음은 shift 함수를 사용해 볼게요!

hyundai 배열에 shift함수를 사용하여 코드를 실행해 보면,

var hyundai = ["avante", "sonata", "grandeur"];
hyundai.pop()
hyundai.shift()

hyundai 배열의 맨 앞의 값인 "avante" 데이터가 추출이 되고, 추출된 이후 "avante" 데이터가 삭제되고 "sonata" 데이터만 남은 hyundai 배열이 출력되는 것을 확인 할 수 있습니다!

이번 시간에는 pop과 shift 함수에 대해 알아보았습니다!

다음 시간에 배열에서 사용할 수 있는 함수에 대해 조금 더 알아보도록 할게요!

#29 자바스크립트(JavaScript) - push, unshift

에이블디 — Wed, 22 Jun 2022 10:59:31 +0900

안녕하세요 여러분! 에이블디입니다!

이번 시간에는 지난 시간에 이어 배열에서 사용할 수 있는 함수에 대해 조금 더 알아보도록 하겠습니다!

이번 시간에 배울 함수는 push와 unshift 함수인데요, 코드를 작성하다 보면 기존 배열에 새로운 값을 추가해야 할 상황이 있을 수 있겠죠? 이때 사용할 수 있는 함수들입니다!

push는 기존 배열의 맨 끝에 새로운 값을 추가할 때 사용하고요, unshift는 기존 배열의 맨 앞에 값을 추가할 때 사용할 수 있습니다.

지난 시간에 만들었던 hyundai 배열을 사용하여 push와 unshift 함수를 사용하여 실습해 보도록 하겠습니다!

먼저 push 함수를 사용하여 기존의 hyundai 배열의 맨 끝에 g70, g80, g90을 추가해 보도록 하겠습니다!

코드는 다음과 같습니다.

var hyundai = ["avante", "sonata", "grandeur"];

hyundai.push("g70", "g80", "g90");

hyundai 배열을 콘솔로 실행시켜 보면

기존의 배열 값에 g70, g80, g90 값이 추가된 것을 볼 수 있습니다!

이번엔 unshift 함수를 사용하여 hyundai 배열의 맨 앞에 morning을 추가해 보도록 하겠습니다!

hyundai.unshift("morning");

콘솔로 hyundai 배열을 실행시켜 보면

hyundai 배열 맨 앞에 morning 값이 추가되어 있는 것을 확인할 수 있습니다!

위의 예제들을 보면 이전 시간에서 배운 concat과 join 함수는 원래 배열은 바뀌지 않고 새로운 배열이 만들어졌는데 push와 unshift 함수는 기존의 배열에 변화가 생기는 차이점이 있는 걸 알 수 있습니다!

이번 시간에는 push와 unshift 함수에 대해 알아보았는데요, 다음 시간에는 또 다른 함수에 대해 알아보도록 하겠습니다!

#28 자바스크립트(JavaScript) - concat, join

에이블디 — Tue, 21 Jun 2022 11:54:51 +0900

안녕하세요 여러분! 에이블디 입니다!

이번 시간에는 지난 시간에 이어 Array 객체에서 사용할 수 있는 함수들에 대해 알아보려 해요!

코드를 작성하다 보면 배열에 값을 추가하거나, 삭제하거나, 아니면 배열끼리 값을 합친다던가 하는 등의 상황이 발생하는데요, 이번 시간에는 concat 함수와 join 함수에 대해 알아보겠습니다.

먼저 concat 함수에 대해 알아보도록 하겠습니다!

concat 함수는 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수입니다.

예를 들어 hyundai 배열과 kia 배열이 있을 때 concat 함수를 사용해 두 개의 배열을 합쳐서 새로운 배열을 만들 수 있습니다.

예시 코드는 다음과 같습니다.

var hyundai = ["avante", "sonata", "grandeur"];
var kia = ["k3", "k5", "k7"];

hyundai.concat(kia);

코드를 실행시켜 보면

두 배열의 값이 합쳐져서 하나의 배열로 출력되는 것을 확인할 수 있습니다.

concat 함수를 사용할 때 hyundai 배열과 kia 배열 순서를 바꾸면 연결 순서가 달라집니다.

kia.concat(hyundia);

코드를 실행시켜 보면

위의 코드와 배열의 순서가 바뀌어 출력되는 것을 확인할 수 있습니다!

concat 함수에 사용한 기존의 두 배열은 concat 함수는 새로운 배열을 만드는 것이기 때문에 기존의 hyundai 배열과 kia 배열에 영향을 주지 않습니다.

코드로 직접 실행시켜보면 위와 같이 기존의 배열들은 영향을 받지 않는 것을 확인할 수 있습니다!

다음은 join 함수입니다.

join 함수는 배열 값을 연결하는 함수인데요, 배열 값을 연결해서 나열할 때 각 배열의 값 사이에 넣을 구분 기호가 필요한데, join 함수는 이 기호를 직접 지정할 수 있습니다.

join 함수에서 구분 기호를 지정하지 않으면 자동으로 쉼표(,)로 요소를 구분합니다.

위에서 만든 kia 배열을 사용하여 join 함수를 학습해 보겠습니다!

kia.join()

kia.join("-")

하나는 구분 기호를 지정하지 않고 join 함수를 사용하였고, 다른 하나는 구분 기호 ( - )를 사용하여 join 함수를 사용해 보았습니다.

코드를 실행시켜 보면

구분 기호를 지정하지 않고 join 함수를 사용했을 때는 자동으로 쉼표가 구분 기호로 사용되고, 구분 기호를 지정하여 join 함수를 사용했을 때는 지정한 구분 기호( - )가 적용되어 배열의 값들이 연결되어 출력된 것을 확인할 수 있습니다!

이번 시간에는 concat과 join 함수에 대해 알아보았는데요! 다음 시간에 다른 함수에 대해 더 알아보도록 하겠습니다!

#27 자바스크립트(JavaScript) - Array 객체

에이블디 — Mon, 20 Jun 2022 15:22:22 +0900

안녕하세요 여러분! 에이블디 입니다!

이번 시간에는 지난 시간에 이어 내장 객체 중 하나인 Array(배열) 객체에 대해 알아보도록 하겠습니다!

배열은 자바스크립트에서 자주 사용하는 자료형이기 때문에 자바스크립트 안에 미리 프로토타입 객체로 만들어져 있는데요, 이 안에는 배열에 활용하는 많은 속성과 함수가 미리 정의되어 있습니다.

Array 객체의 인스턴스로 배열을 만들면 Array 객체 안의 함수를 사용할 수 있기 때문에 프로그램 만들기가 한결 편해집니다!

그럼 지금부터 Array 객체에 대해 알아보도록 할게요!

배열에 대해서는 자바스크립트의 #2번 글에서 잠시 다루었었죠?

이때 배열을 왜 써야 하는지도 우리는 배웠습니다!

기억이 나지 않으시는 분은 아래의 글에서 다시 한번 공부하고 와주세요!

https://abled.tistory.com/47

#2 자바스크립트(JavaScript) - 자료형(Data type) : 복합형(배열, 객체)

안녕하세요 여러분! 에이블디입니다! 오늘은 지난 시간에 이어 복합 자료형에 대해 알아보겠습니다! 복합형에는 배열과 객체가 있는데요! 하나하나씩 알아보도록 하겠습니다! 배열은 하나의 변

abled.tistory.com

이전 글에서는 리터럴 표기법을 사용해 배열을 만들어 보았는데요, 이번 시간에는 객체의 인스턴스를 만드는 방법으로 배열을 만들어 보겠습니다!

var arrayObject = new Array();

위의 코드는 Array 객체의 인스턴스를 만든 후 arrayObject 변수에 저장한 코드입니다.

빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기 때문에 arrayObject 배열에 얼마든지 많은 데이터를 저장할 수 있습니다.

초깃값이 있는 배열이라면 리터럴을 사용한 방법으로 배열을 만들 수도 있고, Array 객체를 사용하여 배열을 만들 수도 있습니다.

코드로 표현하면 다음과 같습니다.

var season = ["spring", "summer", "fall", "winter"]; // 리터럴을 사용한 배열

var season = new Array("spring", "summer", "fall", "winter"); // Array 객체를 사용한 배열

이번엔 배열에 있는 값을 한번 출력해 봐야겠죠?

지난 포스팅에서도 해보았지만 다시 한번 해보도록 하겠습니다!

배열에 있는 데이터들을 출력하기 위해선 첫 데이터부터 마지막 데이터까지 반복문으로 반복하여 추출해야 하는데요, 이 배열에 몇 개의 데이터가 있는지 확인하고, 데이터가 들어있는 수를 기준으로 반복문을 사용하여 데이터를 하나하나 추출해 보도록 하겠습니다.

배열에 데이터의 개수를 확인하는 방법은 length라는 속성을 사용하면 되는데요!

다음과 같이 사용하면 됩니다.

var season = ["spring", "summer", "fall", "winter"];
season.length;

콘솔로 동작을 시켜보면 4개의 데이터가 들어있다고 출력하는 것을 확인할 수 있습니다.

지난 포스팅에서 배열의 주소 값은 0부터 시작된다는 것 기억하시죠?

season 배열에 4개의 데이터가 있기 때문에 season[0]부터 season[3]까지의 값을 가져오려면 반복문을 사용해 0부터 3까지 반복하여 주소 값을 추출하면 되겠죠?

이때 반복문을 0부터 시작하여 length값의 -1까지 반복시켜주면 모든 데이터를 추출할 수 있습니다.

코드를 작성하여 각 계절을 출력시켜볼까요?

var season = ["spring", "summer", "fall", "winter"];

for (var i = 0; i < season.length; i++){
	console.log(season[i]);
}

봄, 여름, 가을, 겨울이 각각 출력되는 것을 확인할 수 있습니다!

위의 코드와 같이 배열에서 반복문을 사용해 배열의 데이터에 순서대로 접근하려면 인덱스 값을 0부터 length 값의 -1까지 지정한 다는 것을 알아두세요!

다음 시간부터는 Array 객체의 함수를 알아보도록 하겠습니다!

다음 시간에 만나요!

#26 자바스크립트(JavaScript) - 생성자(Constructor)

에이블디 — Fri, 27 May 2022 19:31:11 +0900

안녕하세요 여러분 에이블디 입니다!

이번 시간에는 생성자를 사용해 객체를 만드는 방법에 대해 알아보겠습니다!

리터럴을 사용해 객체를 만들면 객체를 쉽게 만들 수 있습니다.

그런데 리터럴을 사용해 만든 객체는 정해진 값을 가진 객체를 한 번만 만들게 되는데요, 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다.

하지만 리터럴 객체를 사용하게 되면 매번 객체와 똑같은 속성과 함수를 입력하고 객체마다 그 값을 다르게 넣어 새롭게 객체를 만들어야 합니다.

이럴 때 항상 필요한 속성과 함수는 틀처럼 미리 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 객체의 정보 값을 담아 객체를 만들 수 있습니다.

바로 생성자를 사용해 함수를 만들어 객체를 만들면 되는데요, 생성자를 사용한 함수를 생성자 함수라고 합니다.

생성자 함수란 객체를 만들어 내는 함수를 말하는데요, 이 또한 함수이므로 function 예약어를 사용해 선언합니다.

생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음에 마침표와 속성 이름을 입력합니다.

여기서 this가 가리키는 것은 선언하고 있는 객체 자체인데요, 객체의 속성은 객체에서 사용하는 변수, 객체의 함수는 해당 객체에서 사용하는 함수라고 생각하면 이해하기 쉽습니다.

그리고 생성자 함수는 항상 new 연산자를 붙여 실행하고, 관례적으로 함수 이름의 첫 글자는 대문자로 시작합니다.

자바스크립트 24번 포스팅 프로토타입과 인스턴스에서 작성했던 예제가 생성자 함수를 이용하여 객체를 생성한 예제인데요, 다시 한번 복습한다 생각하고 예제를 보도록 할게요!

24번 포스팅 예제에서는 Car라는 객체를 사용해 세대의 각기 다른 자동차를 만들었지요?

이번에는 Human이라는 객체를 만들어 각각 다른 사람 세명을 만들어 보겠습니다.

먼저 사람에 공통된 속성과 함수를 가지고 있는 Human이라는 객체를 만들어 보겠습니다.

function Human(name, age, sex) {
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.introduce = function() {
        console.log("제 이름은 " + this.name + "이고 나이는 " + this.age + "이며 성별은 " + this.sex + "입니다.");
    }
};

인간이 공통적으로 가질 수 있는 이름, 나이, 성별이란 속성과 자기소개를 하는 함수를 가진 Human 객체를 만들어 보았습니다.

위 코드를 new Human()을 써서 함수를 실행하면 아래와 같이 작동되는데요,

function Human(name, age, sex) {
    // this = {}; - 빈 객체를 만들어 this에 할당.

    // 함수 본문을 실행. this에 새로운 프로퍼티를 추가해 this를 수정.
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.introduce = function() {
        console.log("제 이름은 " + this.name + "이고 나이는 " + this.age + "이며 성별은 " + this.sex + "입니다.");
    }

    // return this; - this가 임시적으로 반환.
};

Human 함수를 이용하여 jayden이라는 사람을 만들어 보겠습니다.

var jayden = new Human("제이든", 18, "남성");

위와 같이 나이는 18세이고 남성인 제이든이라는 사람을 만들었는데요, 위의 코드는 아래의 리터럴을 형식으로 작성한 코드와 동일하게 동작하게 됩니다.

var jayden = {
    name : "제이든",
    age : 18,
    sex : "남성"
};

이런 식으로 jayden 이외에도 new Human()을 사용하여 다른 사람 객체를 손쉽게 만들 수 있게 됩니다.

리터럴 형식으로 일일이 객체를 만드는 것보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있는 거죠!

이렇듯 생성자는 재사용할 수 있는 객체 생성 코드를 구현하는 것에 그 의의를 두고 있습니다.

그리고 모든 함수는 생성자 함수가 될 수 있는데요, new를 붙여 함수를 실행한다면 어떤 함수라도 생성자 함수로 동작하게 됩니다.

그럼 빠르게 두 명의 사람을 더 만들어 볼까요?

var charlie = new Human("찰리", 17, "남성");
var miro = new Human("미로", 17, "여성");

찰리와 미로라는 사람 두 명을 더 만들었습니다!

그럼 각자의 객체 정보가 담겨있는지 확인해 볼까요?

객체마다 서로 다른 정보가 담겨 있는 것을 볼 수 있습니다!

이번 시간에는 생성자 함수에 대해 알아보았습니다!

다음 시간에 자바스크립트에 대해 더 많이 알아보도록 해요!

#25 자바스크립트(JavaScript) - 리터럴(Literal)

에이블디 — Thu, 26 May 2022 12:17:21 +0900

안녕하세요 여러분! 에이블디 입니다!

이번 시간에는 리터럴(Literal)에 대해 알아보겠습니다!

지난 시간에 이어 객체를 생성하는 방법에 대해 더 알아볼 텐데요, 오늘은 리터럴 표기법을 사용해 객체를 만들어보는 방법을 배워볼게요!

리터럴이란 프로그래밍에서 자료를 표기하는 방식을 말하는데요, 자바스크립트뿐만 아니라 프로그래밍 언어 전체에서 사용하는 언어입니다.

리터럴을 사용한다는 것은 변수를 선언하면서 동시에 값을 지정해 주는 방식입니다.

지금까지 우리가 공부하면서도 많이 사용했었는데요, 다음과 같이 변수를 선언하면서 동시에 값을 지정하는 것이 바로 리터럴 표기법입니다.

var number = 1;

그럼 리터럴을 사용해서 객체를 생성한다는 것은 객체를 선언하면서 동시에 값을 지정해 주는 것이겠죠?

리터럴을 사용해 객체를 선언할 때는 중괄호{} 안에 '속성 이름 : 값'을 하나의 쌍으로 지정합니다.

속성이 여러 개일 경우에는 '속성 이름 : 값'의 뒤에 쉼표(,)를 넣어 구분해주면 됩니다.

함수를 선언할 때는 '함수 이름 : function(){}' 형식으로 선언하면 됩니다.

car 객체를 한번 리터럴을 사용해서 생성해 볼까요?

var grandeur = {
    name : "그렌저",
    color : "흰색",
    price : 38000000,
    info : function() {
        console.log(this.name + "의 색상은 " + this.color + "이고 가격은 " + this.price + "원 입니다.");
    }
};

car 객체에 name, color, price라는 속성과 info라는 함수를 넣어서 생성해 보았습니다!

속성 값을 확인하거나 함수를 실행할 때에는 객체 이름 뒤에 마침표(.)를 사용하고 속성 이름이나 함수 이름을 입력하여 실행하면 됩니다.

그럼 car 객체의 속성 값들과 함수를 실행시켜 볼까요?

console.log(car.name);
console.log(car.color);
console.log(car.price);
car.info()

car의 이름은 그렌저이고 색상은 흰색 가격은 38000000이네요!

info 함수도 출력되는 걸 확인할 수 있습니다.

프로그램에서 객체를 만들어 사용하다가 새로운 속성을 추가하고 싶을 때가 있겠죠?

car객체에 연료 정보를 추가하고 싶을 때 다음과 같은 방법으로 속성을 추가하면 됩니다.

car.fuel = "가솔린";

그럼 새로운 속성이 car객체에 추가가 되었는지 확인해 볼까요?

새로운 속성이 잘 추가되었네요!

이번 시간에는 리터럴에 대해 알아보았습니다!

다음 시간에 객체를 생성하는 방법에 대해 더 알아보도록 해요!

#24 자바스크립트(JavaScript) - 프로토타입과 인스턴스

에이블디 — Wed, 25 May 2022 18:26:57 +0900

안녕하세요 에이블디 입니다!

이번 시간에는 프로토타입과 인스턴스에 대해 알아보려고 해요!

여러분 혹시 자바의 클래스라는 개념을 들어보셨나요?

객체지향 언어의 가장 최소 단위가 되는 것이 클래스인데요,

하지만 자바스크립트는 클래스라는 개념이 없습니다. (ES6에서 클래스의 개념이 생기긴 하지만 자바의 클래스와는 조금 성향이 다릅니다. 자바스크립트에서 제공하는 클래스는 일반 함수보다 좀 더 특별한 함수정도로 생각할 수 있겠네요. 자바스크립트의 클래스는 다른 포스팅에서 다루도록 하겠습니다.)

대신 기존의 객체를 복사하여 새로운 객체를 생성하는데요, 자바스크립트에서는 기본 데이터 타입을 제외한 모든 것이 객체입니다.

객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만듭니다.

이때 만들어진 객체 안에 __proto__ 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있는데, 이 숨겨진 링크를 프로토타입이라고 합니다.

위의 개념이 어려우신 분들은 일단 다른 객체의 원형이 되는 객체가 프로토타입이라고 생각하시고 느낌만 가지고 넘어가 주세요!

그래서 자바스크립트를 프로토타입 기반의 언어라고 하는데요, 프로토타입 기반의 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내고, 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다.

이렇게 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해 줍니다.

예를 들어 그렌저, 소나타, 아반떼 세가지 자동차가 있다고 가정할게요.

자동차는 자동차가 가진 공통적인 원형(속성과 기능)이 있습니다.

자동차를 만들때는 자동차 공장에서 각각 자동차에 맞는 공장을 새로 짓는것이 아니라 자동차의 원형이 되는 틀을 만들어서 각 자동차마다 원하는 특징을 넣어 차를 만들게 되는데요, 자동차 공장이 가진 틀을 프로토타입 객체라고 한다면, 자동차 공장에서 틀을 사용해 만들어낸 자동차(객체)를 인스턴스(Instance)라고 합니다.

자동차 공장의 자동차 틀(프로토타입)에서 각각 다른 자동차 세대(인스턴스)를 만들었다 가정했을 때 세대의 자동차(인스턴스)는 모두 자동차 틀 객체의 속성과 함수를 그대로 사용할 수 있습니다.

코드를 보면서 이해해 볼게요!

일단 자동차의 틀을 만들어야겠죠? 자동차가 가진 공통된 틀을 만들어 보겠습니다!

function Car(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

자동차 이름과 색상, 가격 속성을 가지고 있는 자동차의 공통된 틀(객체)을 Car라는 이름으로 하나 만들어 보았어요!

그럼 이 Car를 이용하여 그렌저 차량을 한대 만들어 볼까요?

여기서 Car는 프로토타입의 객체이고, 인스턴스는 그렌저 차량이 되겠죠?

객체의 인스턴스를 만들 때는 new 예약어를 사용하고, new 예약어 뒤에 프로토타입 객체의 이름과 () 소괄호를 작성해 주시면 되는데, 매개변수 넣어줄 인수가 필요할 땐 소괄호 안에 인수를 넣어주시면 됩니다.

그럼 그렌저 차량을 만들어 볼까요?

grandeur = new Car("그렌저", "흰색", 37000000);

3700만원짜리 흰색 그렌저 차량을 Car를 이용해서 만들었습니다!

이번엔 아반떼 한대, 소나타 한대를 더 만들어 볼게요!

sonata = new Car("소나타", "검정색", 28000000);
avante = new Car("아반떼", "파란색", 20000000);

Car를 이용해서 2800만원짜리 검정색 소나타 한대, 2000만원짜리 파란색 아반떼를 한대 만들었어요!

Car라는 동일한 객체를 이용해서 서로 다른 자동차 세대를 만들었는데, 세 가지 자동차 객체들이 각각 고유한 속성을 가지고 있는지 확인해 보도록 하겠습니다!

전체 코드는 다음과 같습니다!

function Car(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
}

grandeur = new Car("그렌저", "흰색", 37000000);
sonata = new Car("소나타", "검정색", 28000000);
avante = new Car("아반떼", "파란색", 20000000);

console.log(grandeur.name);
console.log(sonata.name);
console.log(avante.name);

코드를 실행해 보면!

그렌저, 소나타, 아반떼 세 가지 객체가 각각 고유의 이름(속성)을 가지고 있는 것을 확인할 수 있습니다!

이렇게 자주 쓰는 속성과 함수들을 틀처럼 미리 만들어 두고, 필요할 때마다 틀(프로토타입)을 복제한 인스턴스를 만들어 코드를 재사용할 수 있습니다!

다음 시간에는 객체를 만드는 방법에 대해 조금 더 알아보도록 하겠습니다!

그럼 다음 시간에 만나요!