javascript 공부하기

🎈 Javascript 개요

- javascript는 웹 개발에 쓰이는 프로그래밍 언어로, java, pyhton 등과 달리 웹 브라우저에서 동작된다.

- 현재는 서버, 게임 개발 등 다양한 분야에서 사용되고 있다

 

🎈 Chrome의 개발자 도구

- 맥 : Cmd+Oprion+I, 윈도우 : Ctrl+Shift+F12

- Elements : HTML, CSS를 보고 수정할 수 있다

- Console : javascript 코드를 실행하고 결과를 볼 수 있다

- Network : 브라우저가 네트워크 통신하는 내역들을 볼 수 있다.

 

🎈 기본 로그 함수

- console.log('로그 내용');

- ; 는 안붙여도 상관 없으나 코드를 마무리한다는 의미가 있다

 

🎈 변수

- 변수는 데이터를 담는 공간이다

- 변수 선언 : 어떤 변수를 사용할 지 정하는 작업

- 변수 정의 : 선언된 변수에 값을 넣는 작업

- 변수명 : 영문+숫자로 지어야 하며, 띄어쓰기와 특수문자가 불가능하다

var name;  //name이라는 변수를 선언한다.
name = "그랩"; //name이라고 선언된 변수에 "그랩"이라는 값을 저장한다.

var name = "그랩"; //합쳐서 이렇게 사용할 수 있어요.

//var, let, const 차이 
//1. var는 같은 이름의 변수를 다시 사용할 수 있어요. 요새는 var를 사용하지 않고 let, const만 사용하는 추세에요.
var num1 = 20;
var num1 = 'Bob';

//2. let은 한번 선언된 변수에 다시 새롭게 선언할 수 없어요. 
let num2 = 20;
num2 = "hello";
let num2 = 'Bob'; // <- 에러!

//3. const는 선언된 변수에 새로운 값을 정의할 수 없어요. 변수 값이 더이상 변경되지 않도록 할때 사용해요
const num3 = 30;
num3 = 'Bob'; // <- 에러!

- var : 같은 이름의 변수 다시 사용 가능

- let : 재선언은 불가능하나, 재정의는 가능

- const : 재선언, 재정의 모두 불가능

 

🎈 자료형

- 데이터의 종류를 의미한다

 

1. 기본 자료형 (Primitive Type)

- string(문자), number(숫자), boolean(참/거짓 여부)

- null : 값이 없을 때, undefined : 변수를 선언만 하고 정의하지 않은 상태일 때

- typeof : 변수의 자료형을 확인하는 문법

 

var name; //undefined
name = "그랩" //string (문자)
var age = 27; //number (숫자)
var isFool = false; //boolean (true/false)
var nully = null; //null 

// typeof 확인 문법
console.log(typeof name) //string 출력

 

2. array(배열)

- 실제로 array는 object(객체)의 종류 중 하나로 object 자료형이다.

- array는 배열 혹은 리스트(list)라고 불리며, 데이터를 순차적으로 담도록 도와준다

- 배열 사용 시엔 [ ] (Bracket)을 이용한다

- 배열 길이 : .length

- 배열 값 조회 : 배열 [순서 번호]

- 배열에 새로운 값 추가 : 배열.push(값)

var productNames = ['농구공', '단백질 보충제'] //array 자료형 []
var productIds = [10,20]; //array 안에는 모든 자료형을 넣을 수 있습니다.
var productNestArray = [[0,1,2],[3,4,5]] //array안에 array도 가능하죠.

//productNames의 길이를 알고 싶다면? 
var length = productNames.length

//productNames의 첫번째 인자의 값에 접근하고 싶다면?
var firstValue = productNames[0]; //프로그래밍 세계에서 1번째는 숫자 0부터 시작해요.
var secondValue = productNames[1];

//productNames에 새로운 값을 추가하고 싶다면?
productNames[2] = '노션 글'; //array의 3번째에 값을 넣습니다. 선호하지는 않는 방식입니다.
articleNames.push('노션 글') //array의 마지막에 '노션 글' 값을 넣습니다. array에 값 추가할 때 선호하는 방식입니다.

 

3. 객체(object)

- 자료들을 key, value 형태로 저장하는 자료형

- 중괄호 { } 안에 key, value를 순차적으로 넣는다

 

//객체 형태
{ 
	key1 : value1,
	key2 : value2,
}

//실제 객체 사용
var product = {
    title: '농구공',
    description: '농구의 황제 조던이 사용했던 농구공입니다',
		price : 50000
}

// product의 name 값을 얻고 싶다면?
var productName = product['name']; //array에서 값을 가져오는 방식처럼 안에 key값을 넣습니다.
var productDescription = product.description //객체.key 로 접근할 수도 있습니다.

//product에 새로운 값을 추가, 변경하고 싶다면?
product['name'] = '축구공'; //값 변경1
product.name = '축구공'; //값 변경2
product['seller'] = '그랩'; //값 추가1
product.seller = '그랩'; //값 추가2

 

🎈 연산자

- 연산자는 변수들을 가공할 수 있도록 도와주는 역할을 한다

- 기본 연산자(+, -), 비교 연산자, 논리 연산자 가 있다

 

1. 기본 연산자

- +, -, *, /

- 문자와 숫자를 더하면 문자가 된다

 

2. 비교 연산자

- >, <, <=, >=, ===, !===

- 비교 연산자를 거치면 boolean 값을 반환 받는다

 

3. 부정 연산자

- ! : true, false를 서로 변환시켜 준다

 

4. 논리 연산자

- 논리 연산자는 다른 연산자들의 실행을 논리적으로 제어하는 연산자이다

- || (OR), && (AND)

 

 

🎈 조건문

- 조건문은 조건에 따라서 로직을 다르게 수행하도록 돕는다

- 기본적으로 if가 사용된다 : true일 떄는 로직을 수행, false/null/0/""/undefined일 때는 로직을 수행하지 않음

- else if, else 로 아닐 경우의 처리도 가능하다

 

🎈 함수

- 함수는 작업을 수행하는 코드들을 정의하는 코드 블록이다

- 함수를 선언하는 방식에는 선언식과 표현식이 있다

// 함수 선언식
function sayHello(){ 
	console.log("say Hello!");
}

// 함수 표현식
const sayHello = function (){
	console.log("say Hello!");	
}

- 함수의 실행은 ( ) 소괄호를 붙이면 된다

- 함수는 한 번 만들고 재사용이 가능하기에 코드를 깔끔하게 관리할 수 있다

// 함수 실행
sayHello();

 

- 함수의 ( ) 내부에 입력값을 넣을 수도 있는데 이는 인자 / 파라미터 라고 한다

- 함수의 인자를 활용하면 함수를 더 확장성 있게 사용 가능하다

- 함수의 인자명은 문자 + 숫자 형태로 자유롭게 적을 수 있다

var getAge = function(name, age) { //파라미터는 여러 개 넣어도 됩니다.
   console.log(name + '은 ' + age + '살입니다.');
}
getAge('그랩',27); //그랩은 27살입니다.

 

- return : 함수의 값 반환

- string, number, 배열, 객체, 함수 등 모든 자료형을 return이 가능하다

- return은 함수를 종료시키는 구문이기도 하다

   var result = 3 * x + 5;
				return result;
     }
     var value1 = calculate(5); //calculate를 호출하면 20의 결과값을 반환합니다.
     var value2 = calculate(10); //calculate를 호출하면 35의 결과값을 반환합니다.
		 console.log(value1);
		 console.log(value2);
		 
		 //입력한 파라미터를 profile 객체로 만들어주는 함수			
     function getProfile(profile_name, profile_age) { 
				return { //여기선 객체를 return해요.
					name : profile_name,
					age : profile_age
				}
     }
		 var profile = getProfile('래리',27); //name, age를 key로 가지는 객체를 받습니다.
		 console.log(profile.name) //래리가 출력된다.

 

🎈 함수에서 주의할 점

1. 함수 안에 선언된 변수는 밖에서 사용이 불가능하다

2. 함수 밖에서 선언된 변수는 함수 { } 안에서 사용이 가능하다

 

🎈 반복문

- 반복문은 코드를 반복적으로 실행시켜 준다

- 반복문은 Array와 찰떡 궁합이다! 🍡

// 기본 반복문
// 첫번 째 변수를 선언한 후
// 두번 째 조건이 false가 되기 전까지 코드를 실행해라
// 세번 째 i++ 는 i를 1씩 더해라
for(var i = 0; i < 10; i++){
	console.log("나는 그랩이다"); //총 10번 호출이 됩니다.
}

- 배열의 값들을 순차적으로 조화하기 위해 반복문이 많이 사용되는데, 배열을 반복시키는 함수로 forEach와  map이 있다

articles.forEach(function (article, index) { //첫번째 파라미터에는 값, 두번째 파라미터에는 순서(index)가 들어간다.
         console.log((index + 1) + '번째 호출');
         console.log(article);
})
articles.map((article, index) => { //map함수는 return을 사용할 수 있다.
     console.log((index + 1) + '번째 호출');
     return article.name;
});
var articleNames = articles.map((article, index) => { //articleNames은 각 article들의 name이 들어간 배열이다
     console.log((index + 1) + '번째 호출');
     return article.name;
});

var articleElements = articles.map((article,index) =>{ //React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시합니다.
	return (
		<div>
			<span>{article.name}</span>
			...
		</div>
	)
})