[JavaScript] 함수, 배열, 객체

Choi Rim·2021년 6월 9일
0

JavaScript

목록 보기
3/3
post-thumbnail

함수 (function)

  • 하나의 반복적으로 실행되는 일을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여줌.
  • 함수 사용 시 유지 보수가 용이
const a = 1;
const b = 2;
const result = a + b;
document.write(a + b);

위 식을 함수로 바꾸면 밑의 식이 됩니다.

function add (a, b) {
 document.write(a + b);
}
  • function 이름은 간결한 동사로!
  • 함수의 인자는 외부에서 받은 값을 접근가능하게 함

1. 함수의 호출

function add (a, b) {
 document.write(a + b);
}

add(1, 2);

3

함수를 호출하고 인수를 부여하면 인수가 인자로 들어가 함수에 접근하게 된다.

2. 함수의 입출력

function fruits() {
return 'banana';
return 'apple';
return 'grape'
}
document.write(fruits());

banana

  • return 실행 시 함수를 종료시킨다.
  • return 값을 함수의 출력값으로 반환하게 된다.
  • 3개의 리턴 값을 주었지만 첫 번째 리턴 값을 실행하고 함수 밖으로 빠져나오기 때문에 첫 번째 리턴 값 banana만 반환하게 된다.

인수와 인자

인자는 함수 정의에 사용되는 변수를 말하고 인수는 함수의 호출에 사용되는 변수를 말한다.

인자 == 매개변수 == Parameter

function 함수(aaa, bbb){
    return aaa+bbb;
}
  • 여기에서 aaa,bbb가 파라미터라고 할 수 있다.
  • 함수의 정의에서 사용되는 변수를 파라미터라고 한다.

인수 == Argument

document.write(함수(3,4));
  • 여기에서 3,4 의 값이 인수(Argument)이다.
  • 파라미터의 값으로 아규먼트 3과 4를 대입하였다. 라는 의미가 성립
  • 인수 3,4는 인자 add,bbb로 들어가게 되어 3+4가 출력된다.

배열 (Array)

1. 배열의 문법

let fruits = ['banana', 'apple', 'grape'];
  • 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.
bananaapplegrape
012
  • 배열의 각 원소들은 고유한 값을 가진다.
  • 고유한 값을 색인 또는 index라고 부른다.
  • index는 특정한 값을 찾아내는 역할을 한다.
let fruits = ['banana', 'apple', 'grape'];
document.write (fruits[0] + '<br/>');
document.write (fruits[1] + '<br/>');
document.write (fruits[2]+ '<br/>');

banana
apple
grape

  • index를 통해 배열의 원소에 접근할 수 있다.

2. 배열의 역할

function fruits(){
	return ['banana', 'apple', 'grape'];
}
let fruit = fruits();
document.write(fruit[0] + '<br/>');
document.write(fruit[1] + '<br/>');
document.write(fruit[2]+ '<br/>');

banana
apple
grape

  • 함수에서 배열과 index를 통해 여러 개의 값에 접근할 수 있다.

3. 배열과 반복문

function fruits(){
	return ['banana', 'apple', 'grape'];
}

let fruit = fruits();

for(let i = 0; i < fruit.length; i++){
  document.write(fruit[i].toUpperCase()+'<br/>');
}

BANANA
APPLE
GRAPE

  • .toUpperCase()는 문자열을 대문자로 바꾸어주는 자바스크립트 내장 함수이다.
  • for 반복문으로 고정되지 않은 i값을 이용하여 배열을 출력할 수 있다.
  • fruit.length 값은 배열에 담겨있는 원소의 개수에 따라 가변적으로 바뀌기 때문에 배열의 값이 아무리 많아지고 적어져도 잘 실행된다.

4. 배열의 제어

크기

length

let num = [1, 2, 3, 4, 5]
document.write(num.length);

5

  • 배열.length를 통해 배열의 크기를 알 수 있다.

추가

push

let num = [1, 2, 3, 4, 5]
num.push(6);
document.write(num);

1,2,3,4,5,6

  • 배열.push()를 통해 배열의 원소를 추가할 수 있다.
  • 배열의 맨 끝에 index가 추가된다.
  • 하나의 원소를 추가하는 내장함수

concat

let num = [1, 2, 3, 4, 5]
num = num.concat(6, 7);
document.write(num);

1,2,3,4,5,6,7

  • 복수의 원소를 추가하는 내장함수
  • 기존 변수에 있던 배열의 원소에 추가할 원소를 합쳐 새로운 변수를 만든다.

unshift

let num = [1, 2, 3, 4, 5]
num.unshift(6);
document.write(num);

6,1,2,3,4,5

  • 배열의 시작점에 원소를 추가하는 방법
  • 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 index를 1씩 증가시킨다.

splice

let num = [1, 2, 3, 4, 5]
num.splice(1, 1, 6)
document.write(num)

1,6,3,4,5

  • 배열.splice(index, howmany, element1, ..., elemetN);
  • howmany 부분은 인덱스에 해당하는 부분을 삭제한다는 뜻이다. howmany 부분에 1을 넣으니 인덱스 1에 해당하는 2가 삭제되었다.

제거

shift

let num = [1, 2, 3, 4, 5];
num.shift();
document.write(num)

2,3,4,5

  • 첫번째 원소를 제거하는 방법

pop

let num = [1, 2, 3, 4, 5];
num.pop();
document.write(num);

1,2,3,4

  • 배열의 끝 원소를 제거하는 방법

정렬

sort

let num = [3, 2, 1, 4, 5]
num.sort();
document.write(num);

1,2,3,4,5

  • sort는 배열을 정렬한다.

객체 (Object)

자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.

객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다.

1. 객체의 문법

배열과 객체는 유사하다. 하지만 객체는 원소의 index값에 문자나 숫자 등 원하는 데이터를 지정할 수 있다.

객체의 생성

let grades = {'김철수': 80, '이영희': 90, '최혜림': 100};
  • 프로퍼티 (property) : '김철수': 80, '이영희': 90, '최혜림': 100
  • 키 (key) : '김철수', '이영희', '최혜림'
  • 값 (value) : 80, 90, 100
vat grades = {};
grades['김철수'] = 80;
grades['이영희'] = 90;
grades['최혜림'] = 100;
  • 빈 객체를 만든 후 객체 안에 키와 값을 넣을 수도 있다.

객체의 값에 접근하기

let grades = {'김철수': 80, '이영희': 90, '최혜림': 100};
document.write(grades['최혜림']+'<br/>');
document.write(grades.최혜림+'<br/>');

100
100

  • 객체['key'] 로 접근
  • 객체.key 로 접근

2. 객체와 반복문

let grades = {'김철수': 80, '이영희': 90, '최혜림': 100};
for(key in grades) {
	document.write(key + '<br/>');
}

김철수
이영희
최혜림

  • for(객체의 키 in 객체) {}
  • 객체의 키는 각 각 for문안으로 들어간다.
let grades = {'김철수': 80, '이영희': 90, '최혜림': 100};
for(key in grades) {
	document.write(grades[key] + '<br/>');
}

80
90
100

  • 객체의 키 값은 객체[key]로 접근할 수 있다.
let grades = {'김철수': 80, '이영희': 90, '최혜림': 100};
for(key in grades) {
	document.write('<li>'+grades[key]+'</li>');
}
  • 80
  • 90
  • 100
    • 리스트 형태로도 객체의 값을 출력할 수 있다

    3. 객체의 메서드(method)

    프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미한다. 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행하여야 한다. 즉 그 동작을 수행하는 주체는 객체이며 그 동작을 수행하기 위해서는 객체에게 그 동작을 수행하라고 지시해야 한다.

    let greet = {
      'greeting' : function() {
        document.write('Hello, World!');
    }
    }
    greet['greeting']();

    this

    let greet = {
      'greeting' : function() {
        document.write(this);
    }
    }
    greet['greeting']();
    • this는 객체 자신을 가르키도록 약속되어 있는 변수
    let greet = {
      'list' : {'김철수': 80, '이영희': 90, '최혜림': 100},
      'greeting' : function() {
        console.log(this.list);
    }
    }
    greet['greeting']();

    [object Object] {
    김철수: 80,
    이영희: 90,
    최혜림: 100
    }

    <참고>

    profile
    https://rimi0108.github.io/

    0개의 댓글