[JS] 자바스크립트 정리 (2)

1. 자바스크립트의 함수

함수의 선언 : 함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.

파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 

만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined 이라는 값을 갖게 된다.  

function sample() { 
	console.log("나 호출!!!") 
} 

sample(); 

// 더하기 함수를 만들어보자. 
function Add(a,b) { 
	console.log(a+b) 
} 

Add(3,6);

 

함수의 표현식

function printName(firstname) {
	var inner = function() {
		return "inner";
	}

	var result = inner();
	console.log("name is " + result);
}

printName();

inner 가 바로 함수 표현식 이다. 

만약, 결과 출력 코드와 표현식 함수를 순서를 뒤바꿔서 사용하면 undefined 오류가 난다.

위의 결과는 name is inner 라고 출력된다.

 

 

 

2. 자바스크립트의 배열

자바스크립트 배열의 선언

var a = [];
//배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음.
var a = [1,2,3,"hello", null, true, []];

new Array() 문으로 선언할 수도 있지만, 보통은 간단히 '[]' 를 사용한다.

배열에는 length 속성이 있어 그 길이를 쉽게 알 수 있다.

배열에 원소 추가는 index번호와 함께 추가할 수 있다.

 

배열은 push메서드를 통해서 뒤에 순차적으로 추가할 수 있다

var a = [4];
a.push(5);
console.log(a.length);

 

배열의 유용한 메서드들 : indexOf, join, slice,concat 의 활용

//배열의 원소에 특정 값이 들어 있는지 확인할 수 있다.
[1,2,3,4].indexOf(3) //2

//배열의 문자열로 합칠 수 있다.
[1,2,3,4].join(); //"1,2,3,4" 

//배열을 합칠 수 있다.
[1,2,3,4].concat(2,3);  //[1,2,3,4,2,3]

//origin과 changed는 같은 배열원소를 가지고 있지만, 두 개가 가리키는 메모리 주소는 다르다.
//즉 reference가 다르다고 할 수 있다. 
var origin = [1,2,3,4];
var changed = origin.concat();  //[1,2,3,4]
console.log(origin === changed);  //[1, 2, 3, 4] [1, 2, 3, 4] false

 

배열의 탐색 : (foreach,map, filter)

배열의 순회는 for 문을 사용하거나, forEach와 같은 메서드를 통해서 할 수 있다.

 

forEach를 통한 배열 탐색

//forEach는 함수를 인자로 받고 있어요.
["apple","tomato"].forEach(function(value) {
   console.log(value)
});

새로운 배열을 반환하는 map메서드

var newArr = ["apple","tomato"].map(function(value, index) {
   return index + "번째 과일은 " + value + "입니다";
});
console.log(newArr)

 

- 더 공부하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

https://www.w3schools.com/jsref/jsref_obj_array.asp

 

 

3. 자바스크립트의 객체

key, value 구조의 자료구조이다.

JavaScript로 데이터를 표현하기 위해서는 Array, Object를 사용한다.

Object형태는 {}로 그 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할 때 Object포맷과 비슷한 방법으로 데이터를 보낸다.

 

 

객체 선언

var person = { 
	name = "roel", 
	age = 20, 
	introduce = function() { 
		console.log('안녕!'); 
	} 
}; 

person.name; // roel 
person.age; // 20 
person.introduce(); // 안녕!

 

객체 추가 / 삭제

const myFriend = { key : "value", key2 : "value" };
console.log(myFriend);

// 객체 속성 추가
myFriend["name"] = "roel";
console.log(myFriend["name"]);

myFriend.age = 21;
console.log(myFriend.age);

// 객체 속성 삭제
delete myFriend.key;
delete myFriend["key2"];
console.log(myFriend);

 

객체 탐색

for- in 구문을 사용한 방법

var obj = {"name":"cocos" , age :22, data: [1,2,3,4,5]};

for(value in obj) {
  console.log(obj[value]);
}

//  Object.keys()를 이용한 후 forEach로 탐색하는 방법

var obj = { "name" : "cocos" , age : 22, data : [1,2,3,4,5] };

Object.keys(obj).forEach(function(key) {
	console.log(obj[key]);
});