Web 프론트엔드 (7) / JavaScript 자바스크립트 기초 문법2

 

계속해서 자바스크립트의 기본 문법을 공부해보자.

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

 

 

CHAPTER4 : 만능 언어 자바스크립트, JS

 

[ 3. JS 기본 문법 시간 2 - 조건문, 반복문 ]

 

지난 포스팅에서 객체와 배열을 함께 사용하는 경우가 많다고 했었다.

조건문과 반복문에 들어가기 전에 실제로 어떤 식으로 혼합되어 사용되는지,

그리고 특정 데이터에는 어떻게 접근할 수 있는지 확인해보자.

 

 

 

 

구조가 복잡해보이지만, html파일 콘솔에서 열어보면 정돈된 값들을 확인할 수 있다.

 

 

 

length로 배열의 크기도 나온다.

 

 

 

 

그렇다면 만약 results속 vote_count값 그리고 genre_ids의 마지막 인덱스값만 출력하고 싶으면 어떻게 해야할까?

아래와 같은 코드로 접근이 가능하다.

 

 

 

객체안의 값에 접근할 때는 . 

배열의 인덱스에 접근할때는 [ ]을 이용하면 된다.

또한 배열 안에있는 객체의 값에 접근할 때에는 results[0].vote_count처럼 천천히 순서에 따라 접근하면 된다.

 

 

 

값이 잘 출력되는것을 볼 수 있다.

 

 

실제로 개발을 진행하다보면 이런 형태의 데이터 구조를 자주 만나게 될 것이라고 한다.

그럴때마다 어떤 순서로 들어가 정확히 데이터에 접근할지 살펴보아야 한다.

 

 

 

 

* 참고로 주석 처리를 원하는 부분을 드래그 한 뒤 Cmd+/ (윈도우는 Ctrl+/)하면 자동 주석처리 된다.

주석을 지우고 싶다면 똑같이 한번 더 반복하면 된다.

 

 

 

 

 

1. 반복문 for

반복문은 다른 언어와 큰 차이가 없다. 

변수 선언만 let으로 해주고 나머지는 그대로 가져간다.

 

 

주의할 점은 자바스크립트에서 원래 코드 끝단에는 ; (세미콜론)을 쓰지 않아도 무관하지만

for (let i = 0; i < arr_for.length; i++)에서는 ;을 반드시 적어야 한다.

 

 

 

 

 

 

2. 조건문 if-else

방금 만든 for문에서 if 조건문을 추가해보자.

 

 

 

조건에는 같은 값인지 확인하는 ==

여러개의 조건을 만족하는지 확인하는 &&

여러개의 조건들중 하나만 만족해도 실행하는 ||

연산자들 모두 그대로 사용할 수 있다.

 

 

 

 

 

 

 

[ 4. JS 기본 문법 시간 3 - 함수, 유용한 제공 함수들 ]

 

함수는 크게 두개로 나뉜다.

(1) return으로 값을 반환하는 함수

(2) 안에 내용만 실행하고 아무것도 반환하지 않는 함수

 

함수의 기본 선언 방법은 다음과 같으며, 필요에 따라 파라미터 값, return 명령어 등을 채워주면 된다.

 

function func (  ) {

 

}

 

예시를 통해 실제로 어떻게 작동하는지 살펴보자.

 

 

 

 

다른 언어와의 차이점은 함수를 선언시 return값의 타입과, 파라미터의 타입을 적어주지 않아도 된다는 것이다.

그 외에 기본 사용 방법은 모두 비슷하다.

 

 

 

 

 

 

 

직접 모든 함수들을 만들어 사용할 수도 있지만,

이미 유용한 함수들이 만들어져 있어 그것들을 가져다 쓰는 것이 굉장히 편리하다.

String 타입에서 사용 가능한 대표적인 제공 함수들을 몇개 배워보았다.

 

 

출력값

 

 

str.split("-")

split은 인자값으로 문자열을 나눠 배열에 담는  역할을 한다.

 

str.join("+")

join은 여러개의 문자들을 인자값을 이음새로 하나의 문자열로 뭉쳐준다.

 

str.indexOf("바")

인자 속 문자를 해당 문자열에서 아 몇번째 값인지 출력해준다.

만약 존재하지 않는다면 -1이 출력된다. 

*indexOf의 경우 string에서만 사용할 수 있는 것은 아니다. 다른 타입의 배열에서도 사용이 가능하다

 

 

 

 

 

 

 

 

 

 

 

 

이것으로 javaScript의 기본 문법을 살펴보는 시간이 끝났다.

물론 이것이 전부는 아니지만 다른 문법들은 직접 프로젝트를 만들며 익히는 것이 좋을 것 같다!

지금은 html 코드와는 별개의 자바스크립트의 기본적인 내용들을 배웠다.

다음 시간부터는 html과 연결해보는 내용이 계속될 것 같다.

 

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교