[JS]JAVA SCRIPT 기초문법

자바 스크립트 기초 문법

 

<자바스크립트란?>

자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다. 보통 웹에서만 사용될 것이다라고 생각할 수 있는데 이제는 앱에서도 자바스크립트가 사용되고 있습니다. 한달간 공부하게 될 '리액트 네이티브'가 자바스크립트를 기반으로 하고 있다고 합니다. 자바스크립트는 크롬 -> 개발자도구(F12)에서 쉽게 코딩할 수 있습니다.  (맥의 경우에는 alt(option) + command + i)

 

<자바스크립트 기초 문법>

-변수 선언하기

가장 기초가 되는 '변수' 선언은 let이나 var 두가지 모두를 사용할 수 있는데, let을 사용하도록 할게요.

let a = 1; // a라는 변수에 1의 값을 저장해주는 역할을 합니다. 

기본적인 사칙 연산이나 문자열 더하기 같은 기능이 가능합니다. 이외에도 const로 변수를 선언해줄 수 있는데, 이때는 값이 고정되어 값을 바꿀수 없기 때문에 앞으로 바꾸지 않을 고정된 값에 사용합니다. 

 

-리스트(배열)

리스트(배열)은 순서를 지켜서 가지고 있는 형태입니다. 리스트도 변수를 선언했던 let을 이용하여 선언해주는데요.

ex) let a_list = ['a', 'b', 'c'] // a, b, c의 문자가 순서대로 a_list에 담겨져있습니다. 리스트의 index는 1부터가 아닌 0으로 시작된다는 것을 주의해야합니다. (0, 1, 2 .....) 리스트에 요소를 추가할때는 push를 사용하고, length를 통해 리스트의 길이를 구할 수 있습니다.

let a_list = ['a', 'b', 'c'] // a, b, c의 문자가 순서대로 a_list에 담겨져있습니다.

//리스트에 요소 넣기
a_list.push('d')
//리스트 길이 구하기
a_list.length // 4

 

-딕셔너리(객체)

딕셔너리는 키(key)-밸류(value) 값의 묶음입니다. 딕셔너리도 let을 이용하여 선언해줍니다.

값을 꺼내기 위해서는 키값에 접근하는데 a_dict['name'] 또는  a_dict.name 처럼 값을 꺼내올 수 있습니다. 

let a_dict = {'name':'lyn','age':21} // a_dict에는 name과 age를 키로 가지는 것이 담겨져있습니다. 

a_dict['name'] // lyn
a_dict.name // lyn

 

-함수

프로그램에서 특정 작업을 여러 번 반복해야 할 때는 해당 작업을 수행하는 함수를 작성하는데요. 프로그램이 필요할 때마다 작성한 함수를 호출하면 해당 작업을 반복해서 수행할 수 있습니다.

// 만들기
function 함수이름(필요한 변수들) {
       내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들); 

 

-조건문과 반복문

조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. if, else if, else의 형태로 이루어져 있습니다. AND연산자(&&) 와 OR연산자(||)를 사용할 수 있습니다.

if( a > 10 ){   ....   } 
else if ( a > 5 ){  ....  }
else { ..... } 

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문입니다. 만약 1 - 100까지 모든 수를 더하는 경우에 반복문을 사용하면 더 빠르게 계산이 가능해진답니다. 

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

 

<앱개발에 자주 사용되는 자바스크립트>

-함수를 더 간결하게! -> 화살표

let a = function() {  // let a = () => 로 더 간결하게 정의 가능!
console.log("function");
} 
a();

 

-딕셔너리 키와 값을 빠르게 꺼내기! -> 비구조 할당

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog; //각각 blog 객체의 owner , getPost() 의 데이터가 할당 /

** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**
//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

 

- 반복문의 또 다른 방식 -> map

리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다. 이를 위해 리스트의 길이 값을 알아야 했습니다. map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줍니다.

//for반복문 사용
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

//map사용
let numbers = [1,2,3,4,5,6,7];
numbers.map((value,i) => { 
	console.log(value,i) 
})

-자바스크립트 파일을 모듈화 -> module system

앱개발에서는 특정한 파일에서 정의한 값, 함수 또는 딕셔너리를 다른 자바스크립트 파일에서 불러 사용할 일이 많아집니다. 이때 사용하는 개념이 모듈 시스템입니다.

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드 이고,

import는 반대로 자바스크립트 파일 안으로 가져오는 키워드 입니다.

 

<1주차 문제>

1. 특정과일 갯수 세기

문제: 배열에서 특정 원소 갯수 구하기 - map 를 함수를 사용해서 해결하기

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;
fruit_list.map((fruit) => {
	if (fruit == '딸기') {
		count += 1;
	}
})
console.log(count);

 

2. 이메일 검사 함수 만들기

문제: 플랫폼에서 이메일로 회원가입 하는 일들이 빈번히 일어납니다. 이때 사용자가 입력한 이메일이 제대로 된 이메일인지 어떻게 알아 낼 수 있을까요? 예컨대 gunhee#gmail.com이라고 썼다면 이메일인지 어떻게 할 수 있을까요?

solution1. indexOf사용하기

function checkEmail(email){
	if(email.indexOf('@') > 0) 
    	console.log("이메일이 맞습니다.");                                               
	else 
    	console.log("이메일이 아닙니다.");
}

checkEmail('0llyynn@gmail.com') // 이메일이 맞습니다
checkEmail('0llyynn$gmail.com') // 이메일이 아닙니다.

 

solution2. 정규표현식 사용하기

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,그리고 String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 .

function checkEmail(email){
    //이메일 정규식
    var emailRule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if(!emailRule.test(email)){
        console.log("이메일이 아닙니다");
    }else{
        console.log("이메일이 맞습니다");
    }
}

checkEmail("0llyynn@gmail.com");
checkEmail("0llyynn1#gmail.com");

정규표현식을 수정하면 .com이 없는 경우도 찾아낼 수 있습니다. 

//도메인에 .com이 없는 경우까지 판별
function email_check( email ) {    
    var regex=/([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return (email != '' && email != 'undefined' && regex.test(email)); 
}